1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Anyone use Layerslider? ... can help assist with setup?

Discussion in 'HTML & Website Design' started by IanT, May 8, 2013.

  1. #1
    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/
    Solved! View solution.
    IanT, May 8, 2013 IP
  2. Krisism

    Krisism Member

    Messages:
    36
    Likes Received:
    4
    Best Answers:
    2
    Trophy Points:
    33
    #2
    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
    Krisism, May 9, 2013 IP
  3. IanT

    IanT Member

    Messages:
    432
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    28
    #3
    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!
    IanT, May 9, 2013 IP
  4. #4
    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
    Krisism, May 9, 2013 IP
  5. IanT

    IanT Member

    Messages:
    432
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    28
    #5
    awesome! Thank you!
    IanT, May 9, 2013 IP
  6. IanT

    IanT Member

    Messages:
    432
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    28
    #6
    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
    IanT, May 10, 2013 IP
  7. IanT

    IanT Member

    Messages:
    432
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    28
    #7
    Code (Text):
    1. 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?
    2.  
    3. URL: <http://resultventure.com/slider/basehtml.html>, Local Time: 8:24:48 AM, Date: Friday, May 10, 2013
    4.  
    5. Messages (errors first)
    6.  
    7. Type    Line    Message
    8. CSS Error
    9. 96    The "slideDelay" property is not a recognized style property. Is it misspelled?
    10. <div class="ls-layer" style="slideDelay: 4500; transition2d: 24,25,27,28,34,35,37,38,110,113;">
    11.  
    12.  
    13. CSS Error
    14. 96    The "transition2d" property is not a recognized style property. Should this property be "transition"?
    15. <div class="ls-layer" style="slideDelay: 4500; transition2d: 24,25,27,28,34,35,37,38,110,113;">
    16.  
    17.  
    18. CSS Error
    19. 101    The "slideDirection" property is not a recognized style property. Is it misspelled?
    20. ... 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;">
    21.  
    22.  
    23. CSS Error
    24. 101    The "slideoutdirection" property is not a recognized style property. Is it misspelled?
    25. ...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;">
    26.  
    27.  
    28. CSS Error
    29. 101    The "durationout" property is not a recognized style property. Is it misspelled?
    30. ...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;">
    31.  
    32.  
    33. CSS Error
    34. 101    The "scalein" property is not a recognized style property. Is it misspelled?
    35. ...="left: 0px; top: 0px; position: absolute; width: 475px; height: 315px; z-index:1; slideDirection : fade; slideoutdirection : top; durationout : 750; scalein : 0; showuntil : 500;">
    36.  
    37.  
    38. CSS Error
    39. 101    The "showuntil" property is not a recognized style property. Should this property be "font-weight"?
    40. ...top: 0px; position: absolute; width: 475px; height: 315px; z-index:1; slideDirection : fade; slideoutdirection : top; durationout : 750; scalein : 0; showuntil : 500;">
    41.  
    42.  
    43. CSS Error
    44. 102    The "slideDirection" property is not a recognized style property. Is it misspelled?
    45. ...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;">
    46.  
    47.  
    48. CSS Error
    49. 102    The "slideoutdirection" property is not a recognized style property. Is it misspelled?
    50. ...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;">
    51.  
    52.  
    53. CSS Error
    54. 102    The "durationout" property is not a recognized style property. Is it misspelled?
    55. ...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;">
    56.  
    57.  
    58. CSS Error
    59. 102    The "scalein" property is not a recognized style property. Is it misspelled?
    60. ...ft: 523px; top: 58px; position: absolute; width: 443px;height: 106px;z-index:2; slideDirection : fade; slideoutdirection : bottom; durationout : 750; scalein : 0; showuntil : 500;">
    61.  
    62.  
    63. CSS Error
    64. 102    The "showuntil" property is not a recognized style property. Should this property be "font-weight"?
    65. ...p: 58px; position: absolute; width: 443px;height: 106px;z-index:2; slideDirection : fade; slideoutdirection : bottom; durationout : 750; scalein : 0; showuntil : 500;">
    66.  
    67.  
    68. CSS Error
    69. 103    The "slideDirection" property is not a recognized style property. Is it misspelled?
    70. ...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;">
    71.  
    72.  
    73. CSS Error
    74. 103    The "durationin" property is not a recognized style property. Is it misspelled?
    75. ...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;">
    76.  
    77.  
    78. CSS Error
    79. 103    The "delayin" property is not a recognized style property. Is it misspelled?
    80. ...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;">
    81.  
    82.  
    83. CSS Error
    84. 103    The "rotatein" property is not a recognized style property. Should this property be "rotation"?
    85. ... 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;">
    86.  
    87.  
    88. CSS Error
    89. 103    The "rotateout" property is not a recognized style property. Is it misspelled?
    90. ...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;">
    91.  
    92.  
    93. CSS Error
    94. 103    The "scalein" property is not a recognized style property. Is it misspelled?
    95. ... position: absolute; width: 679px;height: 310px;z-index:3; slideDirection : fade; durationin : 2000; delayin : 2000; rotatein : -90; rotateout : -90; scalein : 2.5; scaleout : 0;">
    96.  
    97.  
    98. CSS Error
    99. 103    The "scaleout" property is not a recognized style property. Is it misspelled?
    100. ...lute; width: 679px;height: 310px;z-index:3; slideDirection : fade; durationin : 2000; delayin : 2000; rotatein : -90; rotateout : -90; scalein : 2.5; scaleout : 0;">
    101.  
    102.  
    103. CSS Error
    104. 104    The "slideDirection" property is not a recognized style property. Is it misspelled?
    105. ...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;">
    106.  
    107.  
    108. CSS Error
    109. 104    The "slideoutdirection" property is not a recognized style property. Is it misspelled?
    110. ...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;">
    111.  
    112.  
    113. CSS Error
    114. 104    The "durationin" property is not a recognized style property. Is it misspelled?
    115. ...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;">
    116.  
    117.  
    118. CSS Error
    119. 104    The "easingin" property is not a recognized style property. Is it misspelled?
    120. ...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;">
    121.  
    122.  
    123. CSS Error
    124. 104    The "delayin" property is not a recognized style property. Is it misspelled?
    125. ...ition: absolute; width: 314px; height: 101px; z-index:4; slideDirection : top; slideoutdirection : top; durationin : 1500; easingin : easeInOutQuart; delayin : 1600; scalein : 5;">
    126.  
    127.  
    128. CSS Error
    129. 104    The "scalein" property is not a recognized style property. Is it misspelled?
    130. ... width: 314px; height: 101px; z-index:4; slideDirection : top; slideoutdirection : top; durationin : 1500; easingin : easeInOutQuart; delayin : 1600; scalein : 5;">
    131.  
    132.  
    133. Error
    134. 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.
    135. </body></html>
    136.  
    137.  
    138. 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.
    IanT, May 10, 2013 IP
  8. IanT

    IanT Member

    Messages:
    432
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    28
    #8
    these are jquery/javascript transitions
    IanT, May 10, 2013 IP
  9. Krisism

    Krisism Member

    Messages:
    36
    Likes Received:
    4
    Best Answers:
    2
    Trophy Points:
    33
    #9
    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
    Krisism, May 10, 2013 IP
  10. IanT

    IanT Member

    Messages:
    432
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    28
    #10
    Hey Kris, I changed them again this time to:

    Code (Text):
    1. <!-- LayerSlider styles -->
    2. <link rel="../slider/layerslider/css/layerslider.css" type="text/css">
    3.  
    4. <!-- jQuery with jQuery Easing, and jQuery Transit JS -->
    5. <script src="../slider/layerslider/jQuery/jquery.js" type="text/javascript"></script>
    6. <script src="../slider/layerslider/jQuery/jquery-easing-1.3.js" type="text/javascript"></script>
    7. <script src="../slider/layerslider/jQuery/jquery-transit-modified.js" type="text/javascript"></script>
    8.  
    9. <!-- LayerSlider from Kreatura Media with Transitions -->
    10. <script src="../slider/layerslider/js/layerslider.transitions.js" type="text/javascript"></script>
    11. <script src="../slider/layerslider/js/layerslider.kreaturamedia.
    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!
    IanT, May 10, 2013 IP
  11. IanT

    IanT Member

    Messages:
    432
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    28
    #11
    site code:


    Code (Text):
    1.  
    2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    4. <html
    5.     xmlns="http://www.w3.org/1999/xhtml"
    6.     lang="en"
    7.     xml:lang="en"
    8. ><head>
    9.  
    10. <meta
    11.     http-equiv="Content-Type"
    12.     content="text/html; charset=utf-8"
    13. />
    14.  
    15. <meta
    16.     http-equiv="Content-Language"
    17.     content="English"
    18. />
    19.  
    20. <meta
    21.     name="description"
    22.     content="####"
    23. />
    24.  
    25. <meta
    26.     name="keywords"
    27.     content="####"
    28. />
    29.  
    30. <link
    31.     rel="shortcut icon"
    32.     href="####"
    33. />
    34.  
    35.        
    36.  
    37. <!--
    38.  
    39.     Don't forget to implement these later!
    40.  
    41. <link
    42.     type="text/css"
    43.     rel="stylesheet"
    44.     href="print.css"
    45.     media="print"
    46. />
    47.  
    48. <link
    49.     type="text/css"
    50.     rel="stylesheet"
    51.     href="handheld.css"
    52.     media="handheld"
    53. />
    54.  
    55. -->
    56.  
    57.  
    58. <!-- LayerSlider styles -->
    59. <link rel="stylesheet" href="../slider/slider/layerslider/css/layerslider.css" type="text/css">
    60. <link rel="stylesheet" href="../slider/assets/css/style.css" type="text/css">
    61. <link rel="stylesheet" href="../slider/assets/css/layerslider.transitiongallery.css">
    62. <!-- jQuery with jQuery Easing, and jQuery Transit JS -->
    63. <script src="../slider/layerslider/jQuery/jquery.js" type="text/javascript"></script>
    64. <script src="../slider/layerslider/jQuery/jquery-easing-1.3.js" type="text/javascript"></script>
    65. <script src="../slider/layerslider/jQuery/jquery-transit-modified.js" type="text/javascript"></script>
    66.  
    67. <!-- LayerSlider from Kreatura Media with Transitions -->
    68. <script src="../slider/layerslider/js/layerslider.transitions.js" type="text/javascript"></script>
    69. <script src="../slider/layerslider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>
    70.  
    71. <title>
    72.     Testing out the LayerSlider
    73. </title>
    74.  
    75. </head>
    76.  
    77. <body>
    78.  
    79.  
    80. <p>This is how we are going to test the layer slider for the first time.</p>
    81.  
    82. <!--slider-->
    83. <!--slider-->
    84. <!--slider-->
    85. <!--slider-->
    86.  
    87. <!--sliderSCRIPT-->
    88. <!--sliderSCRIPT-->
    89. <!--sliderSCRIPT-->
    90. <!--sliderSCRIPT-->
    91. <!--sliderSCRIPT-->
    92. <!--sliderSCRIPT-->
    93.  
    94. <!--LayerSlider begin-->
    95. <div id="layerslider" style="width: 1000px; height: 500px; margin:0 auto;">
    96.  
    97.     <!--LayerSlider layer-->
    98.     <div class="ls-layer" style="slideDelay: 4500; transition2d: 24,25,27,28,34,35,37,38,110,113;">
    99.  
    100.         <!--LayerSlider background-->
    101. <img class="ls-bg" src="images/ls-bg1.png" alt="layer1-background">
    102.         <!--LayerSlider sublayers-->
    103.         <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;">
    104.         <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;">
    105.         <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;">
    106.         <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;">
    107.     </div>
    108.  
    109.    
    110.     <!--LayerSlider layer-->
    111.     <div class="ls-layer" style="slidedelay: 4500; transition2d: 24,25,27,28,34,35,37,38,110,113;">
    112.  
    113.         <!--LayerSlider background-->
    114. <img class="ls-bg" src="images/ls-bg1.png" alt="layer1-background">
    115.         <!--LayerSlider sublayers-->
    116.         <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;">
    117.         <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;">
    118.         <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;">
    119.         <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;">
    120.     </div>
    121.    
    122.    
    123.     <!--LayerSlider layer-->
    124.     <div class="ls-layer" style="slidedelay: 4500; transition2d: 24,25,27,28,34,35,37,38,110,113;">
    125.  
    126.         <!--LayerSlider background-->
    127.         <img class="ls-bg" src="images/ls-bg1.png" alt="layer1-background">
    128.  
    129.         <!--LayerSlider sublayers-->
    130.         <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;">
    131.         <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;">
    132.         <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;">
    133.         <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;">
    134.     </div>
    135. </div>
    136.  
    137.  
    138. <!--LayerSlider end-->
    139. <script type="text/javascript">
    140. var lsdata = $(’#layerslider’).layerSider('data');
    141. alert( lsdata['curLayerIndex'] );
    142. </script>
    143.  
    144. <p>With luck it will appear in between this text</p>
    145.  
    146. <script type="text/javascript">
    147.  
    148.     // jQuery $('document').ready(); function
    149.     $('document').ready(function(){
    150.  
    151.         // Calling LayerSlider on your selected element after the document loaded
    152.         $('#layerslider').layerslider({
    153.    
    154.         autoStart              : true,
    155.         responsive              : true,
    156.         responsiveUnder        : 0,
    157.         sublayerContainer      : 0,
    158.         firstLayer              : 1,
    159.         twoWaySlideshow        : false,
    160.         randomSlideshow        : false,
    161.         keybNav                : true,
    162.         touchNav                : true,
    163.         imgPreload              : true,
    164.         navPrevNext            : true,
    165.         navStartStop            : true,
    166.         navButtons              : true,
    167.         thumbnailNavigation    : 'hover',
    168.         tnWidth                : 100,
    169.         tnHeight                : 60,
    170.         tnContainerWidth        : '60%',
    171.         tnActiveOpacity        : 35,
    172.         tnInactiveOpacity      : 100,
    173.         hoverPrevNext          : true,
    174.         hoverBottomNav          : false,
    175.         skin                    : 'default',
    176.         skinsPath              : '/layerslider/skins/',
    177.         pauseOnHover            : true,
    178.         globalBGColor          : 'transparent',
    179.         globalBGImage          : false,
    180.         animateFirstLayer      : false,
    181.         yourLogo                : false,
    182.         yourLogoStyle          : 'position: absolute; z-index: 1001; left: 10px; top: 10px;',
    183.         yourLogoLink            : false,
    184.         yourLogoTarget          : '_blank',
    185.         loops                  : 0,
    186.         forceLoopNum            : true,
    187.         autoPlayVideos          : true,
    188.         autoPauseSlideshow      : 'auto',
    189.         youtubePreview          : 'maxresdefault.jpg',
    190.         showBarTimer            : false,
    191.         showCircleTimer        : true,
    192.    
    193.         // you can change this settings separately by layers or sublayers with using html style attribute
    194.    
    195.         slideDirection          : 'right',
    196.         slideDelay              : 4000,
    197.         durationIn              : 1000,
    198.         durationOut            : 1000,
    199.         easingIn                : 'easeInOutQuint',
    200.         easingOut              : 'easeInOutQuint',
    201.         delayIn                : 0,
    202.         delayOut                : 0
    203.    
    204.     });
    205. </script>
    206. <!--LayerSlider end-->
    207. <!--ENDslider-->
    208. <!--ENDslider-->
    209. <!--ENDslider-->
    210.  
    211. </body></html>
    212.  
    IanT, May 10, 2013 IP
  12. IanT

    IanT Member

    Messages:
    432
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    28
    #12
    i think the transitions are javascript, so why would it throw a css error for a javascript transition?
    IanT, May 10, 2013 IP
  13. Krisism

    Krisism Member

    Messages:
    36
    Likes Received:
    4
    Best Answers:
    2
    Trophy Points:
    33
    #13
    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
    Krisism, May 10, 2013 IP
  14. IanT

    IanT Member

    Messages:
    432
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    28
    #14
    :( still no aligning stars but i feel we may be getting closer. i really appreciate your support
    IanT, May 10, 2013 IP
  15. Krisism

    Krisism Member

    Messages:
    36
    Likes Received:
    4
    Best Answers:
    2
    Trophy Points:
    33
    #15
    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:

    Code (Text):
    1.         ...easingOut              : 'easeInOutQuint',
    2.         delayIn                : 0,
    3.         delayOut                : 0
    4.     });
    5.  
    It should look like:

    Code (Text):
    1.         ...easingOut              : 'easeInOutQuint',
    2.         delayIn                : 0,
    3.         delayOut                : 0
    4.     });
    5. });
    6.  
    Make sure it is removed from the top script (because that now throws an error).

    Cheers
    Krisism, May 10, 2013 IP