Hi all,
Just wondering if you can help, as I’m fairly new to JS - I’m using Highslide.js on a project and I’ve tweaked it a bit so that it not only expands a thumbnail image, but also swaps out the main “slider” image onclick (it’s not really a slider, it’s more of a hero image). It works beautifully in Firefox, but not in Chrome or Safari. Any suggestions? Here’s the fiddle: http://jsfiddle.net/F8Yfg/54/
Hi,
Welcome to the forums 
Your code behaves the same for me in Firefox, as it does in Chrome.
What are you expecting to happen when you click on one of the coloured rectangles beneath the larger yellow rectangle?
It’s supposed to expand the thumbnail to reveal a larger image (which it does), and swap out the main slider image (which it does not in Chrome and Safari).
For me, whenever I click on any of the smaller coloured squares, a green square pops out (with a link to the highslide website). The larger yellow image remains unchanged. This happens in Chrome and Firefox.
If you can make a working demo (the smaller image popping out), I’m happy to take a look.
The green square is supposed to pop out. The larger yellow image is supposed to swap to a red image when you click on the red thumbnail. This is the issue I’m having. I can email you a link to the project on a test server if you like - I’m not comfortable posting it here. It works fine on the test server.
Ah ok.
Well, what you need to do is get rid of all of that inline JS and CSS for a start.
Then you can attach event listeners to the respective elements and swap out the image src attribute accordingly.
Here’s a fiddle
And to be complete, the code:
<div class="header">
<img src="http://sigadtest.com/gallery/slider.jpg" id="slider" />
</div>
<div id="gallery">
<a href="http://sigadtest.com/gallery/larger.jpg" class="highslide">
<img src="http://sigadtest.com/gallery/thumb.jpg" />
</a>
<a href="http://sigadtest.com/gallery/larger1.jpg" class="highslide">
<img src="http://sigadtest.com/gallery/thumb1.jpg" />
</a>
<a href="http://sigadtest.com/gallery/larger2.jpg" class="highslide">
<img src="http://sigadtest.com/gallery/thumb2.jpg" />
</a>
<a href="http://sigadtest.com/gallery/larger3.jpg" class="highslide">
<img src="http://sigadtest.com/gallery/thumb3.jpg" />
</a>
<a href="http://sigadtest.com/gallery/larger4.jpg" class="highslide">
<img src="http://sigadtest.com/gallery/thumb4.jpg" />
</a>
<a href="http://sigadtest.com/gallery/larger5.jpg" class="highslide">
<img src="http://sigadtest.com/gallery/thumb5.jpg" />
</a>
</div>
hs.graphicsDir = 'http://sigadtest.com/highslide/graphics/';
var gallery = document.getElementById("gallery"),
links = gallery.getElementsByTagName("a"),
slider = document.getElementById("slider");
for (var i = 0; i < links.length; ++i) {
links[i].onclick = function(){
slider.src = this.querySelector('img').src;
slider.width = 866;
slider.height = 337;
return hs.expand(this);
};
}
a.highslide-full-expand {
background: url(http://sigadtest.com/highslide/graphics/fullexpand.gif) no-repeat;
display: block;
margin: 0 10px 10px 0;
width: 34px;
height: 34px;
}
HTH
Thank you so much!!! I’ll try that now and let you know how it works.
It’s not working now that I’ve changed the file names from the example names to the real names. I don’t think that’s the issue, though - I think it’s trying to find the expander image, and the path seems to be correct.
Here’s a link to the site on the test server - the thumbnail image is not expanding properly. http://bit.ly/1lnW4p2
Oh dear.
If you can post some real code, I can (probably) help you more.
Hmm. It works like a charm in the fiddle, but as soon as I changed the file names, it didn’t work. I think the issue is the expander file - the path to the expander file. I’ll try one more thing.
Wait! Now it’s working in the fiddle but the slider image is getting swapped with the “larger” image - that image is showing both in the expander and the slider area.
Sorry, you’ve lost me. I thought that was exactly what you wanted.
There are 3 images involved in this - a slider, a thumbnail, and the mid-sized image for the expander. When the thumbnail is clicked, it should expand to reveal the mid-sized image and swap out the slider image. In the fiddle, it appears that the thumbnail image is what’s replacing the slider and it’s being stretched to the size of the slider. Open this link in Firefox and you’ll see what should be happening: http://sigadtest.com/aurora/index-test.html
The image img.width and img.height declarations are what is stretching the thumbnail.
Remove them and the thumbnail will keep its original dimensions.
Taking the page you link to as an example, if you click on Vanessa Cruz, the thumbnail with her face on it expands to reveal a larger image of her that says “Read more”. I’m presuming this is correct.
The larger image in the background that says “Meet Desi Nesmith” stays the same. I’m guessing this is a problem.
What should happen to Desi when I click on Vanessa?
When you click on Vanessa, the thumbnail should expand to show the slide that says “Read More” and the slider image should swap to the one that says “Vanessa Cruz” with the text and arrow in the middle. Open the link I posted before (open in Firefox) and you’ll see what should happen - there are three images involved. The code I used originally works in FF, but the key is making it work in Chrome and Safari.
Here’s the link I posted before: http://sigadtest.com/aurora/index-test.html
Ok, got it.
I’ve spent a good while figuring this out, but your highslide script is mangling the DOM and doing all kinds of weird things behind the scenes.
This is the best I could come up with:
<!doctype html>
<head>
<base href="http://sigadtest.com/" />
<meta charset="utf-8">
<title>Home › Neag School › UCONN</title>
<link href="http://aurora.uconn.edu/wp-content/themes/hale/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="../aurora/themes/education/style.css" rel="stylesheet">
<style>
.neag-gallery{
text-align: center;
}
.neag-gallery img{
height: 175;
width: 120;
}
</style>
</head>
<body class="uc-">
<div class="education-content">
<div class="header">
<a href="http://www.education.uconn.edu">
<img src="../aurora/themes/education/img/gallery/slider.jpg" alt="Desi Nesmith" title="Desi Nesmith" id="slider" />
</a>
</div>
<div class="neag-gallery" id="gallery">
<a href="../aurora/themes/education/img/gallery/larger.jpg" class="highslide" id="slide1">
<img src="../aurora/themes/education/img/gallery/thumb.jpg" />
</a>
<a href="../aurora/themes/education/img/gallery/larger1.jpg" class="highslide" id="slide2">
<img src="../aurora/themes/education/img/gallery/thumb1.jpg" />
</a>
<a href="../aurora/themes/education/img/gallery/larger2.jpg" class="highslide" id="slide3">
<img src="../aurora/themes/education/img/gallery/thumb2.jpg" />
</a>
<a href="../aurora/themes/education/img/gallery/larger3.jpg" class="highslide" id="slide4">
<img src="../aurora/themes/education/img/gallery/thumb3.jpg" />
</a>
<a href="../aurora/themes/education/img/gallery/larger4.jpg" class="highslide" id="slide5">
<img src="../aurora/themes/education/img/gallery/thumb4.jpg" />
</a>
<a href="../aurora/themes/education/img/gallery/larger5.jpg" class="highslide" id="slide6">
<img src="../aurora/themes/education/img/gallery/thumb5.jpg" />
</a>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../aurora/themes/education/js/highslide.js"></script>
<script type="text/javascript">
hs.graphicsDir = 'http://sigadtest.com/highslide/graphics/';
var gallery = document.getElementById("gallery"),
links = gallery.getElementsByTagName("a"),
slider = document.getElementById("slider"),
eventsAttached = false,
imgPath = "../aurora/themes/education/img/gallery/",
imgSwapped = false;
slides = {
"slide1" : "slider.jpg",
"slide2" : "slider1.png",
"slide3" : "slider2.png",
"slide4" : "slider3.png",
"slide5" : "slider4.png",
"slide6" : "slider5.png"
};
for (var i = 0; i < links.length; i++) {
links[i].onclick = function(){
if(eventsAttached && !imgSwapped){
newSrc = imgPath + slides[this.id];
slider.src = newSrc;
imgSwapped = true;
}
setTimeout(function(){
imgSwapped = false;
}, 1000)
return hs.expand(this);
}
}
setTimeout(function(){
eventsAttached = true;
}, 500);
</script>
</body>
</html>
To be honest, this feels wrong and if I was you, I would use a different image slider that didn’t make me fight it (there are plenty out there).
Also, there is quite a lot wrong with the markup of the page you link to.
If you run it through the W3 validator (results), you get 42 Errors, 31 warning(s).
And you are doing some mad stuff such as including jQuery three times.
Here’s a demo of things working as expected.
HTH
Thanks so much for assisting with this - I left the jQuery includes in place because I didn’t know whether or not they’d be needed, but I can remove them if this is not using jQuery at all (this is still a work in progress - it has to be converted to a Wordpress template and unnecessary code removed). The only thing that Highslide is doing (I’m guessing) is expanding the thumbnail, so I wonder if I even need Highslide.
One other thing: a lot of the errors from the W3 validator are coming from Wordpress code that was left in because this will need to be converted to a Wordpress template and integrated into a custom WP theme. I can remove it or comment it out and run it through the validator again without the extra WP code.
Cool.
Was there a question in there?