PDA

View Full Version : 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/dynamicindex4/simplegallery.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/dynamicindex4/simplegallery_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;


<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;


<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;

<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:



<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



<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:



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


or this



<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:



<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;

<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;

<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;

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

Toefoe
08-07-2010, 04:54 PM
Hi,

that's great! It is working :)

Thank you very much!

Regards
Thomas

Beverleyh
08-07-2010, 04:59 PM
No problem,

After all that effort, how about making it official by clicking the blue "Thanks" button?

Toefoe
08-07-2010, 05:46 PM
...with pleasure...