Image Thumbnail Viewer II want to add lightbox to it

[nisha]

1) Script Title:want to add lightbox to Image Thumbnail Viewer II script

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamici...thumbnail2.htm

3) Describe problem:

hi,

I don't know much of javascript but i know css and html and all those stuffs.
Basically i am a web designer. so i got to know about the Image Thumbnail Viewer II script on the dynamic drive open source and downloaded the files and
integrated it on my site and it was working superb. but now my box has told me to integrate the light box effect on the enlarge image to get a bigger view of the image. so i want a help from all you experts over here.

now i will explain in details what my layout wants. see their is a colour option in my layout for each product. so i want when the user mouse overs the black color thumbnail nail then a little big image of the product will come besides it and on clicking the big image a larger image will open in the light box.

i am also attaching an image to get proper idea about my requirement. Also suggest me if their is some other way to show all the product images with different color options as per my layout.

Help will be appreciated.

[jscheuer1]

Install the lightbox script as instructed on this demo page:

http://www.dynamicdrive.com/dynamici...box2/index.htm

Use its files, as there are many versions of lightbox and most of them work differently from one another. You can of course skip the Step 2 part, we will modify thumbnailviewer2.js to do that part and a little more.

Now, there are a number of things we could do with the various capabilities of lightbox v203a, but to just get it to work with thumbnailviewer2, all we need is to add these two changes (highlighted and red in the below) to the thumbnailviewer2.js file:

// -------------------------------------------------------------------
// Image Thumbnail Viewer II- By Dynamic Drive, available at: http://www.dynamicdrive.com
// Last updated: Feb 5th, 2007
// -------------------------------------------------------------------

var thumbnailviewer2={
enableTitle: true, //Should "title" attribute of link be used as description?
enableTransition: true, //Enable fading transition in IE?
hideimgmouseout: false, //Hide enlarged image when mouse moves out of anchor link? (if enlarged image is hyperlinked, always set to false!)

/////////////No need to edit beyond here/////////////////////////

iefilterstring: 'progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)', //IE specific multimedia filter string
iefiltercapable: document.compatMode && window.createPopup? true : false, //Detect browser support for IE filters
preloadedimages:[], //array to preload enlarged images (ones set to display "onmouseover"
targetlinks:[], //array to hold participating links (those with rel="enlargeimage:initType")
alreadyrunflag: false, //flag to indicate whether init() function has been run already come window.onload

loadimage:function(linkobj){
var imagepath=linkobj.getAttribute("href") //Get URL to enlarged image
var showcontainer=document.getElementById(linkobj.getAttribute("rev").split("::")[0]) //Reference container on page to show enlarged image in
var dest=linkobj.getAttribute("rev").split("::")[1] //Get URL enlarged image should be linked to, if any
var description=(thumbnailviewer2.enableTitle && linkobj.getAttribute("title"))? linkobj.getAttribute("title") : "" //Get title attr
var imageHTML='<img src="'+imagepath+'" style="border-width: 0" />' //Construct HTML for enlarged image
if (typeof dest!="undefined") //Hyperlink the enlarged image?
imageHTML='<a href="'+dest+'" rel="lightbox">'+imageHTML+'</a>'
if (description!="") //Use title attr of the link as description?
imageHTML+='<br />'+description
if (this.iefiltercapable){ //Is this an IE browser that supports filters?
showcontainer.style.filter=this.iefilterstring
showcontainer.filters[0].Apply()
}
showcontainer.innerHTML=imageHTML
myLightbox.updateImageList();
this.featureImage=showcontainer.getElementsByTagName("img")[0] //Reference enlarged image itself
this.featureImage.onload=function(){ //When enlarg . . .

Note: Code truncated to save space, edit your own copy in a text only editor like notepad.

All that remains is that you use the:

In the above case, you're telling the script to load the enlarged image in the DIV (or some other element) on the page with ID="loadarea". Obviously remember to actually give this DIV such an ID declaration. If you want the enlarged image to be hyperlinked, extend the above declaration a delimiter (: followed by the desired URL:

rev="loadarea::http://www.dynamicdrive.com"

method mentioned on the Image Thumbnail Viewer II demo page, to lightbox link a still yet again larger image to your on page larger image, ex:

<a href="bulb.gif" rel="enlargeimage::mouseover" rev="loadarea::big_bulb.gif"><img src="bulb_tbn.gif" border=0></a>

[nisha]

hi john,

thanks for helping i tried to integrate the code given by you in one html page.
but their is one small problem to it that the still larger image is opening on other page instead of the lightbox effect.

so please have a look to my page from the below url :

http://r-interactive.net/clients/car.../thumnail.html

i have applied the lightbox code to only the first text "Thumbnail Example 1"
and rest all are just not done yet.

so please suggest me how can i fix this small error.

Thanks for helping.

[jscheuer1]

My fault, at least in part. I thought that the DD version included:

updateImageList()

But I see now that it doesn't.

The good news is that you can take care of that by replacing the lightbox.js you have, with the one in the attached archive. It should work with the existing scriptaculous, prototype and effects scripts you have:

Attachment 1841

[nisha]

hi john,

thanks a lot for helping me with this javascript code. now the light box effect is working when i added the lightbox.js from your archive attached, but now their is a very small problem that when the image opens in the lighbox area for the title and the close button
is not appearing it comes once and goes away and just the close button appears and it looks too bad. so please help me fix this small error and i hope then everything will be done. so i need to know where to change the code for the title bar to appear below the image in the lightbox.

Here is the link to my url :

http://r-interactive.net/clients/car.../thumnail.html


thanks and cheers

[jscheuer1]

In lightbox.css:

#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	}

[nisha]

hi john,

thanks a lot but what changes to do in this script or css if i want the close button at the top right corner as in the url below:

http://www.dynamicdrive.com/dynamici...tbox/index.htm

thanks.

[jscheuer1]

In lightbox.js (the one I gave you) find (around line 298):

		var objImageDataContainer = document.createElement("div");
		objImageDataContainer.setAttribute('id','imageDataContainer');
		objLightbox.appendChild(objImageDataContainer);

move it to here (around line 244):

Link)/.test(clickObj)) {
				myLightbox.end();
			}
		};
		objBody.appendChild(objLightbox);
			
		var objImageDataContainer = document.createElement("div");
		objImageDataContainer.setAttribute('id','imageDataContainer');
		objLightbox.appendChild(objImageDataContainer);

		var objOuterImageContainer = document.createElement("div");
		objOuterImageContainer.setAtt

In the lightbox css, you will want to change things to suit for the imageData stuff, but one pretty much given is for the:

#imageData #bottomNavClose{ width: 66px; float: right;  padding-top: 0.7em;	}

changing the padding-bottom to padding-top, as shown.

One other thing you may want to do in lightbox.js is to disable the animation, it doesn't look as good with that section on the top (starting around line 60):

// -----------------------------------------------------------------------------------

//
//	Configuration
//
var fileLoadingImage = "file://localhost/C:/webwork2/test/lightbox203/images/loading.gif";		
var fileBottomNavCloseImage = "file://localhost/C:/webwork2/test/lightbox203/images/closelabel.gif";

var overlayOpacity = 0.8;	// controls transparency of shadow overlay

var animate = true;			// toggles resizing animations
var resizeSpeed = 7;		// controls the speed of the image resizing animations (1=slowest and 10=fastest)

var borderSize = 10;		//if you adjust the padding in the CSS, you will need to update this variable

// -----------------------------------------------------------------------------------

Set it to false;

[nisha]

hi john,

I edited the code as suggested by u but still i donot get the close button as in the url below :

http://www.dynamicdrive.com/dynamici...tbox/index.htm

yes i managed to place it at the top by changing the padding from top to bottom, but still i am not able to get the look in the light box as per the above link. Also i didn't change the var animate = true to false as suggested by u, becoz when i edited it to false the lightbox was not animating while opening and it opened at once which looked to made. yes u r right are close button should not animate but then what should i do for that. please suggest me.

also check the link for my url where i applied the lightbox. :

http://r-interactive.net/clients/car.../thumnail.html


thanks a lot.

[jscheuer1]

I misunderstood the question. I thought you just wanted the existing imageDataContainer on the top. Now I see that you might actually prefer to use the version 1 edition of lightbox. That can be done, but its integration into the thumbnail script would be different. So, before I type that all out, it would be good to know if that would fit what you're after.