how can i add a previous/next link to "Picture and thumbnails on same page" ?

2,314 Posts

anonymized-26931 Reply #21, 17 years, 1 month ago

hmmm...i see

i don’t know if it makes a difference, but i use another template for the gallery-pictures:

<div class="hoverthumb">
<a href="javascript:showPic('[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]','[+maxigallery.picture.title:htmlent+]','[+maxigallery.picture.descr:htmlent+]',[+maxigallery.picture_width_normal+],[+maxigallery.picture_height_normal+])">
<img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]"
class="thumbnail" title="[+maxigallery.picture.title:htmlent+]"
alt="[+maxigallery.picture.title:htmlent+]" /></a>
</div>

....i’m still checking out your code, to see what’s going on

2,314 Posts

anonymized-26931 Reply #22, 17 years, 1 month ago

okay, it’s working if you change this part in your gallery picture template:

<a href="javascript:void(0);" onclick="javascript:showPic('gallery-test-Dateien/lori_23.jpg','','',313,468);return
false;">
<img src="gallery-test-Dateien/tn_lori_23.jpg" class="thumbnail" title="" alt="">
</a>

...so that the output will be:

<a href="javascript:showPic('gallery-test-Dateien/lori_21.jpg','','',439,468)">
<img src="gallery-test-Dateien/tn_lori_21.jpg" class="thumbnail" title="" alt="">
</a>

see the template i use in the post above

doesn’t need to be in a div "hoverthumb" as in my template btw

*edit: ...how does it come you’ve got several <ul>s to display your thumbnails?

10 Posts

Lt. Dan Reply #23, 17 years, 1 month ago

Quote from: sharkbait at Sep 01, 2009, 08:43 AM

okay, it’s working if you change this part in your gallery picture template:
<a href="javascript:void(0);" onclick="javascript:showPic('gallery-test-Dateien/lori_23.jpg','','',313,468);return
false;">
<img src="gallery-test-Dateien/tn_lori_23.jpg" class="thumbnail" title="" alt="">
</a>
...so that the output will be:
<a href="javascript:showPic('gallery-test-Dateien/lori_21.jpg','','',439,468)">
<img src="gallery-test-Dateien/tn_lori_21.jpg" class="thumbnail" title="" alt="">
</a>
see the template i use in the post above

doesn’t need to be in a div "hoverthumb" as in my template btw

Ah ha! That was it. Our templates were just a bit different. THANK YOU!!!

2,314 Posts

anonymized-26931 Reply #24, 17 years, 1 month ago

great!!

now you can add the spinner-gif call to your css, as well as the active-state class for the thumbnails....and maybe a fixed height for your picture container, so that the prev/next-links won’t "jump" when pictures are swapped

10 Posts

Lt. Dan Reply #25, 17 years, 1 month ago

Quote from: sharkbait at Sep 01, 2009, 08:52 AM

great!!

now you can add the spinner-gif call to your css, as well as the active-state class for the thumbnails....and maybe a fixed height for your picture container, so that the prev/next-links won’t "jump" when pictures are swapped

I set up a height for the photos to remove the jumping, but you’d have to walk me through using the spinner gif (I understand the concept but haven’t implemented it before.

2,314 Posts

anonymized-26931 Reply #26, 17 years, 1 month ago

okay

right now our javascript will add a class "loading" to the div with the ID "picturecontainer" (it’s already in your script)

jq('#picturecontainer').addClass('loading')

so in your css-file you need to reference it:

#picturecontainer.loading {
background: url(path-to-your-loading-gif/loading.gif) no-repeat center center;
}

btw., here’s a nice loading-gif generator: http://www.ajaxload.info/