I just downloaded a jquery plugin called layerslider. It seemed really cool and I want to see if I can set it up. I have already purchased it but I am at a standstill, currently this is what it looks like: http://resultventure.com/slider/basehtml.html It s not displaying correctly, any ideas on what i did wrong? http://kreaturamedia.com/layerslider-responsive-jquery-slider-plugin/
Hi IanT, Your issue is not with LayerSlider (yet) but your files are misplaced or not referenced right. I recommend using Firebug to catch things like this (a very handy firefox plugin). Your site throws quite a few errors, mostly saying that it can't find files, eg: NetworkError: 404 Not Found - http://resultventure.com/layerslider/css/layerslider.css Check your directories and where you reference files, make sure it lines up. It's not just the one above but all your layerslider css/js files. Good luck, Kris
how do you find that info ? (for instance where are you being able to see what files are running back errors?).... I had a feeling this was in regards to internal referencing and such, hopefully this is just a quick backend fix and not the slider set up part which i am hoping I understand like i think I do. Thank you Kris!
Hi Ian, I mentioned Firebug in my first post - that's what I'm using. It's a great plugin for the Firefox browser (might come natively in recent versions - press f12 if you are in FF to see). There are also chrome plugins to do similar and I'm sure something for IE (but seriously, IE.. booo). After Firebug is up, I click on 'console' then refresh the page to catch any errors. Errors show in red and warnings in yellow. Lots of great, more-detailed information on Firebug online if you search around as well. Cheers, Kris
Okay I updated it, but its still not animating, i dont understand whats breaking it, it was basically a drag and drp install from codesource
CSE HTML Validator Professional generated 26 error messages and 0 warning messages when checking this web page. In fact, this web page generated so many errors that HTML Validator terminated the check before it went through the entire document. Of the 26 total error messages generated, 25 error messages had to do with the CSS syntax in this web page. These problems could damage this web page's search engine rankings as well as cause viewing problems for visitors. It is highly recommended that any problems be corrected. Why validate? URL: <http://resultventure.com/slider/basehtml.html>, Local Time: 8:24:48 AM, Date: Friday, May 10, 2013 Messages (errors first) Type Line Message CSS Error 96 The "slideDelay" property is not a recognized style property. Is it misspelled? <div class="ls-layer" style="slideDelay: 4500; transition2d: 24,25,27,28,34,35,37,38,110,113;"> CSS Error 96 The "transition2d" property is not a recognized style property. Should this property be "transition"? <div class="ls-layer" style="slideDelay: 4500; transition2d: 24,25,27,28,34,35,37,38,110,113;"> CSS Error 101 The "slideDirection" property is not a recognized style property. Is it misspelled? ... src="images/lobster_roll_lunch.png" alt="lobster_roll_lunch" style="left: 0px; top: 0px; position: absolute; width: 475px; height: 315px; z-index:1; slideDirection : fade; slideoutdirection : top; durationout : 750; scalein : 0; showuntil : 500;"> CSS Error 101 The "slideoutdirection" property is not a recognized style property. Is it misspelled? ...ll_lunch.png" alt="lobster_roll_lunch" style="left: 0px; top: 0px; position: absolute; width: 475px; height: 315px; z-index:1; slideDirection : fade; slideoutdirection : top; durationout : 750; scalein : 0; showuntil : 500;"> CSS Error 101 The "durationout" property is not a recognized style property. Is it misspelled? ...r_roll_lunch" style="left: 0px; top: 0px; position: absolute; width: 475px; height: 315px; z-index:1; slideDirection : fade; slideoutdirection : top; durationout : 750; scalein : 0; showuntil : 500;"> CSS Error 101 The "scalein" property is not a recognized style property. Is it misspelled? ...="left: 0px; top: 0px; position: absolute; width: 475px; height: 315px; z-index:1; slideDirection : fade; slideoutdirection : top; durationout : 750; scalein : 0; showuntil : 500;"> CSS Error 101 The "showuntil" property is not a recognized style property. Should this property be "font-weight"? ...top: 0px; position: absolute; width: 475px; height: 315px; z-index:1; slideDirection : fade; slideoutdirection : top; durationout : 750; scalein : 0; showuntil : 500;"> CSS Error 102 The "slideDirection" property is not a recognized style property. Is it misspelled? ...c="images/famous_lobster_roll.png" alt="famous_lobster_roll" style="left: 523px; top: 58px; position: absolute; width: 443px;height: 106px;z-index:2; slideDirection : fade; slideoutdirection : bottom; durationout : 750; scalein : 0; showuntil : 500;"> CSS Error 102 The "slideoutdirection" property is not a recognized style property. Is it misspelled? ...r_roll.png" alt="famous_lobster_roll" style="left: 523px; top: 58px; position: absolute; width: 443px;height: 106px;z-index:2; slideDirection : fade; slideoutdirection : bottom; durationout : 750; scalein : 0; showuntil : 500;"> CSS Error 102 The "durationout" property is not a recognized style property. Is it misspelled? ...ter_roll" style="left: 523px; top: 58px; position: absolute; width: 443px;height: 106px;z-index:2; slideDirection : fade; slideoutdirection : bottom; durationout : 750; scalein : 0; showuntil : 500;"> CSS Error 102 The "scalein" property is not a recognized style property. Is it misspelled? ...ft: 523px; top: 58px; position: absolute; width: 443px;height: 106px;z-index:2; slideDirection : fade; slideoutdirection : bottom; durationout : 750; scalein : 0; showuntil : 500;"> CSS Error 102 The "showuntil" property is not a recognized style property. Should this property be "font-weight"? ...p: 58px; position: absolute; width: 443px;height: 106px;z-index:2; slideDirection : fade; slideoutdirection : bottom; durationout : 750; scalein : 0; showuntil : 500;"> CSS Error 103 The "slideDirection" property is not a recognized style property. Is it misspelled? ...c="images/lobster_roll_photo.png" alt="lobster-roll-photo" style=" left: 334px; top: 191px; position: absolute; width: 679px;height: 310px;z-index:3; slideDirection : fade; durationin : 2000; delayin : 2000; rotatein : -90; rotateout : -90; scalein : 2.5; scaleout : 0;"> CSS Error 103 The "durationin" property is not a recognized style property. Is it misspelled? ...photo.png" alt="lobster-roll-photo" style=" left: 334px; top: 191px; position: absolute; width: 679px;height: 310px;z-index:3; slideDirection : fade; durationin : 2000; delayin : 2000; rotatein : -90; rotateout : -90; scalein : 2.5; scaleout : 0;"> CSS Error 103 The "delayin" property is not a recognized style property. Is it misspelled? ...ster-roll-photo" style=" left: 334px; top: 191px; position: absolute; width: 679px;height: 310px;z-index:3; slideDirection : fade; durationin : 2000; delayin : 2000; rotatein : -90; rotateout : -90; scalein : 2.5; scaleout : 0;"> CSS Error 103 The "rotatein" property is not a recognized style property. Should this property be "rotation"? ... style=" left: 334px; top: 191px; position: absolute; width: 679px;height: 310px;z-index:3; slideDirection : fade; durationin : 2000; delayin : 2000; rotatein : -90; rotateout : -90; scalein : 2.5; scaleout : 0;"> CSS Error 103 The "rotateout" property is not a recognized style property. Is it misspelled? ...34px; top: 191px; position: absolute; width: 679px;height: 310px;z-index:3; slideDirection : fade; durationin : 2000; delayin : 2000; rotatein : -90; rotateout : -90; scalein : 2.5; scaleout : 0;"> CSS Error 103 The "scalein" property is not a recognized style property. Is it misspelled? ... position: absolute; width: 679px;height: 310px;z-index:3; slideDirection : fade; durationin : 2000; delayin : 2000; rotatein : -90; rotateout : -90; scalein : 2.5; scaleout : 0;"> CSS Error 103 The "scaleout" property is not a recognized style property. Is it misspelled? ...lute; width: 679px;height: 310px;z-index:3; slideDirection : fade; durationin : 2000; delayin : 2000; rotatein : -90; rotateout : -90; scalein : 2.5; scaleout : 0;"> CSS Error 104 The "slideDirection" property is not a recognized style property. Is it misspelled? ...mages/lobster_salad_recipe.png" alt="lobster_salad_recipe" style="left: 29px; top: 347px; position: absolute; width: 314px; height: 101px; z-index:4; slideDirection : top; slideoutdirection : top; durationin : 1500; easingin : easeInOutQuart; delayin : 1600; scalein : 5;"> CSS Error 104 The "slideoutdirection" property is not a recognized style property. Is it misspelled? ...cipe.png" alt="lobster_salad_recipe" style="left: 29px; top: 347px; position: absolute; width: 314px; height: 101px; z-index:4; slideDirection : top; slideoutdirection : top; durationin : 1500; easingin : easeInOutQuart; delayin : 1600; scalein : 5;"> CSS Error 104 The "durationin" property is not a recognized style property. Is it misspelled? ...lad_recipe" style="left: 29px; top: 347px; position: absolute; width: 314px; height: 101px; z-index:4; slideDirection : top; slideoutdirection : top; durationin : 1500; easingin : easeInOutQuart; delayin : 1600; scalein : 5;"> CSS Error 104 The "easingin" property is not a recognized style property. Is it misspelled? ...left: 29px; top: 347px; position: absolute; width: 314px; height: 101px; z-index:4; slideDirection : top; slideoutdirection : top; durationin : 1500; easingin : easeInOutQuart; delayin : 1600; scalein : 5;"> CSS Error 104 The "delayin" property is not a recognized style property. Is it misspelled? ...ition: absolute; width: 314px; height: 101px; z-index:4; slideDirection : top; slideoutdirection : top; durationin : 1500; easingin : easeInOutQuart; delayin : 1600; scalein : 5;"> CSS Error 104 The "scalein" property is not a recognized style property. Is it misspelled? ... width: 314px; height: 101px; z-index:4; slideDirection : top; slideoutdirection : top; durationin : 1500; easingin : easeInOutQuart; delayin : 1600; scalein : 5;"> Error 209 Terminating validation due to too many errors. Please correct the previous errors and recheck the document. HTML Validator is currently set to stop checking after 25 errors. </body></html> NOT SHOWN: CSE HTML Validator Online (OnlineWebCheck.com) does not show: bad & broken links, SEO (search engine optimization) messages, misspelled words, accessibility messages, tip messages, JavaScript lint messages, and messages other than errors and warnings. Code (markup):
You still have the same issues. The styles and javascript files you link in the header are not loading anything. For example, you refer to this: http://resultventure.com/layerslider/css/layerslider.css - go there and you will see it does not exist. If you want it to work, you need to refer to the right files. Kris
Hey Kris, I changed them again this time to: <!-- LayerSlider styles --> <link rel="../slider/layerslider/css/layerslider.css" type="text/css"> <!-- jQuery with jQuery Easing, and jQuery Transit JS --> <script src="../slider/layerslider/jQuery/jquery.js" type="text/javascript"></script> <script src="../slider/layerslider/jQuery/jquery-easing-1.3.js" type="text/javascript"></script> <script src="../slider/layerslider/jQuery/jquery-transit-modified.js" type="text/javascript"></script> <!-- LayerSlider from Kreatura Media with Transitions --> <script src="../slider/layerslider/js/layerslider.transitions.js" type="text/javascript"></script> <script src="../slider/layerslider/js/layerslider.kreaturamedia. Code (markup): still no luck. but when i check the given css file i see none of those classes for the transitions all the files I am linking to can be found at: http://resultventure.com/slider/ I will be so ecstatic when I finally get this thing working!
site code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" ><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="English" /> <meta name="description" content="####" /> <meta name="keywords" content="####" /> <link rel="shortcut icon" href="####" /> <!-- Don't forget to implement these later! <link type="text/css" rel="stylesheet" href="print.css" media="print" /> <link type="text/css" rel="stylesheet" href="handheld.css" media="handheld" /> --> <!-- LayerSlider styles --> <link rel="stylesheet" href="../slider/slider/layerslider/css/layerslider.css" type="text/css"> <link rel="stylesheet" href="../slider/assets/css/style.css" type="text/css"> <link rel="stylesheet" href="../slider/assets/css/layerslider.transitiongallery.css"> <!-- jQuery with jQuery Easing, and jQuery Transit JS --> <script src="../slider/layerslider/jQuery/jquery.js" type="text/javascript"></script> <script src="../slider/layerslider/jQuery/jquery-easing-1.3.js" type="text/javascript"></script> <script src="../slider/layerslider/jQuery/jquery-transit-modified.js" type="text/javascript"></script> <!-- LayerSlider from Kreatura Media with Transitions --> <script src="../slider/layerslider/js/layerslider.transitions.js" type="text/javascript"></script> <script src="../slider/layerslider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script> <title> Testing out the LayerSlider </title> </head> <body> <p>This is how we are going to test the layer slider for the first time.</p> <!--slider--> <!--slider--> <!--slider--> <!--slider--> <!--sliderSCRIPT--> <!--sliderSCRIPT--> <!--sliderSCRIPT--> <!--sliderSCRIPT--> <!--sliderSCRIPT--> <!--sliderSCRIPT--> <!--LayerSlider begin--> <div id="layerslider" style="width: 1000px; height: 500px; margin:0 auto;"> <!--LayerSlider layer--> <div class="ls-layer" style="slideDelay: 4500; transition2d: 24,25,27,28,34,35,37,38,110,113;"> <!--LayerSlider background--> <img class="ls-bg" src="images/ls-bg1.png" alt="layer1-background"> <!--LayerSlider sublayers--> <img class="ls-s-1" src="images/lobster_roll_lunch.png" alt="lobster_roll_lunch" style="left: 0px; top: 0px; position: absolute; width: 475px; height: 315px; z-index:1; slideDirection : fade; slideoutdirection : top; durationout : 750; scalein : 0; showuntil : 500;"> <img class="ls-s-2" src="images/famous_lobster_roll.png" alt="famous_lobster_roll" style="left: 523px; top: 58px; position: absolute; width: 443px;height: 106px;z-index:2; slideDirection : fade; slideoutdirection : bottom; durationout : 750; scalein : 0; showuntil : 500;"> <img class="ls-s-3" src="images/lobster_roll_photo.png" alt="lobster-roll-photo" style=" left: 334px; top: 191px; position: absolute; width: 679px;height: 310px;z-index:3; slideDirection : fade; durationin : 2000; delayin : 2000; rotatein : -90; rotateout : -90; scalein : 2.5; scaleout : 0;"> <img class="ls-s-4" src="images/lobster_salad_recipe.png" alt="lobster_salad_recipe" style="left: 29px; top: 347px; position: absolute; width: 314px; height: 101px; z-index:4; slideDirection : top; slideoutdirection : top; durationin : 1500; easingin : easeInOutQuart; delayin : 1600; scalein : 5;"> </div> <!--LayerSlider layer--> <div class="ls-layer" style="slidedelay: 4500; transition2d: 24,25,27,28,34,35,37,38,110,113;"> <!--LayerSlider background--> <img class="ls-bg" src="images/ls-bg1.png" alt="layer1-background"> <!--LayerSlider sublayers--> <img class="ls-s-1" src="images/lobster_roll_lunch.png" alt="lobster_roll_lunch" style="left: 0px; top: 0px; position: absolute; width: 475px; height: 315px; z-index:1; slideDirection : fade; slideoutdirection : top; durationout : 750; scalein : 0; showuntil : 500;"> <img class="ls-s-2" src="images/famous_lobster_roll.png" alt="famous_lobster_roll" style="left: 523px; top: 58px; position: absolute; width: 443px;height: 106px;z-index:2; slideDirection : fade; slideoutdirection : bottom; durationout : 750; scalein : 0; showuntil : 500;"> <img class="ls-s-3" src="images/lobster_roll_photo.png" alt="lobster-roll-photo" style="left: 334px; top: 191px; position: absolute; width: 679px;height: 310px;z-index:3; slideDirection : fade; durationin : 2000; delayin : 2000; rotatein : -90; rotateout : -90; scalein : 2.5; scaleout : 0;"> <img class="ls-s-4" src="images/lobster_salad_recipe.png" alt="lobster_salad_recipe" style="left: 29px; top: 347px; position: absolute; width: 314px; height: 101px; z-index:4; slideDirection : top; slideoutdirection : top; durationin : 1500; easingin : easeInOutQuart; delayin : 1600; scalein : 5;"> </div> <!--LayerSlider layer--> <div class="ls-layer" style="slidedelay: 4500; transition2d: 24,25,27,28,34,35,37,38,110,113;"> <!--LayerSlider background--> <img class="ls-bg" src="images/ls-bg1.png" alt="layer1-background"> <!--LayerSlider sublayers--> <img class="ls-s-1" src="images/lobster_roll_lunch.png" alt="lobster_roll_lunch" style="left: 0px; top: 0px; position: absolute; width: 475px; height: 315px; z-index:1; slideDirection : fade; slideoutdirection : top; durationout : 750; scalein : 0; showuntil : 500;"> <img class="ls-s-2" src="images/famous_lobster_roll.png" alt="famous_lobster_roll" style="left: 523px; top: 58px; position: absolute; width: 443px;height: 106px;z-index:2; slideDirection : fade; slideoutdirection : bottom; durationout : 750; scalein : 0; showuntil : 500;"> <img class="ls-s-3" src="images/lobster_roll_photo.png" alt="lobster-roll-photo" style=" left: 334px; top: 191px; position: absolute; width: 679px;height: 310px;z-index:3; slideDirection : fade; durationin : 2000; delayin : 2000; rotatein : -90; rotateout : -90; scalein : 2.5; scaleout : 0;"> <img class="ls-s-4" src="images/lobster_salad_recipe.png" alt="lobster_salad_recipe" style="left: 29px; top: 347px; position: absolute; width: 314px; height: 101px; z-index:4; slideDirection : top; slideoutdirection : top; durationin : 1500; easingin : easeInOutQuart; delayin : 1600; scalein : 5;"> </div> </div> <!--LayerSlider end--> <script type="text/javascript"> var lsdata = $(’#layerslider’).layerSider('data'); alert( lsdata['curLayerIndex'] ); </script> <p>With luck it will appear in between this text</p> <script type="text/javascript"> // jQuery $('document').ready(); function $('document').ready(function(){ // Calling LayerSlider on your selected element after the document loaded $('#layerslider').layerslider({ autoStart : true, responsive : true, responsiveUnder : 0, sublayerContainer : 0, firstLayer : 1, twoWaySlideshow : false, randomSlideshow : false, keybNav : true, touchNav : true, imgPreload : true, navPrevNext : true, navStartStop : true, navButtons : true, thumbnailNavigation : 'hover', tnWidth : 100, tnHeight : 60, tnContainerWidth : '60%', tnActiveOpacity : 35, tnInactiveOpacity : 100, hoverPrevNext : true, hoverBottomNav : false, skin : 'default', skinsPath : '/layerslider/skins/', pauseOnHover : true, globalBGColor : 'transparent', globalBGImage : false, animateFirstLayer : false, yourLogo : false, yourLogoStyle : 'position: absolute; z-index: 1001; left: 10px; top: 10px;', yourLogoLink : false, yourLogoTarget : '_blank', loops : 0, forceLoopNum : true, autoPlayVideos : true, autoPauseSlideshow : 'auto', youtubePreview : 'maxresdefault.jpg', showBarTimer : false, showCircleTimer : true, // you can change this settings separately by layers or sublayers with using html style attribute slideDirection : 'right', slideDelay : 4000, durationIn : 1000, durationOut : 1000, easingIn : 'easeInOutQuint', easingOut : 'easeInOutQuint', delayIn : 0, delayOut : 0 }); </script> <!--LayerSlider end--> <!--ENDslider--> <!--ENDslider--> <!--ENDslider--> </body></html> Code (markup):
i think the transitions are javascript, so why would it throw a css error for a javascript transition?
Hey Ian, You have two more errors in your code, both within the script tags. First, your main layerslider call with all the settings, you need to add this to the very end of that script (just before /script): }); Secondly, you are using unicode quotes in one of your jQuery objects. Copy this and replace the same line in your code (you can also look at your code to see the quotes for future troubleshooting). var lsdata = $('#layerslider').layerSider('data'); Then, let's hope the stars align for you Kris
You put the first bit in the wrong script tag. Move line 141, to line 204. The }); needs to be after the other }); below this: ...easingOut : 'easeInOutQuint', delayIn : 0, delayOut : 0 }); Code (markup): It should look like: ...easingOut : 'easeInOutQuint', delayIn : 0, delayOut : 0 }); }); Code (markup): Make sure it is removed from the top script (because that now throws an error). Cheers