Start & Stop Slideshow with MouseOver

[xmedi...@googlemail.com]

Hey all,
is it possible, to start and stop the slideshow by onmouseover?

heres my code, but it doesn't work:

function SlideMini(running) {
if(running == false) {
var data = ["1.jpg", "2.jpg", "3.jpg"];
var myShow = new Slideshow('show', data, { random:true, height:
183, hu: 'images/', width: 209 });
} else {
myShow.destroy(p);
}
}

<img src="images/img1.jpg" onmouseover="SlideMini(false)"
onmouseout="SlideMini(true)" />


Any ideas?

[Aeron Glemann]

myShow = new Slideshow(...);

myShow.slideshow.retrieve('images').add('events', {
'mouseenter': function(){ this.pause(1); }.bind(myShow),
'mouseleave': function() { this.pause(0); }.bind(myShow)
});

[Ben]

Thanks for posting the solution Aeron.

I tried this today and Firebug reported
"myShow.slideshow.retrieve('images').add" was not a function. Maybe it
is due to an update with Mootools.

This variant worked for me:

myShow.slideshow.retrieve('images').addEvents({

'mouseenter': function(){ this.pause(1); }.bind(myShow),
'mouseleave': function() { this.pause(0); }.bind(myShow)
});

On Jul 1, 3:04 pm, "Aeron Glemann" <aeron.glem...@gmail.com> wrote:
> myShow = new Slideshow(...);
>
> myShow.slideshow.retrieve('images').add('events', {
>   'mouseenter': function(){ this.pause(1); }.bind(myShow),
>   'mouseleave': function() { this.pause(0); }.bind(myShow)
>
> });
>

> On Tue, Jul 1, 2008 at 7:45 AM, xmedia2...@googlemail.com

[jefbak]

I could not get this to work in our implementation. Am I missing a brace or formatting this incorrectly?

<script type="text/javascript">       
    //<![CDATA[
      window.addEvent('domready', function(){
        var data = {
                 'slide-1.jpg': { caption: '', href: 'about.php' },   
                'slide-2.jpg': { caption: '', href: 'about.php' },
                 'slide-3.jpg': { caption: '', href: 'about.php' }
              
    };
        var myShow = new Slideshow('show', data, {controller: false, delay: 5000, duration: 2000, height: 330, hu: 'images/', thumbnails: false, captions: false, width: 600});
   
myShow.slideshow.retrieve('images').addEvents({

  'mouseenter': function(){ this.pause(1); }.bind(myShow),
  'mouseleave': function() { this.pause(0); }.bind(myShow)

});

    //]]>
    </script>

[Aeron Glemann]

Yeah... looks like you're missing the closing part of the "window.addEvent('domready', function(){"

--

You received this message because you are subscribed to the Google Groups "Mootools Slideshow" group.
To post to this group, send email to mootools-...@googlegroups.com.
To unsubscribe from this group, send email to mootools-slides...@googlegroups.com.

For more options, visit this group at http://groups.google.com/group/mootools-slideshow?hl=en.

[jefbak]

Thanks for the reply Aeron.
Sorry for not understanding your answer completely. If I remove the
mouse enter/leave code it works:
http://www.smith.edu/bigbad/cwl-test/index-testcopy.php

But with the additional code to pause it breaks and still can't figure
out where I am not closing it correctly:
http://www.smith.edu/bigbad/cwl-test/index-test.php

This will is really great for our college site and we love the look of
your script on our homepage: http://www.smith.edu/

> > mootools-slides...@googlegroups.com<mootools-slideshow%2Bunsu...@googlegroups.com>
> > .

[jefbak]

Thanks for the reply Aeron.
Sorry for not understanding your answer completely. If I remove the
mouse enter/leave code it works:
http://www.smith.edu/bigbad/cwl-test/index-testcopy.php

But with the additional code to pause it breaks and still can't figure
out where I am not closing it correctly:
http://www.smith.edu/bigbad/cwl-test/index-test.php

This will is really great for our college site and we love the look of
your script on our homepage: http://www.smith.edu/



On Dec 13, 5:36 pm, Aeron Glemann <aeron.glem...@gmail.com> wrote:

> > mootools-slides...@googlegroups.com<mootools-slideshow%2Bunsu...@googlegroups.com>
> > .

[Aeron Glemann]

You're missing the part right before the closing </script>:

http://pastebin.com/CDpqTwqb

To unsubscribe from this group, send email to mootools-slides...@googlegroups.com.

[jefbak]

Thanks, that was it.

> > <mootools-slideshow%2Bunsu...@googlegroups.com<mootools-slideshow%252Buns...@googlegroups.com>

[ph...@lapsaky.com]

I feel like an idiot, but I am still not able to make this work.

I have grabbed the latest source for slideshow2 from github, and copied it to a test location on my site.
 at www.lapsaky.com/aglemann-slideshow-c336f59/

The original example file in that directory is mootools.html

I copied the example to mootools-pause.html and tried to make the minimal modifications to it following
this post to include the mouseover pause, but obviously something is wrong. The error console indicates that
myShow.slideshow is undefined.

Could someone please look at my modifications and tell me what I have done wrong? Thanks!!

Here is the diff
Sat@9:59[180]:diff mootools.html mootools-pause.html
22c22,27
<             window.show = new Slideshow('overlap', data, { captions: { delay: 1000 }, delay: 3000, height: 300, hu: 'images/', width: 400 });
---
>             myShow = new Slideshow('overlap', data, { captions: { delay: 1000 }, delay: 3000, height: 300, hu: 'images/', width: 400 });

>             myShow.slideshow.retrieve('images').addEvents({
>               'mouseenter': function(){ this.pause(1); }.bind(myShow),
>                 'mouseleave': function() { this.pause(0); }.bind(myShow)
>                 });
>

Sat@DING![181]:


Phil

[ph...@lapsaky.com]

In the interests of completely documenting this I will note that there
is a hint of a solution in the following post, which I just found...

http://groups.google.com/group/mootools-slideshow/browse_thread/thread/efae02a41d7b7216/d628bc2b21c7a19d?hl=en&lnk=gst&q=new+download#d628bc2b21c7a19d

Emmanuel indicates that "slideshow" should be replaced with "el". I
have tried it with variant "mootools-pause2.html" on my test webpage,
and it also works for me.

Phil