CODEWITHSUNDEEP
javascriptjquery
Latha reddy
Latha reddy

Reputation: 1

how to add a active class in jquery diagonal image slider

Diagonal-Slider

I have worked on this plugin but the problem is when I load the on focus the images are in normal state. My problem is how to put a active image by default when loading and hovering.

Upvotes: 0

Views: 172

Answers (1)

R.K.Saini
R.K.Saini

Reputation: 2708

You just need to fire a mouseover event programmatically to select a active image on page load. I use nth chield selecter to fire event on 2 slide you can use 1,3 or anything you want

$(document).ready(function(){
    $('.gallery_content').createDiagonalSlider();


   setTimeout(function(){
   $('.gallery_content .gallery_item:nth-child(2)').mouseover();
   },10);

   });

Here is working fiddle http://jsfiddle.net/1tu061u9/

For the functionality that you desired

make image active until next image is not hovered

You need to replace this code inside DiagonalSlider.js at line no 45.

slider.find('.gallery_item').hover(function(){
        var item = $(this);

            if (timeout){
                clearTimeout(timeout);    
            }

            timeout = setTimeout(function(){
                zoomIn(item, function(){ }); 
            }, 10);

    }, function(){

    });

Here is new working fiddle. http://jsfiddle.net/ytzg32w6/2/

Upvotes: 1

Related Questions