CODEWITHSUNDEEP
javascriptjqueryhtmlcssslider
SF Developer
SF Developer

Reputation: 5384

Slider works on certain browsers, but not on others

I have this slider on www.Guguta.com that if you open it with IE or Firefox, it works well. If you open with Chrome or Safari ..the main pictured does NOT show.

Also the Mouse Click on the small images, should load that small picture into the main one, but again on Chrome and Safari does NOT work.

The JS Script that manages the slider is initiated at "scripts.cs"
Full source code can be downloaded from here: www.guguta.com/slider.zip

Any help/tip will be truly appreciated.

Thanks in advanced,
Developer

Upvotes: 0

Views: 209

Answers (1)

ryanc1256
ryanc1256

Reputation: 570

Ok I figured it out. this line was stuffing it up 

$('.slider-item a').find('img').each(function () {
        $(this).rotateRight(-2);    
    });

and I replaced it with 

$('.slider-item a').find('img').each(function () {
        degree = -2;
        $(this).css({
        '-webkit-transform': 'rotate(' + degree + 'deg)',
                        '-moz-transform': 'rotate(' + degree + 'deg)',
                        '-ms-transform': 'rotate(' + degree + 'deg)',
                        '-o-transform': 'rotate(' + degree + 'deg)',
                        'transform': 'rotate(' + degree + 'deg)',

        }); 
    });

note:: this will only work in modern browsers like, webkit based browsers, ie 9 and firefox (i think 3.5 and higher).

Edit:

Also I noted you have a older jquery rotate plugin if you update it download link http://code.google.com/p/jqueryrotate/downloads/detail?name=jQueryRotate.2.2.js

and then do this 

 $('.slider-item a').find('img').each(function () {
            $(this).rotate(-2); 
        });

also i recon 1.5 deg is better than 2deg (and yes you can do 1.5 i tried it looks a lot better)

it will fix this hope this helps

Ryan

Upvotes: 2

Related Questions