Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Member ladydiella's Avatar
    Join Date
    Mar 2009
    Posts
    45
    Member #
    18566
    Hi,

    I just finished building my very first website. I am having trouble with a few pages and can't figure out what I have done wrong. It's my portfolio website and I have a section where you can click on a thumbnail to view the picture larger. If you click the second thumbnail in the "photography" section it sends you to the previous picture, not the picture for that thumbnail. In the css I have the correct number typed in to view the larger photo. For instance when you click the thumbnail it should take you to photo #17. I takes you to 17 but 17 is the same as 16 and I don't know why 16 is duplicated. It seems to be this way with a few other thumbnails on the page. BUT, if you just scroll through the large images as a slide show #17 is the correct photo and they all seem to be in the correct order. I hope this is understandable. I appreciate your help.

    Heres the page, click the second thumbnail and you will see what I mean.

    http://daniellasweb.com/design4.htm


    Also, in my gallery menu to the left, I can't seem to get "Packaging" "Photography" etc to sit to the right of the thumbnail like the first two. I put a break after each name instead of before it to make it sit to the right, but it only worked on "Identity" and "web". I have highlighted "Identity" below in green where I put the breaks.


    document.write('<a href="design1.htm"><img src="picts/sidebar-1.jpg" border="0" width="'+imagewidth+'" height="'+imageheight+'" class="Galborder"></a>');
    document.write(' Identity<br> ');

    document.write('<img src="picts/spacer.gif" width="5" height="'+spacerheight+'"><br>');

    document.write('<a href="design2.htm"><img src="picts/sidebar-2.jpg" border="0" width="'+imagewidth+'" height="'+imageheight+'" class="Galborder"></a>');
    document.write(' Web<br> ');

    document.write('<img src="picts/spacer.gif" width="5" height="'+spacerheight+'"><br>');

    document.write('<a href="design2.htm"><img src="picts/sidebar-2.jpg" border="0" width="'+imagewidth+'" height="'+imageheight+'" class="Galborder"></a>');
    document.write(' Packaging<br> ');

    document.write('<img src="picts/spacer.gif" width="5" height="'+spacerheight+'"><br>');

    }
    {

    document.write('<a href="design4.htm"><img src="picts/sidebar-4.jpg" border="0" width="'+imagewidth+'" height="'+imageheight+'" class="Galborder"></a>');
    document.write(' Photography<br> ');

    document.write('<img src="picts/spacer.gif" width="5" height="'+spacerheight+'"><br>');

    document.write('<a href="design5.htm"><img src="picts/sidebar-5.jpg" border="0" width="'+imagewidth+'" height="'+imageheight+'" class="Galborder"></a>');
    document.write(' Personal<br> ');

    document.write('<img src="picts/spacer.gif" width="5" height="'+spacerheight+'"><br>');

    document.write('<a href="design6.htm"><img src="picts/sidebar-6.jpg" border="0" width="'+imagewidth+'" height="'+imageheight+'" class="Galborder"></a>');
    document.write(' Cinematography<br> ');

    document.write('<img src="picts/spacer.gif" width="5" height="'+spacerheight+'"><br>');

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    The count is off by one on all of them.

    You have this:

    <td align="center" valign="top" width="115"><a href="javascript:ViewImage('17')"><img alt="" src="gallery/gallery4-2.jpg" class="Galborder" border="0"></a><span class="designtitle"></span><br>
    </td>

    But '17' is not thumbnail 4-2 ....

    It should be thumbnail 4-1

    Like this:

    <td align="center" valign="top" width="115"><a href="javascript:ViewImage('17')"><img alt="" src="gallery/gallery4-1.jpg" class="Galborder" border="0"></a><span class="designtitle"></span><br>
    </td>

    So you're off by 1 on all of them.


  4. #3
    Member ladydiella's Avatar
    Join Date
    Mar 2009
    Posts
    45
    Member #
    18566
    Hey thanks for replying. The gallery4-2 is just the thumbnail, not the picture it opens to. I have all the correct thumbnails for each picture, but they are opening to the wrong larger picture. 4-1 is opening to the correct picture as number 16, then 4-2 is the same as 16 but says 17. The name of the larger pictures are Fgallery4-1, Fgallery4-2 etc. When you click a thumbnail it opens to "view-slideshow.htm. The coding for that page is here....

    <input type="hidden" value="gallery/Fgallery1-1.png" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery1-2.png" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery1-3.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery1-4.gif" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery1-5.gif" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery1-6.png" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery1-7.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery1-8.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery1-9.jpg" name="slide" onChange="change();">

    <input type="hidden" value="gallery/Fgallery2-1.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery2-2.png" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery2-3.png" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery2-4.jpg" name="slide" onChange="change();">
    <!--<input type="hidden" value="gallery/Fgallery2-5.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery2-6.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery2-7.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery2-8.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery2-9.jpg" name="slide" onChange="change();">-->


    <input type="hidden" value="gallery/Fgallery3-1.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery3-2.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery3-3.jpg" name="slide" onChange="change();">
    <!--<input type="hidden" value="gallery/Fgallery3-4.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery3-5.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery3-6.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery3-7.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery3-8.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery3-9.jpg" name="slide" onChange="change();">-->


    <input type="hidden" value="gallery/Fgallery4-1.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery4-2.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery4-3.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery4-4.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery4-5.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery4-6.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery4-7.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery4-8.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery4-9.jpg" name="slide" onChange="change();">

    <input type="hidden" value="gallery/Fgallery5-1.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery5-2.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery5-3.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery5-4.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery5-5.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery5-6.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery5-7.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery5-8.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery5-9.jpg" name="slide" onChange="change();">

    <!--<input type="hidden" value="gallery/Fgallery6-1.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery6-2.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery6-3.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery6-4.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery6-5.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery6-6.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery6-7.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery6-8.jpg" name="slide" onChange="change();">
    <input type="hidden" value="gallery/Fgallery6-9.jpg" name="slide" onChange="change();">-->






    I checked my picture gallery and the correct pictures are labeled to the correct name so I am lost!

  5. #4
    Member ladydiella's Avatar
    Join Date
    Mar 2009
    Posts
    45
    Member #
    18566
    ok I looked at my counting and yes, you were right, I was off by one. I fixed the counting so they are all correct 1-34, but now in Photography the 3rd and 5th thumbnail are going to the one ahead of it!!

    http://daniellasweb.com/design4.htm


  6. #5
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    That's just all goofy.
    I see what you mean, it's sort of frustrating.

    I usually use LightBox for my galleries.
    http://www.lokeshdhakar.com/projects/lightbox2/

    Clicking the thumb opens the lightbox and there is a prev / next button to
    advance, plus a place for title. Lots of configuration features.

    Here is a working example (click on any thumbnail):
    http://www.sarahhewitt.com/gallery.php?port=1

    View that page's HTML to see how the images are brought-up with LightBox.

    You might find is more stable, and easier to work with.
    You don't have to make any other pages for slideshow stuff.


  7. #6
    Member ladydiella's Avatar
    Join Date
    Mar 2009
    Posts
    45
    Member #
    18566
    Looks interesting. Is there a way to view it as a slide show or click next instead of closing and reopening a new picture?

    Could I add that in my website and keep my graphics or would it be an external page?

  8. #7
    Senior Member jyuill's Avatar
    Join Date
    Jan 2009
    Location
    California
    Posts
    145
    Member #
    18049
    Quote Originally Posted by ladydiella
    Looks interesting. Is there a way to view it as a slide show or click next instead of closing and reopening a new picture?

    Could I add that in my website and keep my graphics or would it be an external page?
    It is a slideshow, with or without back-next buttons. What it is is a JavaScript that opens a box over the page you are on with the images in it, and usually puts a transparent gray over the web page to make the lightbox pop and show you are on something other than the main page. And yes, it would all still be in your site. Just google lightbox galleries, it is a very popular gallery and looks very nice.
    Semantic, Valid, and Accessible Design!


  9. #8
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    After it pops up, when you put your mouse over the photo on the left or right,
    the PREV and NEXT buttons appear.



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 07:10 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com