Can this be done? Put thumbnails below open image

classic Classic list List threaded Threaded
18 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Can this be done? Put thumbnails below open image

micke04
I would love to have thumbnails below the open image from the selected gallery.

How can I modify the script so that I can send a proper thumbnail link to the following location in the script? I could send the thumb-link in the "rel" attribute and use jquery selectors to find the image-links.

Unfortunately I am not a JS programmer...

I did this change in the shadowbox.js just to see how it would look like:

if(i==current){co+=' class="shadowbox_counter_current"'}co+=">"+(++i)+"<img src='220-l3f3Z.jpg' width='50' height='50'/></a>

and the result:

(some css had to be changed as well, such as #shadowbox_info)


Now, I would prefer to have different thumbs for the "skip" counterType of course :)

Perhaps you could implement a new counterType called "thumbview" that will look for thumbs in the "rel"?
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Can this be done? Put thumbnails below open image

micke04
If I only could print the respective image location after this line of code inside an img-tag: "co += '<a onclick="Shadowbox.change(' + i + ');"';"

I would be able to just add _thumb to it.

This should not be too hard, but I am a total newbie.. how can I do it?


// need to build the counter?<br />
if(options.displayCounter && gallery.length > 1){<br />
if(options.counterType == 'skip'){<br />
// limit the counter?<br />
var i = 0, len = gallery.length, end = len;<br />
var limit = parseInt(options.counterLimit);<br />
if(limit < len){ // support large galleries<br />
var h = Math.round(limit / 2);<br />
i = current - h;<br />
if(i < 0) i += len;<br />
end = current + (limit - h);<br />
if(end > len) end -= len;<br />
}<br />
while(i != end){<br />
if(i == len) i = 0;<br />
co += '<a onclick="Shadowbox.change(' + i + ');"';<br />
if(i == current) co += ' class="shadowbox_counter_current"';<br />
co += '>' + (++i) + '</a>';<br />
}<br />
}else{ // default<br />
co = (current + 1) + ' ' + SB.LANG.of + ' ' + len;<br />
}<br />
}<br />
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Can this be done? Put thumbnails below open image

Wizzud
In reply to this post by micke04
In shadowbox.js, the buildBars() function has a line (near the end of the function) that reads...

co += '>' + (++i) + '';

Insert this line in front it ...

if(gallery[i].player=='img') co += '><img src="'+gallery[i++].content+'" height="30" alt="" />';else

Then modify your skin.css to reset the height of #shadowbox_info...

#shadowbox_info {
  height:34px; //height of image + 4 (padding on #shadowbox_counter)
}

Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Can this be done? Put thumbnails below open image

micke04
Thanks for looking into this!

However, when I run the script after the modification, the browser freezes but does not produce any errors (both FF3 and IE).


The new line: if(gallery[i].player=='img') co += '>';else co += '>' + (++i) + '</a>';

I used "skip" counter and made an image gallery.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Can this be done? Put thumbnails below open image

Wizzud
I'm sorry! Nabble swallowed some html and I didn't think to preview it before posting!

Should read...

if(gallery[i].player=='img') co += '><**img src="'+gallery[i++].content+'" height="30" alt="" /><**/a>';else

...and remove the '**'s!
Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Can this be done? Put thumbnails below open image

micke04
Thank you so much Wizzud, that is truly great and it works like a charm.

This should definitely be included in any new release of Shadowbox! So simple, yet beautiful.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Can this be done? Put thumbnails below open image

micke04
In reply to this post by micke04
After some tweaking I am pretty satisfied with the result. I will however change the next/prev icons to something larger (hard for some people with these tiny icons to click!).

(my gallery is optimized for a 1024 display minimum)
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Can this be done? Put thumbnails below open image

micke04
In reply to this post by Wizzud
My only problem now is that the images are re-written every time I change thumbnail (only in internet explorer). Would there be any way of writing them only once and now on shadowbox.change?

(sorry did not mean to email you wizzud, accident)
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Can this be done? Put thumbnails below open image

Wizzud
I think what you are asking is for Shadowbox to not rebuild the 'counter' (your thumbnails in this particular case) if the user is simply selecting another image from within the gallery currently on display?
Is that right?

If so, the only problem here is that the buildBars() function that constructs the 'counter' assigns a class of 'shadowbox_counter_current' to the current sequence number (thumbnail).
If the counterType is skip and there is no counterLimit set, then it should be possible to just have a bit of code that switches the shadowbox_counter_current class around (from wherever it currently is, to wherever it should be). There would have to be private switch - set in change(), cleared in open() - that buildBars could check for.

Combine literacy with curiosity and a whole world of information opens up to you
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Can this be done? Put thumbnails below open image

micke04
Actually I solved the problem.. The only reason why IE reloaded the images somehow is because I was using the original size (large) images. When I switched to 30px thumbnails it worked fine!

Thanks!
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Can this be done? Put thumbnails below open image

hups
In reply to this post by micke04
can you give me your example
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Can this be done? Put thumbnails below open image

Dobbs
I'm trying to get this working but just not able to. I'd appreciate it if you could send me the source code for both the .js files and the .css file showing the exact changes. thanks in advance.

dobbs@rediffmail.com
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Can this be done? Put thumbnails below open image

muymalestado
In reply to this post by micke04
Thanks for showing that this can be done.  Attempting to follow your footsteps I cannot identify the file to alter as my download looks like version 2 (shadowbox-2.0.js) and may not be the same.

Where to look?

Thanks
Mez
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Can this be done? Put thumbnails below open image

Mez
In fact ... I'm also waiting for some step by step explainations. Thanks a lot to the one who can do that !!!
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Can this be done? Put thumbnails below open image

rolandtom
In reply to this post by micke04
@ micke04

Can you post your modified build somewhere? I'd love to take a closer look at it.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Can this be done? Put thumbnails below open image

dataload
Just thought I'd mention that I started a new post about how to achieve this in Shadowbox 3 over here if anyone's still interested.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Can this be done? Put thumbnails below open image

John Housser
In reply to this post by micke04
We recently implemented some similar changes to our web site at http://www.arcteryx.com (can be found by opening a video off the home page, or photos off the news pages, athlete pages, or product pages).

Day 1 we saw a significant shift in navigation trends in how people navigated galleries:

only 29% of "change" events were triggered by the traditional navigation arrows
28% of change events were triggered by the navigation overlay on top of the image (similar to other lightbox scripts)
43% of change events were triggered by thumbnails

Not sure if this would be similar using the regular "skip" counter, but I think people are going to be much more likely to click on a nice thumbnail (knowing as well what they're going to get), than a number or an arrow.


Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: Can this be done? Put thumbnails below open image

enrymay
In reply to this post by micke04
Please can you post your site because I don't understand reading this post!! Thank you so much!!
Loading...