homepage Welcome to WebmasterWorld Guest from 54.234.228.64
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

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




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

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




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

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

rocknbil




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

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




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved