Thumbnail Viewr II within a Facebox script

**BGladNYC** · 07-02-2009, 01:37 PM

1) Script Title: Thumbnail Viewer II and Facebox

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...thumbnail2.htm
http://www.dynamicdrive.com/dynamici...ebox/index.htm

3) Describe problem:

I am using two scripts that I got from DYNAMIC DRIVE web page: facebox script for a pop-up window that contains photos and text, and Thumbnail Viewer II. I would like to use the Thumbnail Viewer II script within the facebox script so when one clicks on a thumbnail in a facebox window, the photo is shown in the designated area within a facebox window. I checked both scripts and both are IE and Firefox compatible. However, I was able to make it work in IE, but unable to make it work in Mozila Firefox or Google Chrome. Does anybody know what should I do to make it work in those two browser (or even Safari)? I appreciate your help.

Forgot to mention: When in Firefox or Chrome, clicking on a thumbnail opens the photo in a new web page...

**ddadmin** · 07-03-2009, 04:29 AM

Can you post a link to what you have so far?

**BGladNYC** · 07-03-2009, 10:01 AM

@ ddadmin: hey, thanks for your reply.

Here is the page: http://www.studio-g2.hr/index2.html if you click on "natjecaji" and then the box, you will see it in action.

Basically, with facebox code I am calling a html page that contains thumbnail viewer and the code looks like this

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> 

<html>   
<head>
<title>TEST</title>
<script type="text/javascript" src="JS/thumbnailviewer2.js" defer="defer">

/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>



</head> 
<body>
<h3>Kazalište Odeon u Šibeniku</h3>                                                           
                                                                                       
<p>

<table cellpadding="10">
<tr>
<td valign="top">
	<div id="loadarea2" style="width: 467px"><img src="Photos/javni/sibenik_presjek_half.jpg" width="467" height="317"></div>
<br />
<a href="Photos/javni/sibenik_odeon_3D_scena.jpg" width="467" height="317" rel="enlargeimage::click" rev="loadarea2"><img src="Photos/javni/thmb_sibenik_odeon_3D_scena.jpg" ></a>
<a href="Photos/javni/sibenik_odeon_3D_auditorium.jpg" 	width="467" height="317" rel="enlargeimage::click" rev="loadarea2"><img src="Photos/javni/thmb_sibenik_odeon_3D_auditorium.jpg"	></a>
<a href="Photos/javni/sibenik_odeon_3D_lobby01.jpg" 	width="467" height="317" rel="enlargeimage::click" rev="loadarea2"><img src="Photos/javni/thmb_sibenik_odeon_3D_lobby01.jpg" ></a>
<a href="Photos/javni/sibenik_odeon_3D_lobby02.jpg" 	width="467" height="317" rel="enlargeimage::click" rev="loadarea2"><img src="Photos/javni/thmb_sibenik_odeon_3D_lobby02.jpg"></a>
<a href="Photos/javni/sibenik_odeon_3D_procelje.jpg" 	width="467" height="317" rel="enlargeimage::click" rev="loadarea2"><img src="Photos/javni/thmb_sibenik_odeon_3D_procelje.jpg"> 	</a>


</td>

	      

<td valign="top">
<div class="scroll" style="height:290px; width:300px; overflow:auto;">


<b>Obnova kazališta</b>
<p />
BLAH BLAH BLAH
<p />
BLAH BLAH BLAH
</div>
</td>
</tr>
</table>
<p />
</body>
</html>

Thanks for your help

**ddadmin** · 07-04-2009, 07:25 AM

The problem is due to the fact that the thumbnail script is contained inside the external page, and that page is fetched via Ajax. In such a setup, many browsers will not properly run any JavaScript that's on the external page when the page is loaded.

If all you're trying to do is create thumbnail images on the external page that when clicked on loads a larger image, on your main page (not the external page), first add something like the following script in the HEAD section:

Code:

<script type="text/javascript">

function enlargeimage(linkobj, targetdiv){
 var targetimage=linkobj.getAttribute('href')
	document.getElementById(targetdiv).innerHTML='<img src="' + targetimage+ '" />'
}

</script>

Then on your external page, modify the HTML for the thumbnail links to something like:

Code:

<a href="Photos/natjecaji/krapina_trg_3D_presjek_01.jpg" width="467" height="330" onClick="enlargeimage(this, 'loadarea2'); return false"><img src="Photos/natjecaji/thmb_krapina_trg_3D_presjek_01.jpg"></a>

Do this for the other thumbnail links on your page as well obviously.

**BGladNYC** · 07-06-2009, 06:45 AM

Thanks for the suggestions. It does what I wanted. However, when clicking on a thumbnail for the first time, the enlarged pic JUMPS and JITTERS for a millisecond. The transition is rough. Sorry to be a pain, but, is it possible to add the smooth transition as seen in Thumbnail Viewer II script? When I click on the thumbs clicked before, it loads nicely, but the first time is really ugly.

Thanks again on your help

B

Thread: Thumbnail Viewr II within a Facebox script

Thread Tools

Search Thread

Thumbnail Viewr II within a Facebox script

Bookmarks

Bookmarks

Posting Permissions