Welcome to WebmasterWorld Guest from 54.159.11.9

Forum Moderators: open

Message Too Old, No Replies

Jquery Light box -how to avoid manually create link to each large imag

     

bubble

12:33 pm on Feb 27, 2012 (gmt 0)

5+ Year Member



Hi,
I have made a slideshow which contains more than 40 images, I need to apply JQuery Lightbox to each image, is there a quicker way to create links for thumbnail to point to each large image, it seems linking thumbnail to large image manually one by one not a clever way, anyone can help with this issue? By the way, my site is notusing wordpress.

Many thanks!

RonPK

1:27 pm on Feb 27, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Linking thumbnails to the larger images is very useful for users that for whatever reason have JavaScript disabled.

rocknbil

5:06 pm on Feb 27, 2012 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



it seems linking thumbnail to large image manually one by one not a clever way, anyone can help with this issue?


How are the pages output? Are the images in static HTML pages or is the page output by server side scripting (for most today, that's PHP)?

With static pages, there's no good way other than manually coding them in. An often seen really cheesy "shortcut" is to scale the huge images down to thumbnail size and use one image for both, this is a really bad idea. It makes your pages terribly slow.

If they are dynamically output, and you adhere to some sort of image naming convention, it's pretty easy. You may even be able to do this via Javascript. let's take your large image,

sample.jpg

and if you **always** name your thumbnails like so,

sample-tn.jpg

You can do something like this.

<?php
foreach ($images as $img) {
list ($file,$extension) = preg_split('/./',$img);
$thumb = $file . '-tn.jpg';
$output .= "<p><a href=\"$img\"><img src=\"$thumb\" alt=\"click for enlargement $img\"></a></p>
}

echo $output;

If you want a purely JS solution, that may give you some ideas.

An aside, Worpress does work in the same way. If you set up your thumbs at say 100px X 50px, it will generate thumb files named sample100x50.jpg, and a "medium" file, with the full sized image named as the original was named.

bubble

2:04 am on Mar 10, 2012 (gmt 0)

5+ Year Member



Thank you for your help, I will try your code, but I am not familiar with php
 

Featured Threads

Hot Threads This Week

Hot Threads This Month