Login

05-10-2009, 07:32 AM

[eluser]sl3dg3hamm3r[/eluser]
hey there

I know thickbox might not be the main-topic in this forum, but I don't feel like opening hundreds of accounts in different forums Wink

Maybe somebody knows about: I'd like to make a small gallery, as described under examples here. With one difference: I would like to show only one (not all) thumbnail. When I click on it, thick-box would let me page through all the pictures.

Any idea how to make that work?

Thx for any tipps
Oliver

05-10-2009, 08:22 AM

[eluser]slowgary[/eluser]
Look at the 'gallery images' example. It shows you how to do multiple images. If you only want to show 1 thumbnail, just don't put anything inside of the other <a> tags, or use CSS to hide them. So:

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

&lt;html &gt;

&lt;head&gt;

    &lt;title&gt;&lt;/title>

    &lt;meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1' /&gt;

    &lt;script type='text/javascript' src='http://jquery.com/demo/thickbox/js/jquery-1.1.3.1.pack.js'>&lt;/script&gt;

    &lt;script type='text/javascript' src='http://jquery.com/demo/thickbox/thickbox-code/thickbox-compressed.js'>&lt;/script&gt;

    &lt;script type='text/javascript' src='http://jquery.com/demo/thickbox/js/global.js'>&lt;/script&gt;

    &lt;style type='text/css'&gt;

        @import 'http://jquery.com/demo/thickbox/thickbox-code/thickbox.css';

        @import 'http://jquery.com/demo/thickbox/css/global.css';

    &lt;/style&gt;

&lt;/head&gt;

&lt;body&gt;

    <a href="http://jquery.com/demo/thickbox/images/plant1.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"><img src="http://jquery.com/demo/thickbox/images/plant1_t.jpg" alt="Plant 1" /></a> 

    <a href="http://jquery.com/demo/thickbox/images/plant2.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"></a> 

    <a href="http://jquery.com/demo/thickbox/images/plant3.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"></a> 

    <a href="http://jquery.com/demo/thickbox/images/plant4.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants"></a>

&lt;/body&gt;

&lt;/html&gt;

This is a working example. I basically just took the gallery example they use on the site, changed all the links to absolute, then removed the 3 images from within the links (all except the first one).

05-10-2009, 08:58 AM

[eluser]sl3dg3hamm3r[/eluser]
ah, empty links... I wasn't creative enough to figure out, many thanx! Smile

05-11-2009, 07:00 AM

[eluser]umefarooq[/eluser]
i have some thing for you i created one anchor_img() helper will help you alot to create your photo gallery. here is helper

Code:
function anchor_img($uri = '',$img = '',$attributes = '')

    {

        return anchor($uri,img($img),$attributes);

    }

here how you can use it.

Code:
$img = array('src'=>'path_of_img/img.jpg','attributes'=>'value');

   $url = 'big_image_path/big_img.jpb';

   $url_attribute = array('class'=>'thickbox','title'=>'here is title for image');

   echo anchor_img($url,$img,$url_attribute);

you can put this whole stuff in a loop to create your photo gallery with thickbox or any lightbox stuff. any problem just let us know

05-11-2009, 07:43 AM

[eluser]sl3dg3hamm3r[/eluser]
Jep I wrote also a helper for myself - it is little bit more specialized and fitted to the needs of my little cms, that's why it is not much of any reuse and I won't post it here Smile