Search jQuery

jQuery Forum

Jquery Cycle Customize image slide onmousehover

in Using jQuery Plugins • 11 years ago

Hello,

I am pretty new to jquery and so far I haven't had any problem with its plugins because everything it's been built perfectly and clear even for a dummy like me!
I would only like to know if there's any way to implement the code in order to have a little arrow appearing when hovering on the image active slide.

In my example the images of the slide are my pager:

<script type="text/javascript">
$(document).ready(function() {
    $('.project')
    .cycle({
    fx:     'scrollUp',
    speed: 1000,
    timeout: 0,
    next:   '.project',

});
    });
</script>

I'd like to have a little arrow coming in making more evident for the user the images need actually to be clicked to scrollup and go to other photos...

Hope someone can help me..I couldn't find anything similar.

Thank you in advance.

A

Replies(4)

charlietfl

Re: Jquery Cycle Customize image slide onmousehover

11 years ago

Assuming slides are images:

Set slideExpr option to 'img'

Add an extra div with your arrow image in slideshow. Position absolute, width and height 100% and and z-index higher than number of slides. Set your arrow image, or arrow image container within div to display:none

Assume id="arrow_holder", add it's selector to "next" option.

$('#arrow_holder').hover(function(){

$(this).find('img').toggle()// show/hide when mouse enter / leave

})

You could also use animate() for effect

For 2 arrows next & prev make each 50% width

afed09

Re: Re: Jquery Cycle Customize image slide onmousehover

11 years ago

Thank you very much!
This is exacly what I wanted!

I am having 2 problems though..maybe you can help me figure out.. how to avoid the arrow image from stretching when enlarging the window? I tried and set max-width to 1000px for example, but maybe there's another way to get something similar and still having the arrow centred into my div...

Another thing...Now I get the arrow when I hover on the slide images but when I click it doesn' scroll...I think I am missing something in my code maybe or it's just badly written..?

html, with .project beign the div containing my images/slides I want to be clickable...:

<div id="arrow_holder">
    <a id="arrow" href=""><img src="../arrowplus.png" alt="next" width="100%" height="100%"       display="none"> </a>
</div>

<script type="text/javascript">
$(document).ready(function() {
    $('.project')
    .cycle({
    fx:     'scrollUp',
    speed: 1000,
    timeout: 0,
    next:'#arrow',
});
    });
$('#arrow_holder').hover(function(){
    $(this).find('img').toggle()// show/hide when mouse enter / leave
})
});
</script>

Thank you very much again for your support!
A

charlietfl