www.webdeveloper.com
Results 1 to 10 of 10

Thread: Passing a variable in HTML (I think?)

  1. #1
    Join Date
    Jul 2012
    Posts
    4

    Passing a variable in HTML (I think?)

    Hi everyone and as this is my first post, accept my apologies for typos etc.

    Anyway...

    I have a created a custom CSS menu which is basically a bunch of styled <li>blah blah</li> code.

    On the same page I have code to display several images...
    <img src="/img/folder1/01.jpg">
    <img src="/img/folder1/02.jpg">
    ..
    <img src="/img/folder1/10.jpg>

    Now there can be any number of folders for the images so what I would like to do is store a variable within the CSS menu and pass it on to the folder name in the images like so...

    <li>Folder 1<***store the variable folder1***></li>
    <li>Folder 1<***store the variable folder2***></li>
    etc etc...

    And then pass this variable like so...
    <img src="/img/***stored variable***/01.jpg">

    So that when a menu option is clicked the images from the relevant folder will be displayed.

    Phew! Hope that makes sense.

    Any insights would be greatly received!

  2. #2
    Join Date
    Mar 2011
    Posts
    1,133
    It's not clear to me what you have in mind. Ordinarily, you'd just create a conventional link to the desired folder and have a page contained within that folder that displays the relevant images.

    On the other hand, if you want this process to be automated in some way, you'll need some software on the server that can find your folders and the image files involved, and then dynamically create any needed links and <img> tags. If you search for "image gallery script", you should be able to find lots of examples that you might be able to use instead of having to create everything yourself from scratch. Good luck!
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Mar 2012
    Posts
    1,118
    This can be done in PHP or JavaScript. I prefer PHP because it is transparent to the client (i.e. cannot be disabled) but both have advantages. To test php off-line you need to set up a local host. I use WAMP, its free, easy to set up and works faultlessly. To use php live, your host must be configured to run php. Paid hosts usually are, some free ones aren't. Anyway, asuming you have php set up, the process would be something like:

    1. Rename the web page from .html to .php e.g. "index.php".

    2. Set variable $folder from get variable 'folder' (default to '1'):

    <body>
    <?php
    /* suppress notice if data not found */
    error_reporting(E_ALL ^ E_NOTICE);
    if ( $_GET['folder'] == NULL ) { $folder='1'; }
    else { $folder=$_GET['folder'];
    }
    ?>

    2. Take form input to select folder:

    <form action="index.php" method="get">
    select page:
    <input type=submit name="folder" value="1">
    <input type=submit name="folder" value="2">
    <input type=submit name="folder" value="3">
    <input type=submit name="folder" value="4">
    </form>

    3. Display pictures (assuming folder names 'img/folder1/' etc...):

    <img src="/img/folder<?php echo $folder; ?>/01.jpg">
    <img src="/img/folder<?php echo $folder; ?>/02.jpg">
    <img src="/img/folder<?php echo $folder; ?>/03.jpg">

    Note: You cannot test php in your browser like you can html. Browsers do not understand php. You have to set up a shortcut to lauch it as a web page. E.g. Say you have put the web page "index.php" in the root directory of WAMP (usually C:\wamp\www\") the target of the shortcut would be:

    target "http://localhost/index.php" or "http://127.0.0.1/index.php". Either will do.
    Last edited by jedaisoul; 07-26-2012 at 02:37 AM.

  4. #4
    Join Date
    Jul 2012
    Posts
    4
    Quote Originally Posted by jedaisoul View Post
    This can be done in PHP or JavaScript. I prefer PHP because it is transparent to the client (i.e. cannot be disabled) but both have advantages. To test php off-line you need to set up a local host. I use WAMP, its free, easy to set up and works faultlessly. To use php live, your host must be configured to run php. Paid hosts usually are, some free ones aren't. Anyway, asuming you have php set up, the process would be something like:

    1. Rename the web page from .html to .php e.g. "index.php".

    2. Set variable $folder from get variable 'folder' (default to '1'):

    <body>
    <?php
    /* suppress notice if data not found */
    error_reporting(E_ALL ^ E_NOTICE);
    if ( $_GET['folder'] == NULL ) { $folder='1'; }
    else { $folder=$_GET['folder'];
    }
    ?>

    2. Take form input to select folder:

    <form action="index.php" method="get">
    select page:
    <input type=submit name="folder" value="1">
    <input type=submit name="folder" value="2">
    <input type=submit name="folder" value="3">
    <input type=submit name="folder" value="4">
    </form>

    3. Display pictures (assuming folder names 'img/folder1/' etc...):

    <img src="/img/folder<?php echo $folder; ?>/01.jpg">
    <img src="/img/folder<?php echo $folder; ?>/02.jpg">
    <img src="/img/folder<?php echo $folder; ?>/03.jpg">

    Note: You cannot test php in your browser like you can html. Browsers do not understand php. You have to set up a shortcut to lauch it as a web page. E.g. Say you have put the web page "index.php" in the root directory of WAMP (usually C:\wamp\www\") the target of the shortcut would be:

    target "http://localhost/index.php" or "http://127.0.0.1/index.php". Either will do.
    Thanks for the reply. I have been looking at trying to do it in PHP but it is not something I have used before so would not know where to start. But I think I will take the plunge. One thing though - should I be using WampServer or Wamp5?

    Thanks again.

  5. #5
    Join Date
    Jul 2012
    Posts
    4
    Jedaisoul, I have downloaded WampServer and got it running great and have managed to get your code up and running too with the result I needed - however...

    How do I turn a line like this...

    <li><a href="Gallery1.html" target="_self">Gallery One</a></li>

    ...into one that will accept and store the values - I do not really want to use forms and input buttons instead of my CSS menu.

    The menu code is made up of several <li> wrapped in a div, I have tried wrapping ALL that in a form tag but no luck. Can it be done?

    Hope that makes sense!

  6. #6
    Join Date
    Mar 2012
    Posts
    1,118
    I'm not sure what you mean? Why do you need to input and store the folder number, if you retain the existing menu structure??? Or is each gallery sub-divided into folders?

  7. #7
    Join Date
    Mar 2012
    Posts
    1,118
    It's easy to put a variable in the gallery name but I'm not sure where it is going to come from? Anyway, to make the menu item variable you just amend your example to:

    <li><a href="Gallery<?php echo $folder; ?>.php?">Gallery <?php echo $folder; ?></a></li>

    But where does the variable come from? Are you planning a menu like:

    "first prev 1 2 3 4 5 next last"

    where the "1 2 3 4 5" is variable to give a range around the current page? E.g. If 103 is the current page it should display

    "first prev 101 102 103 104 105 next last". If so, it can be done, but I'd suggest that it does not make sense to link to separate web pages for each gallery anyway. Why not pull the gallery of pictures into the current page???

    I need a clearer understanding of what you are trying to achieve...

  8. #8
    Join Date
    Mar 2012
    Posts
    1,118
    Anyway, I've re-read the OP and I think I've got it now. You want a range of folder numbers to be selectable from a menu of anchors, instead of a form. OK? We can do that. Firstly we need to set up variables $current and $last. Then as new galleries are added, you just need to amend $last. That sound good? OK. You need to simulate a form submission with a range of anchors. The trick is, the anchors must all point to the menu page, not to the galleries. Sounds silly, but that will work. So, say we want a menu of 5 galleries in index.php, and there are 10 gallieries to pick from, we amend the code to:

    <?php
    /* amend $last as galleries are added */
    $last=10;

    /* suppress notice if data not found */
    error_reporting(E_ALL ^ E_NOTICE);
    if ( $_GET['current'] == NULL ) { $current=1; }
    else { $current=$_GET['current'];
    } /*endif */

    /* set highest sel1 */
    $sel1hi= $last - 4;

    /* calculate $sel1 */
    if ($current >= $sel1hi) {
    $sel1 = $sel1hi: }
    elseif ($current < 5) {
    $sel1 = 1; }
    else {
    $sel1 = $current - 2;
    } /*endif*/

    /* set remaining selections */
    $sel2 = $sel1 + 1;
    $sel3 = $sel1 + 2;
    $sel4 = $sel1 + 3;
    $sel5 = $sel1 + 4;
    ?>

    2. Menu to select folder (including "start" and "end" options):

    <li><a href="index.php?current=1">Start</a></li>
    <li><a href="index.php?current=<?php echo $sel1; ?>">Gallery <?php echo $sel1; ?></a></li>
    <li><a href="index.php?current=<?php echo $sel2; ?>">Gallery <?php echo $sel2; ?></a></li>
    <li><a href="index.php?current=<?php echo $sel3; ?>">Gallery <?php echo $sel3; ?></a></li>
    <li><a href="index.php?current=<?php echo $sel4; ?>">Gallery <?php echo $sel4; ?></a></li>
    <li><a href="index.php?current=<?php echo $sel5; ?>">Gallery <?php echo $sel5; ?></a></li>
    <li><a href="index.php?current=<?php echo $last; ?>">End</a></li>

    3. Display pictures:

    <img src="/img/Gallery<?php echo $current; ?>/01.jpg">
    <img src="/img/Gallery<?php echo $current; ?>/02.jpg">
    <img src="/img/Gallery<?php echo $current ?>/03.jpg">

    Is that what you wanted???

  9. #9
    Join Date
    Jul 2012
    Posts
    4

    Smile

    ... but I'd suggest that it does not make sense to link to separate web pages for each gallery anyway. Why not pull the gallery of pictures into the current page???

    Hi... that is how I am doing it at them moment!

    Each anchor in the menu is linking to an individual page. But it is very repetitive as each page is identical apart from the folder name.

    Anyway, I've re-read the OP and I think I've got it now. You want a range of folder numbers to be selectable from a menu of anchors, instead of a form. OK? We can do that. Firstly we need to set up variables $current and $last. Then as new galleries are added, you just need to amend $last. That sound good? OK. You need to simulate a form submission with a range of anchors. The trick is, the anchors must all point to the menu page, not to the galleries. Sounds silly, but that will work. So, say we want a menu of 5 galleries in index.php, and there are 10 gallieries to pick from, we amend the code to:
    ...in a way that's it. Each gallery entry in the menu will pull the pictures from the relevant folder - gallery1 pulls gallery1 folder pictures and so on...
    I don't think I would need to code a variable for the last menu entry as each entry will be specific to a gallery and you would not be able to select outside of the range.

    Ha ha, have I made it more complicated now? I am going to play around with your code in your last reply while you chew over this response.

    Again, many thanks for your time on this.

  10. #10
    Join Date
    Mar 2012
    Posts
    1,118
    Quote Originally Posted by broomgrove View Post
    ...in a way that's it. Each gallery entry in the menu will pull the pictures from the relevant folder - gallery1 pulls gallery1 folder pictures and so on...
    I don't think I would need to code a variable for the last menu entry as each entry will be specific to a gallery and you would not be able to select outside of the range. Ha ha, have I made it more complicated now? I am going to play around with your code in your last reply while you chew over this response.
    No, the menu is of the galleries, not the pictures in a gallery. You did not mention any problem with displaying the pictures, it was just the selection of the galleries I focussed on.

    Quote Originally Posted by broomgrove View Post
    Again, many thanks for your time on this.
    You're welcome.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles