Tuesday 10 June 2014

Issues with slideshow and resolving it!

I recently found a image slide that i was able to add on my website i.e. my introduction page for chapter 1 and i placed the code into my html and css and it worked, and all i had to do was change the images to the ones i wanted in my gallery.


This is how it looked before




and this is how the gallery looks on my website.

Once i did that i looked at my website to see if it worked, and it did! and before i found this gallery i tried other ones but for some reason when i placed the code in it wouldn't work the way i wanted it to.  When i found the gallery on the website it had the look that i wanted, as the previous gallery slider i used in my other pages i couldn't figure out how to get it full sized, so i wanted a slider that used the full size of the image to cover the slider, so i was pleased when i found this one.


Link to where i found the image slider: 




I also had to add smaller icon images when the user hovered over the icon dots, as it was built in, in the original version. This is a great addition to the image slider and it allows the user to tell what they want to click on for the images within the gallery.



Once i had all the images and icons etc on my gallery i was finished with it, and the final changes i made was making the gallery invisible in the smaller formats as it would weird on smaller platforms and probably wouldn't work as well on the mobile versions. The gallery works fine on safari and i then thought of checking how it looked on firefox and it worked fine and then i checked how it worked on google chrome, and it didn't work.

This is how it looked on google chrome as the default.


This is how it looked when trying to click on another image.



I didn't know what the problem was so i went back on the website to look at the demo and see if it worked on google chrome, just to see if i had messed something up in the code or if it was the galleries fault. Below is how it looked on google chrome.




So when i looked before a while ago when i first found this issue the demo didn't work on chrome, and i recently went on chrome on the demo and it worked so i felt a bit clueless to why it worked now. I went on the site i got it from and scrolled down the page seeing similar problems with the image slider on certain browsers and she did address the issues and showcased the improvements on the page.




I used the developer tools to look through some of the html and i got rid of my old script and placed the new one she linked and then i checked if it worked and it did! 



This is how my image slider looks on chrome now!




So overall the way i resolved this issue was by taking out some script from my original html for the image slider, and then i went onto the improved sideshow on chrome in the developer tools and copy and pasted that script in, to replace my old script i had got rid of and the image gallery worked!


No comments:

Post a Comment