Image thumbnails and enlargements -...

User 2077347 Photo


Registered User
158 posts

I have several images on my site that I have shown in thumbnail form. I want those thumbnails to be able to be clicked for a larger image. I've started doing it by just creating additional webpages with the large image on there but I'm wondering if there is a better way?

I'm not looking to use the Photo Gallery, I don't want these to be a flash feature. I use the photo gallery elsewhere in my site. Is there some way to have the larger image pop-up?

Thanks!

Here's the site:
http://tiny.cc/4u0ztns8b0
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Take a look at this: http://www.huddletogether.com/projects/lightbox2/
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2077347 Photo


Registered User
158 posts

That looks great but I'm completely lost on how to use it. Do I use the existing page I already have?
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

It's all explained on that site, and below it there is a download link for the various javascript and css files you need. And yes, you can use the thumbnail page you already have. Here is the explanation:


How to Use
Part 1 - Setup

1. Lightbox 2 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header (in this order).

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

2. Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

3. Check the CSS and make sure the referenced prev.gif and next.gif files are in the right location. Also, make sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location.

Part 2 - Activate

1. Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Optional: Use the title attribute if you want to show a caption.
2. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!

Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 282670 Photo


Registered User
3,940 posts

User 38401 Photo


Senior Advisor
10,951 posts

The Lightbox2 site is now all about Visual Light Box which is so very easy to use. You would create a page to put it on, (just duplicate the page you have it on now and just remove the images), and the program does the rest.

Program creates the image setups, creates the thumbnails, creates whatever effects you tell it to for framing and shadows etc., and it also puts the code on the page for you right where you tell it you want the images to be.

It's so easy I can't even believe it myself lol. Saved me hours and days of work making templates pages for displaying templates on. Quite a slick program to say the least, worth every effort to use it and it's free if you don't mind a small link to their site on the box when it's opened.
User 2077347 Photo


Registered User
158 posts

Ooh, Jo Ann...that is much more my speed! How do I actually get it onto my page though? If I'm using VSD, do I insert it there with the HTML tool?

Also, what is this like on the coding side. Does it show up as a flash object or does it still have text rich coding?
User 38401 Photo


Senior Advisor
10,951 posts

Yep you would use the HTML tool and it's not flash it's Javascript so people will still need to have Javascript turned on in their browsers, but the good thing is that if they don't it will just open the images in a large window so it should still be a viable solution for those people that don't like scripts running.

Here's what I would do.

If you have the HTML Editor, or any other editor or you can even use Windows Notepad program, then you can:

Create a folder for where to put the temporary pages and files it will create for you.

Run the program, create your images and setups in there how you want them.

At the last tab (Publish) when you have all the other tabs done, tell it to Publish it to the folder you created)

Open the .html file it created using a text editor of your choice. If you don't have one that you installed, Windows has Notepad which will work just fine.

These sections are what need to be taken from that file and added to your VSD page using the HTML Tool in VSD. Just copy the codes including the commented lines below that say Start and End for the sections so you will always know what it is..

Don't worry about the Meta tags and such, you would usually change that for your pages anyways and it's setup for as if this were just a lightbox page and not your site page so ignore all that. Just grab the sections below:

This goes inside the <head> </head> tags of the page:
<!-- Start VisualLightBox.com HEAD section -->
code it adds here
<!-- End VisualLightBox.com HEAD section -->

This goes in the <body> area of your site, at the top of the body works well:
<!-- Start VisualLightBox.com BODY section -->
code it adds here
<!-- End VisualLightBox.com BODY section -->

Hope that helps and let me know if you need more info, have fun with it :)
User 38401 Photo


Senior Advisor
10,951 posts

Oh I almost forgot lol, don't forget to upload the 2 directories that it creates also, the Data and Engine directories. Be sure to upload them to the same location that the website page will reside on. Don't bother with the favicon that it creates, kind of arrogant that they did that but you don't have to have their favicon on your website for using this product at all :)
User 2077347 Photo


Registered User
158 posts

I've been playing around with some of the design aspects of it and have a quick question. Is there anyway to change the font and text color if you're using titles with the thumbnails? Right now it's coming up bright blue which doesn't look very good!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.