Example of using thumb option? about photobox HOT 11 OPEN

well, it should be a relative path from the triggering element, to the thumb, assuming they both are inside a shared element

from photobox.

In my case they are both inside the figure element, so if I'm understanding this correctly, shouldn't
'figure.effeckt-caption' be correct for the thumb option (?) or do I need to use a variable utilizing jQuery parent in some way for photobox to find the thumb? I apologize for my novice questions!

from photobox.

what is the js code you initialize photobox with?

from photobox.

For the above html I am using this code:

$('#gallery').photobox('a.photobox',{time:3000,thumbs:true,autoplay:false,counter:true,loop:true,zoomable:true });
 });

It works great if i just use a link instead of a div as the container but I would like to understand how to make the relative paths for a specific project.

Here is a different gallery using links instead of div's you might find interesting. I am using photobox with isotope, infinitescroll and added and option for CSS3 transitions to the slides and I am using Color Thief to change the slide background color to the dominant color each image on each transition.

http://macosxsupport.com/photoboxtest/index.html

from photobox.

use it like this:

HTML

<div id='gallery'>
    <div>
        <a href="http://farm9.static.flickr.com/8188/8402569316_28faf869ef_b.jpg">open</a>
        <img src="http://farm9.static.flickr.com/8188/8402569316_28faf869ef_s.jpg" title="clearly">
    </div>
    <div>
        <a href="http://farm9.static.flickr.com/8191/8402144126_2b89ed1131_b.jpg">open</a>
        <img src="http://farm9.static.flickr.com/8191/8402144126_2b89ed1131_s.jpg" title="cool ha?">
    </div>
</div>

Javascript

$('#gallery').photobox('a', {thumb:'+ img'});

so the + img will select the img which is just the next sibling of the a element

from photobox.

if {thumb:'+ img'} selects the next sibling, can one select the parent or closest in a similar way?

from photobox.

yes, you just need to pass the right selector, for parent use ':parent'. read more here - http://jqapi.com/#p=parent-selector

from photobox.

Yeah, tried that but got an error. Thanks anyway.
BTW, I asked this question on Stackoverflow and so far, everyone says that :parent won't work since the photobox code only searches the descendents of the link for the path that was set in thumb.

from photobox.

ok I see...it's a bit of a difficult situation. how does an item of the gallery looks like in terms of DOM?

from photobox.

Sorry, I'm not completely understanding. Do you want to see what is contained in #pbOverlay when the lightbox is opened?

<div id="pbOverlay" class="thumbs hasArrows hasCounter show on">
<input type="checkbox" hidden="" checked="" id="pbThumbsToggler">
<div class="pbLoader"><b></b><b></b><b></b></div>   <div class="prevNext" id="pbPrevBtn"><b></b></div>
<div class="prevNext" id="pbNextBtn"><b></b>   </div>
<div class="pbWrapper"><img src="http://placehold.it/500x400" class="zoomable"><div class="zoomable"></div></div><div id="pbCloseBtn"></div>
<div id="pbAutoplayBtn"><div   class="pbProgress"></div></div>
<div id="pbCaption"><label title="thumbnails on/off" for="pbThumbsToggler"></label><div class="pbCaptionText"><div class="title"><span></span></div> 
<div class="counter">(1/4)</div></div><div class="pbThumbs"><ul></ul></div></div></div>

from photobox.

Hi, I'm using photobox.
This is my code

Click here to show poup gallery

It working...but not show thumb image !!!
Please help me!! thank you!!

from photobox.