Simple Controls Gallery / navi-images outside

**Toefoe** · 08-05-2010, 11:47 AM

1) Script Title: Simple Controls Gallery v1.3

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...plegallery.htm

3) Describe problem:

Hi,

I have my text areas outside of the slides, like in the example in "var vacationtext" http://www.dynamicdrive.com/dynamici...suppliment.htm

Is there a way to put also the navigation-images outside of the slides? I would like to have the pause.gif and play.gif (changing) at one div near the "vacationtext" ...

Thanks a lot!
Regards
Thomas

**Beverleyh** · 08-05-2010, 12:00 PM

The answer is already on the script page;

Code:

<div id="simplegallery"></div>
<ul>
<li><a href="javascript:mygallery.navigate('next')">Next Slide</a></li>
<li><a href="javascript:mygallery.navigate('prev')">Previous Slide</a></li>
<li><a href="javascript:mygallery.navigate(0)">Go to 1st Slide</a></li>
<li><a href="javascript:mygallery.navigate('playpause')">Play/ Pause Gallery</a></li>
</ul>

The example in the demo uses text as list items but you can just as easily assign the javascript controls to your own images enclosed in divs. You can use what's already provided to build your own set of controls.

**Toefoe** · 08-05-2010, 02:20 PM

Oh, I have these text-links still working...

With images: Does it change (i.e.) to play.gif, when the slideshow is paused and vice versa?

**Toefoe** · 08-06-2010, 10:17 AM

Has nobody any idea how to make the images (play.gif and pause.gif) change? Outside the slides - like the normal way in the navpanel?

**Beverleyh** · 08-06-2010, 12:22 PM

I imagine you'd have to do that with additional javascript.

Try this in your <head> section;

Code:

<script type="text/javascript">
$(document).ready(function() {
	$(".play").toggle(
  		function() 
		{
    		$(this).addClass("pause");
  		},
  		function() 
		{
    		$(this).removeClass("pause");
  		}
	);
});
</script>

<style type="text/css">
.play {
width: 30px;
height: 25px;
background: url("images/play.jpg") 0 0 no-repeat; 
}
.pause {
background:url("images/pause.jpg") 0 0 no-repeat; 
}
</style>

And then this in your <body> section;

Code:

<div class="play"></div>

The javascript is using jQuery: http://jquery.com/ which is already included on your page from the DD slideshow script.

See how the javascript code above is a function thats toggles the ".play" div and adds and then removes the extra "pause" class on every click?

Its the CSS which then displays the appropriate images based on what class is attached to the div - you need to substitute in your own play/pause images to see it working though.

Hope that sorts you out.

**Toefoe** · 08-07-2010, 09:31 AM

Hi ,

thank you! But there is a little problem. The JS makes this change in class:

class="play"

to

class="play pause"

and

class="play"

So I did this:

Code:

<script type="text/javascript">
$(document).ready(function() {
	$(".play").toggle(
  		function() 
		{
    		$(this).removeClass("play");
		$(this).addClass("pause");
  		},
  		function() 
		{
    		$(this).removeClass("pause");
		$(this).addClass("play");
  		}
	);
});
</script>

and CSS

Code:

<style type="text/css">
.play {
width: 30px;
height: 25px;
background: url("Dias/pause.gif") 0 0 no-repeat; 
}
.pause {
background:url("Dias/play.gif") 0 0 no-repeat; 
}
</style>

Now it changes the way it should. But the JS-Link doesn't work anymore. I can do this:

Code:

<div class="play"><a href="javascript:mygallery.navigate('playpause')">test</a></div>

or this

Code:

<a href="javascript:mygallery.navigate('playpause')"><div class="play">test</div></a>

May be the script above should be changed from class to id (getElementById)?

**Toefoe** · 08-07-2010, 10:53 AM

This one changes the ID with success - but the same problem:

Code:

<script type="text/javascript">
$(document).ready(function() {
	$("#play").toggle(
  		function() 
		{
    		document.getElementById('play').id = "pause";
  		},
  		function() 
		{
    		document.getElementById('pause').id = "play";
  		}
	);
});
</script>

**Beverleyh** · 08-07-2010, 01:25 PM

Did the slideshow control link work with my original suggestion?

The fact that the jQuery toggle function is adding the additional class of "pause" but also leaving play (to get class="play pause") is fine because .pause is after .play in the stylesheet so the .pause background image overrides the .play one. There is no need to remove the "play" class as the CSS performs the image switch.

**Toefoe** · 08-07-2010, 02:07 PM

No the link doesn't work - but the images are changing. Either ... or in all combinations.

**Beverleyh** · 08-07-2010, 04:41 PM

hhhhmmm, the controls dont like the jQuery toggle do they.

Let's cheat then and do something sneaky - were going to fake a toggle. Change the javascript to this;

Code:

<script type="text/javascript">
$(document).ready(function() {
	$('.play').click(
      		function () {
			$('.pause').css({'display':'block'});
			$('.play').css({'display':'none'});
      		}
    	);  
	$('.pause').click(
      		function () {
			$('.play').css({'display':'block'});
			$('.pause').css({'display':'none'});
      		}
    	); 
}); 
</script>

and change the CSS to this;

Code:

<style type="text/css">
.play {
width: 30px;
height: 25px;
background: url("images/play.jpg") 0 0 no-repeat; 
}
.pause {
display:none;
width: 30px;
height: 25px;
background:url("images/pause.jpg") 0 0 no-repeat; 
}
</style>

and in your HTML, now add another div with the class "pause" (this is initially hidden by the CSS) - you'll have 2 divs sat side by side;

Code:

<a href="javascript:mygallery.navigate('playpause')"><div class="play"></div><div class="pause"></div></a>

The javascript just switches the CSS display values so the visibility of play and pause will now alternate.

Thread: Simple Controls Gallery / navi-images outside

Thread Tools

Search Thread

Simple Controls Gallery / navi-images outside

Bookmarks

Bookmarks

Posting Permissions