SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Oct 2012
    Location
    Caye Corker, Belize
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question 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:

    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>
    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.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:

    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>
    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.

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,872
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    To start with you are loading three copies of the following scripts where you need only one copy per page:



    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>
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Member
    Join Date
    Oct 2012
    Location
    Caye Corker, Belize
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you. I thought that maybe it was redundant to have it in each banner rather than just the header. I will move the style sheet and the non-specific scripts to my header. Is this what is causing my issue?

    Thanks,
    Lexie


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •