Example of using thumb option?

[macsupport]

Since I am using an icon that shows on hover to open photobox and the image is not a child of that link, how might one use the 'thumb' option to set this type of path? I have tried thumb: ' .item > .effeckt-caption' but I'm unsuccessful! Here is the html layout of a thumbnail inside #gallery. The a.photobox link is for the lightbox and the other is for an info modal. Is this possible?

<div class="item">
<figure class="effeckt-caption">
 <img class="img-rounded" src="thumbs/Amber Light.jpg" width="150" height="118" alt="Amber Light"> 
<ol class="common-style">
<li class="white-rounded"><a class="photobox" href="slides/Amber Light.jpg" title="Amber Light" ><i class="fa fa-camera fa-lg"></i></a></li>
<li class="white-rounded modallink"><a data-toggle="modal" data-target="#itemModal"><i class="fa fa-info fa-lg"></i></a></li>
     </ol>                  
  </figure>
  </div>

[yairEO]

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

[macsupport]

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!

[yairEO]

what is the js code you initialize photobox with?

[macsupport]

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

[yairEO]

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

[macsupport]

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

[yairEO]

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

[macsupport]

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.

[yairEO]

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

[macsupport]

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>

[Sangle89]

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

Click here to show poup gallery

<script> $(document).ready(function(){ $('#gallery').photobox('a', {thumbs: true}); $('#showPopup').click(function(){ $('#gallery a:first-child').trigger('click'); }); }); </script>

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