PDA

View Full Version : Image thumbnail viewer



simonwar
06-08-2011, 08:54 PM
1) Script Title: IMAGE THUMBNAIL VIEWER

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

3) Describe problem: I have this viewer working on my site and it works a treat, However can I add text better than simply using the "title" attribute of the <a href>.

I would like to be able to control format and perhaps have something inside a <table> below the image so that I can have Name, Title Job Description, below the image of the person, and be able to add <classes> to the text to make it look nice.

You can see how far I have got here - still roughing it out.

http://albionhousehairsalon.co.uk/imageenlargetest3.html

Thanks, Simon.

FrickenTrevor
06-08-2011, 10:20 PM
If you want to add content under the image, try using ThickBox iframe
http://jquery.com/demo/thickbox/

Let me know if you want an example, need more help, etc..

simonwar
06-09-2011, 09:33 PM
OK, thanks, I'll have a look at this.

It looks like it completely replaces the code I am using - is this correct?

simonwar
06-11-2011, 01:47 PM
Until I have a chance to suss out Thickbox etc, can you help me with this problem.

I have some javascript which allows me to enlarge a picture and display its corresponding text by clicking a thumbnail of the picture.

It looks like

function LoadGallery(pictureName,imageFile,titleCaption,captionText,titleText,textText,titleJob,jobText,titlePricelist,pricelistText)
{
var picture = document.getElementById(pictureName);
if (picture.filters)
{
picture.style.filter="blendTrans(duration=1)";
picture.filters.blendTrans.Apply();
}
picture.src = imageFile;
if (picture.filters)
{
picture.filters.blendTrans.Play();
}
document.getElementById(titleCaption).innerHTML=captionText;
document.getElementById(titleText).innerHTML=textText;
document.getElementById(titleJob).innerHTML=jobText;
document.getElementById(titlePricelist).innerHTML=pricelistText;

}


I pass variables into the script using the <div> id

<div class="Text_Content" id="TeamGalleryPrices">Click on the thumbnails to find out more about the team at albion house</div>

However whan I call this function and attempt to add a hyperlink to the last of these variables - it doesn't work.

The code I use to call the variables in is as follows:


<a href="#_self" onclick="LoadGallery('TeamGallery', 'http://www.albionhousehairsalon.co.uk/images/theteam_helen_lg.gif', 'TeamGalleryCaption','Helen','TeamGalleryText','Some text.....','TeamGalleryRole','Director','TeamGalleryPrices','<a href=\'http://www.dynamicdrive.com\'> Goto Dynamic Drive</a>')"><img src="http://www.albionhousehairsalon.co.uk/images/theteam_helen_thumb.gif" width="90" height="61" /></a>

I have the basis of this code working here:
http://albionhousehairsalon.co.uk/albion_house_hair_salon_the_team3.html#_self

Tried everything... so my code must be wrong?

Thanks, Simon.