I recently finished a clients website in Drupal. The client wanted a image slideshow in the banner area of the site so I developed one using JQuery.
Originally I used a random script from the Internet then noticed once the site was on a live server the images would display as a list down the page while the site was loading. Once loaded the images would scroll up and into the containing div and behave as expected.
This made me wonder if the cause was either Drupal, the order of .js files in the header of my page.tpl.php page or maybe I needed to have a definite height on all the div's involved. Neither were true, even after I spent time troubleshooting them.
After switching to the EasySlider JQuery script I still had the same problem with the images displaying as a list. After scouring the authors website I found one comment from a reader that solved my problem. So, thank you to Peter, whoever you are. You saved me more hours of frustration and possible hair pulling.
Here's what I did:
1. In my HTML the unordered list is contained in a div with the ID of Slider. In the CSS I added the property of visibility: hidden to this div. This hides the div from site while the page is loading, and after that for that matter. You may be asking, how the heck do I get the div to be visible again? That's where the fun starts.
2. In your .js file add this code to the end of the document ready function just before you start the image slideshow through the script.
This then tells the div with the ID of Slider to become visible once the page has fully loaded which prevents the images from displaying as a list.
Here is where I added the code above to the Easyslider1.7.js script.
This dilemma, (images displaying as a list), occurs because a live server is slower than what your localhost would be. If you were originally developing your site locally then moving it to the web then you'll most likely have this problem. At least this is what happened to me.
I hope having this solution all on one easy to follow post helps someone as I had to dig around the net for it. Please keep in mind that your code will differ depending on what image slideshow you use so you will have to play around with the code and place it in the right spot for your particular .js file, but at least you will be on the right track. Plus it may prevent some hair pulling, which is always a good thing.
Happy coding!
Originally I used a random script from the Internet then noticed once the site was on a live server the images would display as a list down the page while the site was loading. Once loaded the images would scroll up and into the containing div and behave as expected.
This made me wonder if the cause was either Drupal, the order of .js files in the header of my page.tpl.php page or maybe I needed to have a definite height on all the div's involved. Neither were true, even after I spent time troubleshooting them.
After switching to the EasySlider JQuery script I still had the same problem with the images displaying as a list. After scouring the authors website I found one comment from a reader that solved my problem. So, thank you to Peter, whoever you are. You saved me more hours of frustration and possible hair pulling.
Here's what I did:
1. In my HTML the unordered list is contained in a div with the ID of Slider. In the CSS I added the property of visibility: hidden to this div. This hides the div from site while the page is loading, and after that for that matter. You may be asking, how the heck do I get the div to be visible again? That's where the fun starts.
2. In your .js file add this code to the end of the document ready function just before you start the image slideshow through the script.
This then tells the div with the ID of Slider to become visible once the page has fully loaded which prevents the images from displaying as a list.
Here is where I added the code above to the Easyslider1.7.js script.
This dilemma, (images displaying as a list), occurs because a live server is slower than what your localhost would be. If you were originally developing your site locally then moving it to the web then you'll most likely have this problem. At least this is what happened to me.
I hope having this solution all on one easy to follow post helps someone as I had to dig around the net for it. Please keep in mind that your code will differ depending on what image slideshow you use so you will have to play around with the code and place it in the right spot for your particular .js file, but at least you will be on the right track. Plus it may prevent some hair pulling, which is always a good thing.
Happy coding!
Posted Under:| 0 Comment
