Running a banner script multiple times on one page
First of all, I apologize for asking a question I know has been answered (probably) a million times before. I do not know anything about js, and do not understand how to change code to object oriented from its current state, nor do I really even know how to identify all of the variables to change them.
I have 3 advertising banners running on each page. The site is written with php includes on each page for the banners, while the banners stand alone. Each instance has a unique id (according to the instructions), however that is about as far as my grasp of the concept got me. The script is one that I purchased because it said that with unique ids I would be able to run it multiple times, however (it is entirely plausible that this is human error) it is not functional.
This is the original instance:
The second instance:Code:<link rel="stylesheet" type="text/css" href="../../styles/li-slider.css" /> <script type="text/javascript" src="../../js/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="../../js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="../../js/li-slider-1.1.js"></script> <script type="text/javascript"> $(window).load( function() { $("#upperrotator").sp_Li_Slider({ animation : "Regular", // type of Animation: Regular, Random, Regular-Custom, Random-Custom, Regular-Exception, Random-Exception transitions : 'None', // None|transition_name(s) // List of custom animations - for full list please reference to the preview (works only with "Regular-Custom, Random-Custom, Regular-Exception , Random-Exception ") auto_play : true, // true|false - auto play on start repeat : true, // true|false|number - how many times to repeat all slides modalMode : 'off', // lightBox|prettyPhoto|off goToSlideOnStart : 1, // value //any slide number starting from 1 or url?sp_slide=2 timer : 'no', // no|line_bottom|line_top|line_right|line_left pauseOnMouseOver : false, // true|false tooltip : 'none', // none|text|image tooltipSize : 20, // value // % of slider dimentions from 0 to 100. Use 0 to disable it shuffle : false, // true|false - randomize the images order delay : 5000, // value // time period of a photos displaying /default - 3000 (3 sec) trans_period : 800, // value // time period of chenging the photos /default - 1000 (1 sec) vert_sections : 10, // value // number of vertical sectors (only for Animation type Blind) /default - 15 sqr_sections_Y : 4, // value // number of squeres by vertical (only for Animation type Sqr) /default - 5 active_links : true, // true|false //activate links of photos /default - true buttons_show : false, // true|false //show all buttons /default - true play_pause_show : false, // true|false //show Play or Pause buttons /default - true next_prev_show : false, // true|false //show Next or Prev buttons /default - true auto_hide : true, // true|false // auto hide buttons ot start (when auto_play is true) buttons_show_time : 2000, // value//time period befor displayins of the buttons /default - 100 buttons_show_delay : 500, // value //time period for appearing of the buttons /default - 300 buttons_hide_time : 2000, // value //time period befor disappearing of the buttons/default - 2000 buttons_hide_delay : 500 // value //time period for disappearing of the buttons /default - 500 }); } ); </script> <div id="upperrotator" class="li-banner" style="width:500px; height:100px;"> <ul> <li><a href="http://www.castleplastics.com" target="_blank"><img src="../../images/banners/top left banners/castlebanner.jpg" alt="Castle Plastics" /></a></li> <li ><a href="http://www.thorobredinc.com" target="_blank"><img src="../../images/banners/top left banners/thorobredbanner.jpg" alt="Thoro'bred Inc" /></a></li> <li ><a href="http://www.mwfarrier.com" target="_blank"><img src="../../images/banners/top left banners/midwestbanner.jpg" alt="Midwest Farrier Supply" /></a></li> <li ><a href="http://www.purdybilt.com" target="_blank"><img src="../../images/banners/top left banners/purdybanner.jpg" alt="Purdybilt" /></a></li> <li ><a href="http://www.georgiafarriersupply.com" target="_blank"><img src="../../images/banners/top left banners/GFSbanner.jpg" alt="Georgia Farrier Supply" /></a></li> <li ><a href="http://www.hopeforsoundness.com" target="_blank"><img src="../../images/banners/top left banners/EDSSbanner.jpg" alt="EDSS" /></a></li> <li ><a href="http://www.cliffcarroll.com" target="_blank"><img src="../../images/banners/top left banners/cliffbanner.jpg" alt="Cliff Carrol" /></a></li> </ul> </div>
And the final instance:Code:<link rel="stylesheet" type="text/css" href="../../styles/li-slider.css" /> <script type="text/javascript" src="../../js/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="../../js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="../../js/li-slider-1.1.min.js"></script> <script type="text/javascript"> $(window).load( function() { $("#bottomrightrotator").sp_Li_Slider({ animation : "Regular", // type of Animation: Regular, Random, Regular-Custom, Random-Custom, Regular-Exception, Random-Exception transitions : 'None', // None|transition_name(s) // List of custom animations - for full list please reference to the preview (works only with "Regular-Custom, Random-Custom, Regular-Exception , Random-Exception ") auto_play : true, // true|false - auto play on start repeat : true, // true|false|number - how many times to repeat all slides modalMode : 'off', // lightBox|prettyPhoto|off goToSlideOnStart : 1, // value //any slide number starting from 1 or url?sp_slide=2 timer : 'no', // no|line_bottom|line_top|line_right|line_left pauseOnMouseOver : false, // true|false tooltip : 'none', // none|text|image tooltipSize : 20, // value // % of slider dimentions from 0 to 100. Use 0 to disable it shuffle : false, // true|false - randomize the images order delay : 5000, // value // time period of a photos displaying /default - 3000 (3 sec) trans_period : 800, // value // time period of chenging the photos /default - 1000 (1 sec) vert_sections : 10, // value // number of vertical sectors (only for Animation type Blind) /default - 15 sqr_sections_Y : 4, // value // number of squeres by vertical (only for Animation type Sqr) /default - 5 active_links : true, // true|false //activate links of photos /default - true buttons_show : false, // true|false //show all buttons /default - true play_pause_show : false, // true|false //show Play or Pause buttons /default - true next_prev_show : false, // true|false //show Next or Prev buttons /default - true auto_hide : true, // true|false // auto hide buttons ot start (when auto_play is true) buttons_show_time : 2000, // value//time period befor displayins of the buttons /default - 100 buttons_show_delay : 500, // value //time period for appearing of the buttons /default - 300 buttons_hide_time : 2000, // value //time period befor disappearing of the buttons/default - 2000 buttons_hide_delay : 500 // value //time period for disappearing of the buttons /default - 500 }); } ); </script> <div id="bottomrightrotator" class="li-banner" style="width:500px; height:100px;"> <ul> <li ><a href="http://www.castleplastics.com" target="_blank"><img src="http://www.alexrowsell.com/images/banners/top left banners/castlebanner.jpg" alt="Castle Plastics" /></a></li> <li ><a href="http://www.thorobredinc.com" target="_blank"><img src="http://www.alexrowsell.com/images/banners/top left banners/thorobredbanner.jpg" alt="Thoro'bred Inc" /></a></li> <li ><a href="http://www.mwfarrier.com" target="_blank"><img src="http://www.alexrowsell.com/images/banners/top left banners/midwestbanner.jpg" alt="Midwest Farrier Supply" /></a></li> <li ><a href="http://www.purdybilt.com" target="_blank"><img src="http://www.alexrowsell.com/images/banners/top left banners/purdybanner.jpg" alt="Purdybilt" /></a></li> <li ><a href="http://www.georgiafarriersupply.com" target="_blank"><img src="http://www.alexrowsell.com/images/banners/top left banners/GFSbanner.jpg" alt="Georgia Farrier Supply" /></a></li> <li ><a href="http://www.hopeforsoundness.com" target="_blank"><img src="http://www.alexrowsell.com/images/banners/top left banners/EDSSbanner.jpg" alt="EDSS" /></a></li> <li ><a href="http://www.cliffcarroll.com" target="_blank"><img src="http://www.alexrowsell.com/images/banners/top left banners/cliffbanner.jpg" alt="Cliff Carrol" /></a></li> </ul> </div>
the actual script its calling (very long so I thought I would link instead of post):Code:<link rel="stylesheet" type="text/css" href="../../styles/li-slider.css" /> <script type="text/javascript" src="../../js/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="../../js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="../../js/li-slider-1.1.min.js"></script> <script type="text/javascript"> $(window).load( function() { $("#bottomleftrotator").sp_Li_Slider({ animation : "Regular", // type of Animation: Regular, Random, Regular-Custom, Random-Custom, Regular-Exception, Random-Exception transitions : 'None', // None|transition_name(s) // List of custom animations - for full list please reference to the preview (works only with "Regular-Custom, Random-Custom, Regular-Exception , Random-Exception ") auto_play : true, // true|false - auto play on start repeat : true, // true|false|number - how many times to repeat all slides modalMode : 'off', // lightBox|prettyPhoto|off goToSlideOnStart : 1, // value //any slide number starting from 1 or url?sp_slide=2 timer : 'no', // no|line_bottom|line_top|line_right|line_left pauseOnMouseOver : false, // true|false tooltip : 'none', // none|text|image tooltipSize : 20, // value // % of slider dimentions from 0 to 100. Use 0 to disable it shuffle : false, // true|false - randomize the images order delay : 5000, // value // time period of a photos displaying /default - 3000 (3 sec) trans_period : 800, // value // time period of chenging the photos /default - 1000 (1 sec) vert_sections : 10, // value // number of vertical sectors (only for Animation type Blind) /default - 15 sqr_sections_Y : 4, // value // number of squeres by vertical (only for Animation type Sqr) /default - 5 active_links : true, // true|false //activate links of photos /default - true buttons_show : false, // true|false //show all buttons /default - true play_pause_show : false, // true|false //show Play or Pause buttons /default - true next_prev_show : false, // true|false //show Next or Prev buttons /default - true auto_hide : true, // true|false // auto hide buttons ot start (when auto_play is true) buttons_show_time : 2000, // value//time period befor displayins of the buttons /default - 100 buttons_show_delay : 500, // value //time period for appearing of the buttons /default - 300 buttons_hide_time : 2000, // value //time period befor disappearing of the buttons/default - 2000 buttons_hide_delay : 500 // value //time period for disappearing of the buttons /default - 500 }); } ); </script> <div id="bottomleftrotator" class="li-banner" style="width:400px; height:100px;"> <ul> <li ><a href="http://www.farriers.com" target="_blank"><img src="http://www.alexrowsell.com/images/banners/bottom right banners/farriersbanner.png" alt="Farriers.com" /></a></li> <li ><a href="http://www.texashorsefarmforsale.com" target="_blank"><img src="http://www.alexrowsell.com/images/banners/bottom right banners/housebanner.png" alt="Texas Horse Farm for Sale!" /></a></li> </ul> </div>
http://www.alexrowsell.com/js/li-slider-1.1.js
Could someone please point me along the correct path to resolve this issue? I don't mind going through the script and changing things by hand, I just know nothing about js whatsoever.
Reply With Quote
Bookmarks