Using lightbox 2 with thumbnail viewer 2

[visualchemistry]

1) Script Title: Lightbox 2 / thumbnail viewer 2

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

3) Describe problem: Hi all... Am new to the Forum but I can see I'll be on it a bit from now on. Firstly I'm a graphic designer and not much of a coder to be honest and I'm having a bit of a problem getting multiple scripts to function at the same time

I'm using dreamweaver to build a site which uses the thumbnail viewer script and lightbox 2 at the same time (as well as rollover image script generated by DW) - I'm not trying to combine the scripts, just to use them independently on the same page, doing their normal jobs

Basically I can get them all to work independently but when all three scripts are used together I can either get the lightbox and rollovers to work or the thumbnail viewer and rollovers to work but not all three at once

I've been reading up and it looks like it could be an "onload" problem but I'm just not familiar with the syntax and really need someones help. At present, only the rollover images are preloaded by the looks of it

Many thanks in advance

James



If it's of any use, here's the script text from the head section - External files are all in the right place as all scripts work independently

**************************************
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="thumbnailviewer2.js">

/***********************************************
* 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>

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

<script type="text/javascript">

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

</script>

[jscheuer1]

These two scripts cannot work together on the same page. This is not an onload problem, rather a basic incompatibility between the script libraries used by the two scripts (jQuery and an older version of Prototype).

You have at least two basic choices:

1. Use a jQuery based lightbox type script like:
   
   http://leandrovieira.com/projects/jquery/lightbox/
   
   
   
2. Update Lightbox v2.03a to Lightbox v2.04a (which uses a newer version of Prototype):
   
   http://www.dynamicdrive.com/forums/s...470#post163470

For the first option you may have to remove:

jQuery.noConflict()

from near the beginning of the thumbnailviewer2.js file.

For the second option, it must remain. The order you have the scripts in the head of the page is also important with this second option. They way you have it is good though.

The first option is better because both scripts would then be using the same library - less code for your users to download. If you pursue it, you should only use one reference to jQuery in the head of the page. Place it before the references to the scripts that will use it.

If you don't like the particular jQuery lightbox type script I linked to, there are many, many others. You can Google:

jquery lightbox

[visualchemistry]

John, you're a legend, thank you so much - I went for the second option in the end and I'm pretty happy with it

I was just doing a site for a friend who's got his own pub - if you're interested in seeing what I was trying to do, I got the beta site up this afternoon www.yeoldepackhorse.com

Feel free to give me a shout if you ever need any graphics doing (gratis) as you've helped me out a lot

Cheers

James

[jscheuer1]

You're welcome, and thanks for the offer. Sorry for the warning and removing your 'sig' - forum policy. After you've been around awhile, you'll be allowed your own signature configurable in your user profile.

Anyways, looks pretty good. As far as the thumbnail viewer goes though, I've a suggestion. You may have noticed, if not, you will, that if you click on a thumbnail it loads the image taking you away from the page, which in my opinion is unnecessary at best. You may feel differently, even like the effect. As I say, it's a matter of opinion.

If you want to stop that from happening, add this script to the head of the page:

<script type="text/javascript">
jQuery(function($){
	$('a[rel^=enlargeimage]').click(function(e){e.preventDefault();});
});
</script>

[visualchemistry]

Hi John

Thanks again and no probs about the sig removal etc - hopefully you still have my details so call on me whenever you like

Thanks for the extra code, that was something I did want to do, looks a bit untidy always opening the 1st image

I've put the code in but DW says there's a syntax error on this line......

$('a[rel^=enlargeimage]').click(function(e){e.preventDefault();});

Any ideas?

Best regards

James

[jscheuer1]

Either you have misinterpreted DW's comments, DW is wrong, or there's another error in the code that's for some reason showing up on that line.

I'm not all that familiar with DW, but I do recall that at least some versions were not all that good with debugging javascript. This syntax error may be DW mistaking this for poorly formed HTML. Or just an error on its part in interpreting the javascript.

If the former (mistaking it for HTML), making the script external will remove the error/warning, whatever it is.

Anyways, the code works. If you have a problem actually using it in a browser, let me know which one and give me a link to a page that shows the problem.


About your contact info, you can always add that to your profile. That's the best place for it anyway, at least the email address, because it cannot be harvested from there by spam-bots. Publishing your email address in a forum message though, that will get you lots of spam - guaranteed.

[visualchemistry]

Hi John

I've just done it again and it seems fine now, thanks. Just one question - how do I make it so one of the 8 images automatically displays when the page is opened, rather than having to mouseover to get the 1st enlarged image to appear - At the moment, I've placed one of the images as a background image - when you mouseover, the enlarged image is being displayed over the top of the background image

Cheers

James

[jscheuer1]

That's about as good a method as any if it looks the way you want it to. However, what I usually tell people is to hard code the image and/or text that you want in that division, the script will overwrite it once activated, ex:

<div id="loadarea" style="width: 600px">
<img src="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" alt=""><br>
The Universe is just waiting to be explored
</div>

In the above, I'm using the first image and title from the demo page Step2. But you don't have to use an image (it can be text only), or you can use a different image, one not available from the thumbnails, be as creative as you like.