Conflict using gallery slidershow and Thumbnail viewer
Hi i'm new to DD and am currently having a problem using the thumbnail view (http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm) in another JS gallery program image slidershow (http://www.dhtmlgoodies.com/index.ht...mage_slideshow).
I add the Thumbnail view into the caption section of the gallery so it gives the option of viewing the images full size but instead of loading in the popup it opens in the same window.
I found looking around that my problem maybe a conflict of JS. So i tried the solution for a similar thing with lightbox, by adding a onload event to the body with initthumbnail, yet this didn't work and stopped the gallery script from working.
The following is the code being used on my index page and the two JS files for the gallery and thumbnail.
Index:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Jagger Bramley - Home</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/image-slideshow.js">
/***********************************************************************************************
Copyright (c) 2005 - Alf Magne Kalleland post@dhtmlgoodies.com
UPDATE LOG:
March, 10th, 2006 : Added support for a message while large image is loading
Get this and other scripts at www.dhtmlgoodies.com
You can use this script freely as long as this copyright message is kept intact.
***********************************************************************************************/
</script>
<script src="js/thumbnailviewer.js" type="text/javascript">
/***********************************************
* Image Thumbnail Viewer Script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
</head>
<body>
<img src="header.jpg" alt="Jagger Bramley logo" width="473" height="149" />
<hr />
<jbmenu>Home About Albums Contact</jbmenu>
<br/><br/>
<div id="dhtmlgoodies_slideshow">
<div id="previewPane">
<img src="images/image1_big.jpg">
<span id="waitMessage">Loading image. Please wait</span>
<div id="largeImageCaption">This is the caption of image number 1</div>
</div>
<div id="galleryContainer">
<div id="arrow_left"><img src="images/arrow_left.gif"></div>
<div id="arrow_right"><img src="images/arrow_right.gif"></div>
<div id="theImages">
<!-- Thumbnails -->
<a href="#" onclick="showPreview('images/image1_big.jpg','1');return false"><img src="images/image1.jpg"></a>
<a href="#" onclick="showPreview('images/image2_big.jpg','2');return false"><img src="images/image2.jpg"></a>
<a href="#" onclick="showPreview('images/image3_big.jpg','3');return false"><img src="images/image3.jpg"></a>
<a href="#" onclick="showPreview('images/image4_big.jpg','4');return false"><img src="images/image4.jpg"></a>
<a href="#" onclick="showPreview('images/image5_big.jpg','5');return false"><img src="images/image5.jpg"></a>
<a href="#" onclick="showPreview('images/image6_big.jpg','6');return false"><img src="images/image6.jpg"></a>
<a href="#" onclick="showPreview('images/image7_big.jpg','7');return false"><img src="images/image7.jpg"></a>
<a href="#" onclick="showPreview('images/image8_big.jpg','8');return false"><img src="images/image8.jpg"></a>
<a href="#" onclick="showPreview('images/pano2_1_norm.jpg','9');return false"><img src="images/pano2_1_small.jpg"></a>
<!-- End thumbnails -->
<!-- Image captions -->
<div class="imageCaption">This is the caption of image number 1</div>
<div class="imageCaption">This is the caption of image number 2</div>
<div class="imageCaption">This is the caption of image number 3</div>
<div class="imageCaption">This is the caption of image number 4</div>
<div class="imageCaption">This is the caption of image number 5</div>
<div class="imageCaption">This is the caption of image number 6</div>
<div class="imageCaption">This is the caption of image number 7</div>
<div class="imageCaption">This is the caption of image number 8</div>
<div class="imageCaption"><script src="js/thumbnailviewer.js" type="text/javascript"></script><a href="images/pano2_1.jpg"" rel="thumbnail">View full size image</a></div>
<!-- End image captions -->
<div id="slideEnd"></div>
</div>
</div>
</div>
</body>
</html>
Gallery:
/***********************************************************************************************
Copyright (c) 2005 - Alf Magne Kalleland post@dhtmlgoodies.com
UPDATE LOG:
March, 10th, 2006 : Added support for a message while large image is loading
Get this and other scripts at www.dhtmlgoodies.com
You can use this script freely as long as this copyright message is kept intact.
***********************************************************************************************/
var displayWaitMessage=true; // Display a please wait message while images are loading?
var activeImage = false;
var imageGalleryLeftPos = false;
var imageGalleryWidth = false;
var imageGalleryObj = false;
var maxGalleryXPos = false;
var slideSpeed = 0;
var imageGalleryCaptions = new Array();
function startSlide(e)
{
if(document.all)e = event;
var id = this.id;
this.getElementsByTagName('IMG')[0].src = 'images/' + this.id + '_over.gif';
if(this.id=='arrow_right'){
slideSpeedMultiply = Math.floor((e.clientX - this.offsetLeft) / 5);
slideSpeed = -1*slideSpeedMultiply;
slideSpeed = Math.max(-10,slideSpeed);
}else{
slideSpeedMultiply = 10 - Math.floor((e.clientX - this.offsetLeft) / 5);
slideSpeed = 1*slideSpeedMultiply;
slideSpeed = Math.min(10,slideSpeed);
if(slideSpeed<0)slideSpeed=10;
}
}
function releaseSlide()
{
var id = this.id;
this.getElementsByTagName('IMG')[0].src = 'images/' + this.id + '.gif';
slideSpeed=0;
}
function gallerySlide()
{
if(slideSpeed!=0){
var leftPos = imageGalleryObj.offsetLeft;
leftPos = leftPos/1 + slideSpeed;
if(leftPos>maxGalleryXPos){
leftPos = maxGalleryXPos;
slideSpeed = 0;
}
if(leftPos<minGalleryXPos){
leftPos = minGalleryXPos;
slideSpeed=0;
}
imageGalleryObj.style.left = leftPos + 'px';
}
setTimeout('gallerySlide()',20);
}
function showImage()
{
if(activeImage){
activeImage.style.filter = 'alpha(opacity=50)';
activeImage.style.opacity = 0.5;
}
this.style.filter = 'alpha(opacity=100)';
this.style.opacity = 1;
activeImage = this;
}
function initSlideShow()
{
document.getElementById('arrow_left').onmousemove = startSlide;
document.getElementById('arrow_left').onmouseout = releaseSlide;
document.getElementById('arrow_right').onmousemove = startSlide;
document.getElementById('arrow_right').onmouseout = releaseSlide;
imageGalleryObj = document.getElementById('theImages');
imageGalleryLeftPos = imageGalleryObj.offsetLeft;
imageGalleryWidth = document.getElementById('galleryContainer').offsetWidth - 80;
maxGalleryXPos = imageGalleryObj.offsetLeft;
minGalleryXPos = imageGalleryWidth - document.getElementById('slideEnd').offsetLeft;
var slideshowImages = imageGalleryObj.getElementsByTagName('IMG');
for(var no=0;no<slideshowImages.length;no++){
slideshowImages[no].onmouseover = showImage;
}
var divs = imageGalleryObj.getElementsByTagName('DIV');
for(var no=0;no<divs.length;no++){
if(divs[no].className=='imageCaption')imageGalleryCaptions[imageGalleryCaptions.length] = divs[no].innerHTML;
}
gallerySlide();
}
function showPreview(imagePath,imageIndex){
var subImages = document.getElementById('previewPane').getElementsByTagName('IMG');
if(subImages.length==0){
var img = document.createElement('IMG');
document.getElementById('previewPane').appendChild(img);
}else img = subImages[0];
if(displayWaitMessage){
document.getElementById('waitMessage').style.display='inline';
}
document.getElementById('largeImageCaption').style.display='none';
img.onload = function() { hideWaitMessageAndShowCaption(imageIndex-1); };
img.src = imagePath;
}
function hideWaitMessageAndShowCaption(imageIndex)
{
document.getElementById('waitMessage').style.display='none';
document.getElementById('largeImageCaption').innerHTML = imageGalleryCaptions[imageIndex];
document.getElementById('largeImageCaption').style.display='block';
}
window.onload = initSlideShow;
Thumbnail code in next post.
CSS Codes
Reply With Quote
rogid
XImageTransform.Microsoft.alpha(opacity=10); -moz-opacity: 0.1; opacity: 0.1',
Bookmarks