Bug: easySlider plugin does not work well with Chrome browser

dbs · May 10, 2011, 07:11:56 AM

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.

Tonivix · May 10, 2011, 02:54:30 AM

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 · October 18, 2010, 12:45:53 PM

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.

Boudi · October 18, 2010, 12:04:41 PM

Quotein 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

[gelöscht durch Administrator]

dbs · October 18, 2010, 10:04:00 AM

try this:
create a new preset in jqueryadmin

or

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

Boudi · October 18, 2010, 09:38:42 AM

@ 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 · October 17, 2010, 10:40:55 AM

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

Spira · October 17, 2010, 10:24:39 AM

@Boudi The original code is:

Code Select

<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 Select

<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!!!

Boudi · October 16, 2010, 08:38:45 PM

@ 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.

dbs · October 16, 2010, 01:18:05 PM

ok, problems after reload in chrome

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

maverik · October 16, 2010, 01:11:15 PM

You are loading jquery twice

Code Select

<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

Boudi · October 16, 2010, 12:55:51 PM

@ 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.

[gelöscht durch Administrator]

dbs · October 16, 2010, 12:34:30 PM

no problems to see in chrome 6.0.472.63

dbs · October 16, 2010, 12:32:41 PM

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

maverik · October 16, 2010, 12:24:58 PM

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

Code Select

<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 Select

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

Boudi · October 16, 2010, 11:59:13 AM

The slider is placed via a code

Code Select

[[jQueryLoader?preset=easySlider]]

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

maverik · October 16, 2010, 11:27:02 AM

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

Spira · October 16, 2010, 11:23:46 AM

where you put the slider!!

Boudi · October 16, 2010, 11:10:54 AM

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 · October 15, 2010, 06:01:39 PM

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

Spira · October 10, 2010, 10:19:25 PM

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.

mr-fan · October 01, 2010, 01:33:47 PM

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 Select

<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....

eelke · October 01, 2010, 01:25:27 PM

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

Boudi · June 16, 2010, 02:05:44 PM

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.

News:

Bug: easySlider plugin does not work well with Chrome browser

mr-fan