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/

Pullo
—
2014-02-25T19:25:02Z —
#2

Hi,

Welcome to the forums

coffee_hound said:

It works beautifully in Firefox, but not in Chrome or Safari. Any suggestions?

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?

coffee_hound
—
2014-02-27T14:29:17Z —
#3

Pullo said:

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).

Pullo
—
2014-02-27T14:33:00Z —
#4

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.

coffee_hound
—
2014-02-27T17:39:24Z —
#5

Pullo said:

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.

Pullo
—
2014-02-27T18:59:45Z —
#6

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.

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

Pullo
—
2014-02-27T20:34:26Z —
#9

Oh dear.

If you can post some real code, I can (probably) help you more.

coffee_hound
—
2014-02-27T20:59:25Z —
#10

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.

Pullo
—
2014-02-28T06:55:42Z —
#13

Sorry, you've lost me. I thought that was exactly what you wanted.

coffee_hound
—
2014-02-28T14:38:02Z —
#14

Pullo said:

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

Pullo
—
2014-02-28T15:36:31Z —
#15

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?

coffee_hound
—
2014-02-28T22:08:15Z —
#16

Pullo said:

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.

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.

coffee_hound
—
2014-03-02T18:58:00Z —
#19

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.