Coding a slideshow (hide.show)

Ask the community
,
1

Hi!
I want to code a slideshow to show its contents only when the user rolls over names on a map.
The slideshow container was one of my choices for holding all of the images and description text. I wanted to have a box on the same page as the map.

So my question is, how do I code for the next slides in line.
This is my code for the first slide.

https://aeronoidwebdesign.wixsite.com/tartanthemes

//Container 1 is the transparent roll over area
export function container1_onMouseIn(event) {
//Add your code for this event here:
$w(“#slideshow2”).show();
}
//On click is for user interface is image is ready for download, keeping the container open
export function slideshow2_onClick(event) {
//Add your code for this event here:
$w(“#slideshow2”).show();
}
//when user is ready to leave image
export function slideshow2_onMouseOut(event) {
//Add your code for this event here:
$w(“#slideshow2”).hide();
}
So how do I code for the continuing hidden slides?
If you have another method, I am happy to listen.

1288×647 157 KB

2

Try to look at the slideshow API and there you can get the property slides to get all slides. Then you can manipulate the slides and the slideshow. Is this what you want?

3

Hi Michele,

If I understand what you’re trying to do correctly, I think you should do the following:

  • For each container “hotspot” onMouseIn event handler, use the slideshow changeSlide( ) function to move to the proper slide and use the show( ) function to show the slideshow.

  • You can use the onMouseOut event handler on the slideshow as you’ve done above to hide the slideshow when the user is done with it. However, I think this will be a strange behavior. You might want to try using the onMouseOut of all of the hotspots to do the hiding.

  • I don’t think you need the onClick of the slideshow to call the show() function as you’ve done above.

4

I attempted to use change slide and enter the slide # to be initiated. It did not work. I tried many different ways to get it to work, debugging my code as I went along. I can mouseOver and mouse out for Slide 1. I did remove the onClick because I found another way to direct the user to make their final selection, but I still have no understanding of changeSlide syntax to have it move to the appropriate slide upon mouseOver of a new designated area.
I finally asked my fiance for help and he wrote this…

Title #tartanImg { width: auto; height: 250px; z-index: 2; position: absolute; display: inline-block; top: -500px; left: -500px; } var areas = [ {coords: [493,79,518,96,469,166,445,150], img: 'Sinclair.gif', pos: 'SE'}, {coords: [126,123,165,141,174,175,144,200,105,193,97,157], img: 'MacLeod of Lewis.jpg', pos: 'SE'}, {coords: [423,134,458,169,444,184,409,148], img: 'Gunn.gif', pos: 'SE'}, {coords: [494,673,494,705,545,705,545,673], img: 'Scott_red.gif', pos: 'NW'}, {coords: [401,708,401,726,464,726,464,708], img: 'Douglas_black.gif', pos: 'NW'}, ]; 
	function showDetail() { 
		var id = event.target.id.split('_')[1]; 
		var area = areas[new Number(id)]; 
		var img = document.getElementById('tartanImg'); 
		img.src = 'http://www.michelona.com/TartanProject/' + area.img; 
		if (area.pos == "SE") { 
			img.style.left = "350px"; 
			img.style.top = "550px"; 
		} else { 
			img.style.left = "50px"; 
			img.style.top = "50px"; 
		} 
		
	} 
	function clearDetail(pos) { 
		var id = event.target.id.split('_')[1]; 
		var area = areas[new Number(id)]; 
		var img = document.getElementById('tartanImg'); 
		img.src = 'blank.png'; 
		img.style.left = "-500px"; 
		img.style.top = "-500px"; 
	} 

	document.addEventListener('DOMContentLoaded', function() { 
		var map = document.getElementById('cmp'); 
		for (var i = 0; i < areas.length; i++) { 
			var area = areas[i]; 
			var newArea = document.createElement('area'); 
			newArea.id = 'area_' + i; 
			newArea.shape = 'poly'; 
			newArea.coords = area.coords.join(); 
			newArea.href = "#";                    
			var pieces = area.img.split('.'); 
			var pieces2 = pieces[0].split('_'); 
			newArea.alt = pieces2[0]; 
			newArea.title = pieces2[0]; 
			newArea.onmouseover = showDetail; 
			newArea.onmouseout = clearDetail; 
			map.appendChild(newArea); 
		} 
	}); 
</script>
We decided upon making the map itself interactive and encase it in an iFrame. Now....the iframe won't work on the live site because it does not have an SSL. FML... All I wanted to do is use Wix Code ITSELF to mouseOver each Name and execute a image with text in a container, then disappear with mouseOut, waiting for the next Hover to pop a new image. It sounded simple. I saw the whole process in my mind. Now its much harder, than I anticipated. I won't give up though. My question, what harm is an iframe in a sandbox, on an SSL Website going to harm?

1288×647 157 KB