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:
<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>
The second instance:
<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>
And the final instance:
<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>
the actual script its calling (very long so I thought I would link instead of post):
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.