Bug: easySlider plugin does not work well with Chrome browser

[Boudi]

Hi there,

I noticed that the easySlider plugin does not work correctly with Chrome. With IE, FF and safari it works okay.

It only shows a small piece of each image.

As far as I can tell it seems a cache problem?

Check url here.

UPDATE: On another website it does NOT work either.

Please any help would be HIGHLY appreciated.

[eelke]

I have the same problem. Is there a solution to this problem?

[mr-fan]

there is a new version of easyslider maybe this does the trick...

BUT this is not installable via jQueryAdmin

but everyone could simple replace the important files to load the newer 1.7 version instead of the 1.5!

http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

- download it
- overwrite the needed files images/css/js (not the html demo from the download)
- correct the path to the new filenames in the default.preset to setup it right for JQA

Code:

<script type="text/javascript" src="{WB_URL}/modules/jqueryadmin/jquery-ui/external/jquery.metadata.js"></script>
<link rel="stylesheet" type="text/css" href="{WB_URL}/modules/jqueryadmin/plugins/easySlider/easySlider.css" media="screen" />
<script type="text/javascript" src="{WB_URL}/modules/jqueryadmin/plugins/easySlider/easySlider1.5.js"></script>

<!-- easySlider -->
<script type=text/javascript>
$(document).ready(function(){
$("#slider").easySlider();
});
</script>

regards martin

and for sure - contribute the corrected Plugin to the Community and the jQueryAdmin Project....

[Spira]

Well i have the same problem. In IE(9 beta), mozilla works but in chrome sometimes only a small piesh of image is displayed. I have tried to fix it but no luck. 1.7 is still the problem. I use it inside a html file.

[Spira]

Ok i found the solution for this problem. Just place the css style of easyslider before the javascript of easyslider and the problem disappears!!!

[Boudi]

Before I check the solution of Martin I want to check the solution of Spira.

But where do I have to make these changes?

Boudi

[Spira]

where you put the slider!!

[maverik]

Basically CSS scripts are always to load before JS scripts. Whether by JQA, manually or by jquery_frontend.js.

[Boudi]

The slider is placed via a code

Code:

[[jQueryLoader?preset=easySlider]]

. This code calls the preset of the Easy slider. In there I changed the order like you said. No changes

[maverik]

I dont know something about JQA but in your sourcecode i see

Code:

<script src="http://www.abobroodsnijmachines.nl/modules/jqueryadmin/jquery-1.4.2/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="http://www.abobroodsnijmachines.nl/modules/droplets/js/mdcr.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.abobroodsnijmachines.nl/modules/jqueryadmin/jquery-ui-1.8/external/jquery.metadata.js"></script>
<script type="text/javascript" src="http://www.abobroodsnijmachines.nl/modules/jqueryadmin/plugins/easySlider/easySlider1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){   
    $("#slider").easySlider();
});
</script>
<link rel="stylesheet" type="text/css" href="http://www.abobroodsnijmachines.nl/templates/intro/template.css" media="screen,projection" />
<link rel="stylesheet" type="text/css" href="http://www.abobroodsnijmachines.nl/templates/intro/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="http://www.abobroodsnijmachines.nl/modules/jqueryadmin/jquery-ui-1.8/themes/base/jquery-ui.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://www.abobroodsnijmachines.nl/modules/jqueryadmin/plugins/easySlider/easySlider.css" media="screen" /></head>

and that is the wrong way, as i said

1) css
2) js

Without JQA your call is:

Code:

<?php 
   
    if (function_exists('register_frontend_modfiles')) {
        register_frontend_modfiles('css');
        register_frontend_modfiles('jquery');
        register_frontend_modfiles('js');
    } ?>

[dbs]

@boudi: as it seems you use a older version of jqa...

[dbs]

no problems to see in chrome 6.0.472.63

[Boudi]

@ dbs Upgraded jqa thnx. The error only happens after the first visit. After revisiting the mainpage the slider works okay. (seems cache thing)

I reorganized the order in the template. The css is now before the js. Still the same thing.

[maverik]

You are loading jquery twice

Code:

<head>    <script src="http://www.abobroodsnijmachines.nl/modules/jqueryadmin/jquery-core/jquery-core.min.js" type="text/javascript"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="design" content="Reclamebureau RAM ">
    <meta name="creator" content="YZE WebDesign">
     <meta name="publisher" content="YZE WebDesign" />
    <meta name="copyright" content="Reclamebureau RAM  / YZE WebDesign" />
    <meta name="description" content="De grootste broodsnijmachine leverancier van Nederland. Al ruim 55 jaar een begrip!" />

    <meta name="keywords" content="abo,broodsnijmachines,breadslicer,broodsnijden,brood,bread,snijmachines,breadslicers,slicers,leek,groningen" />   
    <link rel="stylesheet" type="text/css" href="http://www.abobroodsnijmachines.nl/templates/intro/template.css" media="screen,projection" />
    <link rel="stylesheet" type="text/css" href="http://www.abobroodsnijmachines.nl/templates/intro/print.css" media="print" />
        <script src="http://www.abobroodsnijmachines.nl/modules/droplets/js/mdcr.js" type="text/javascript"></script>
    <title>ABO Brood Snijmachines - Voorsprong door innovatie.</title>
    <script src="http://www.abobroodsnijmachines.nl/modules/jqueryadmin/jquery-1.4.2/jquery-1.4.2.min.js" type="text/javascript"></script>

##################
EDIT
##################
chrome 8.0.552.0 works fine
ie9 works fine
opera 10.63 works fine

[dbs]

ok, problems after reload in chrome

maybe: you should make a copy of plugins- and presets-folder and than uninstall jqueryadmin and reinstall.

[Boudi]

@ Martin:
Easyslider download does not work: http://jquery.websitebakers.com/plugins/slider/easyslider.php?lang=DE

@ Maverik:
Indeed. Very strange. I did nothing with the template code itself. I even uninstalled and reinstalled the jqueryadmin and easyslider plugin (like dbs adviced)

Still the same issue in Chrome for me.

[Spira]

@Boudi The original code is:

Code:

<head>
    <title>Easy Slider jQuery Plugin Demo</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />   
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/easySlider1.7.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){   
            $("#slider").easySlider({
                auto: true,
                continuous: true
            });
        });   
    </script>
   
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
   
</head>

I changed it to:

Code:

<head>
    <title>Easy Slider jQuery Plugin Demo</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
   
<link href="css/screen.css" rel="stylesheet" type="text/css" media="screen" />
   
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/easySlider1.7.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){   
            $("#slider").easySlider({
                auto: true,
                continuous: true
            });
        });   
    </script>
</head>

and no problem at all!!!

[dbs]

he should download the latest plugin-version (1.7).
continuous: true is an nice new feature.

[Boudi]

@ Spira
Which file do you refer? Within the index.php file of the template this is not possible/working.

@dbs
I upgraded to the latest version but no difference. Does I have to make extra custom changes?

Boudi

[dbs]

try this:
create a new preset in jqueryadmin

or

in the slider-plugin-folder > default.preset: load first css then js

[Boudi]

in the slider-plugin-folder > default.preset: load first css than js

This option I already tried a few days ago; didn't work for me.

Created a new preset but this destroys it all. So downgraded it again.

The tip from Spira: What I did was in the jqueryadmin I clicked the settings of the easyslider preset (see att.)
In there I changed the order of the js-css. No luck either.

So I give up and I will advise Chrome users (are there any btw?) to return to the almighty Firefox.

Thank you all for taking the time to help me out!

Boudi

[dbs]

sorry, no problems at amasp showroom and at own test with easyslider1.7 in chrome.
it's maybe only a little missconfiguration on your site.

[Tonivix]

Dear Boldi,

I had my problem with Chrome solved by changing the selectors from css classes from .Classname to #Classname.

I was changed the default css to "." (class selector) instead of "#" (id selector) intending to reuse the same style for other sliders, but finally I realised that was the problem.

Hope this can help you either.

[dbs]

boudi, your div id="slider" has width and height = 0 in chrome.

it's maybe a problem with your table-design.

try it without table.