Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Mar 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I need a second Instance of this script running on same page

    Is there a way that I can run a second set of this script on the same page at the same time?

    If I want a 2nd instance of this script to run on the same page...what values would I need to rename in the 2nd instance?

    When I try to place this script a second time it only shows the 2nd scripts values or banner ads... I'm trying to make a Banner rotation placement on my sites inner pages (It's a Wordpress powered site) One Set of Banners that ROTATE directly Above Another Set...

    I like this script since it allows for a Random order on each page load and will ALSO cycle through Each Banner once before repeating the order, That way Each Advertiser will get seen before another is seen a second or third time...

    I know there are plug-ins for wordpress for advertising, but I have not found any that will rotate out the banners every x niumber of seconds, like this does...

    Is there a way that I can run a second set of this script on the same page at the same time?




    <script type="text/javascript">

    // Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com)
    // For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
    // This notice must stay intact for use

    var ultimateshow=new Array()

    //ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"]

    ultimateshow[0]=['http://www.rockinghamcountymerchants.com/CraigTravis/CraigTravis250x250.jpg', 'http://tcraigtravis.com/', '_new']
    ultimateshow[1]=['http://www.rceno.com/RCENO/bannerads/elizabethspizza/elizabethspizza250x250.jpg', 'http://www.rceno.com/RCENO/advertisers/elizabethspizza/index.html', '_new']
    ultimateshow[2]=['http://www.rceno.com/RCENO/bannerads/gavinsmightychamps/gavin250x250.jpg', 'http://www.gavinsmightychamps.com/index.html', '_new']
    ultimateshow[3]=['http://www.rceno.com/RCENO/bannerads/redrivergrill/RedRiver2420-250x250.jpg', 'http://www.rockinghamcountymerchants.com/redrivergrill', '_new']
    ultimateshow[4]=['http://www.rceno.com/RCENO/bannerads/qualitycleaners/QC250x250-011510.jpg', 'http://www.rockinghamcountymerchants.com/qualitycleaners', '_new']








    //configure the below 3 variables to set the dimension/background color of the slideshow

    var slidewidth="250px" //set to width of LARGEST image in your slideshow
    var slideheight="250px" //set to height of LARGEST iamge in your slideshow
    var slidecycles="continous" //number of cycles before slideshow stops (ie: "2" or "continous")
    var randomorder="yes" //randomize the order in which images are displayed? "yes" or "no"
    var preloadimages="yes" //preload images? "yes" or "no"
    var slidebgcolor='white'

    //configure the below variable to determine the delay between image rotations (in miliseconds)
    var slidedelay=9000

    ////Do not edit pass this line////////////////

    var ie=document.all
    var dom=document.getElementById
    var curcycle=0

    if (preloadimages=="yes"){
    for (i=0;i<ultimateshow.length;i++){
    var cacheimage=new Image()
    cacheimage.src=ultimateshow[i][0]
    }
    }

    var currentslide=0

    function randomize(targetarray){
    ultimateshowCopy=new Array()
    var the_one
    var z=0
    while (z<targetarray.length){
    the_one=Math.floor(Math.random()*targetarray.length)
    if (targetarray[the_one]!="_selected!"){
    ultimateshowCopy[z]=targetarray[the_one]
    targetarray[the_one]="_selected!"
    z++
    }
    }
    }

    if (randomorder=="yes")
    randomize(ultimateshow)
    else
    ultimateshowCopy=ultimateshow

    function rotateimages(){
    curcycle=(currentslide==0)? curcycle+1 : curcycle
    ultcontainer='<center>'
    if (ultimateshowCopy[currentslide][1]!="")
    ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" target="'+ultimateshowCopy[currentslide][2]+'">'
    ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">'
    if (ultimateshowCopy[currentslide][1]!="")
    ultcontainer+='</a>'
    ultcontainer+='</center>'
    if (ie||dom)
    crossrotateobj.innerHTML=ultcontainer
    if (currentslide==ultimateshow.length-1) currentslide=0
    else currentslide++
    if (curcycle==parseInt(slidecycles) && currentslide==0)
    return
    setTimeout("rotateimages()",slidedelay)
    }

    if (ie||dom)
    document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

    function start_slider(){
    crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom
    rotateimages()
    }

    if (ie||dom)
    window.onload=start_slider

    </script>


    In Other words I would have one set of 5 ads rotating and directly below it another set of 5 Ads

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,603
    Thanks
    80
    Thanked 4,500 Times in 4,464 Posts
    No, you don't want a second copy. If you could do that, you might end up with the same banner in two places on the page. You want to use ONE set of randomized banners and you want to grab both banners from the same array, in succession, to guarantee no duplicates.

    This is really ancient, ancient code. Vintage 1999 or so, I'd guess.

    You can't find something more up to date? And that allows you to say how many banners to create?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Mar 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I know that the 2nd instance of this code would have to have different banners, I only posted the one code with the array in the previous post to save room.

    So Actually it would be like this:-----------

    <script type="text/javascript">

    // Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com)
    // For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
    // This notice must stay intact for use

    var ultimateshow=new Array()

    //ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"]

    ultimateshow[0]=['http://www.site1/image1.jpg', 'http://www.site1.com/', '_new']
    ultimateshow[1]=['http://www.site2/image2.jpg', 'http://www.site2.com', '_new']
    ultimateshow[2]=['http://www.site3/image3.jpg', 'http://www.site3.com', '_new']







    //configure the below 3 variables to set the dimension/background color of the slideshow

    var slidewidth="250px" //set to width of LARGEST image in your slideshow
    var slideheight="250px" //set to height of LARGEST iamge in your slideshow
    var slidecycles="continous" //number of cycles before slideshow stops (ie: "2" or "continous")
    var randomorder="yes" //randomize the order in which images are displayed? "yes" or "no"
    var preloadimages="yes" //preload images? "yes" or "no"
    var slidebgcolor='white'

    //configure the below variable to determine the delay between image rotations (in miliseconds)
    var slidedelay=9000

    ////Do not edit pass this line////////////////

    var ie=document.all
    var dom=document.getElementById
    var curcycle=0

    if (preloadimages=="yes"){
    for (i=0;i<ultimateshow.length;i++){
    var cacheimage=new Image()
    cacheimage.src=ultimateshow[i][0]
    }
    }

    var currentslide=0

    function randomize(targetarray){
    ultimateshowCopy=new Array()
    var the_one
    var z=0
    while (z<targetarray.length){
    the_one=Math.floor(Math.random()*targetarray.length)
    if (targetarray[the_one]!="_selected!"){
    ultimateshowCopy[z]=targetarray[the_one]
    targetarray[the_one]="_selected!"
    z++
    }
    }
    }

    if (randomorder=="yes")
    randomize(ultimateshow)
    else
    ultimateshowCopy=ultimateshow

    function rotateimages(){
    curcycle=(currentslide==0)? curcycle+1 : curcycle
    ultcontainer='<center>'
    if (ultimateshowCopy[currentslide][1]!="")
    ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" target="'+ultimateshowCopy[currentslide][2]+'">'
    ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">'
    if (ultimateshowCopy[currentslide][1]!="")
    ultcontainer+='</a>'
    ultcontainer+='</center>'
    if (ie||dom)
    crossrotateobj.innerHTML=ultcontainer
    if (currentslide==ultimateshow.length-1) currentslide=0
    else currentslide++
    if (curcycle==parseInt(slidecycles) && currentslide==0)
    return
    setTimeout("rotateimages()",slidedelay)
    }

    if (ie||dom)
    document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

    function start_slider(){
    crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom
    rotateimages()
    }

    if (ie||dom)
    window.onload=start_slider

    </script>

    <br /><br />

    <script type="text/javascript">

    // Flexible Image Slideshow- By JavaScriptKit.com (http://www.javascriptkit.com)
    // For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
    // This notice must stay intact for use

    var ultimateshow=new Array()

    //ultimateshow[x]=["path to image", "OPTIONAL link for image", "OPTIONAL link target"]

    ultimateshow[0]=['http://www.site4/image4.jpg', 'http://www.site4.com/', '_new']
    ultimateshow[1]=['http://www.site5/image5.jpg', 'http://www.site5.com', '_new']
    ultimateshow[2]=['http://www.site6/image6.jpg', 'http://www.site6.com', '_new']








    //configure the below 3 variables to set the dimension/background color of the slideshow

    var slidewidth="250px" //set to width of LARGEST image in your slideshow
    var slideheight="250px" //set to height of LARGEST iamge in your slideshow
    var slidecycles="continous" //number of cycles before slideshow stops (ie: "2" or "continous")
    var randomorder="yes" //randomize the order in which images are displayed? "yes" or "no"
    var preloadimages="yes" //preload images? "yes" or "no"
    var slidebgcolor='white'

    //configure the below variable to determine the delay between image rotations (in miliseconds)
    var slidedelay=9000

    ////Do not edit pass this line////////////////

    var ie=document.all
    var dom=document.getElementById
    var curcycle=0

    if (preloadimages=="yes"){
    for (i=0;i<ultimateshow.length;i++){
    var cacheimage=new Image()
    cacheimage.src=ultimateshow[i][0]
    }
    }

    var currentslide=0

    function randomize(targetarray){
    ultimateshowCopy=new Array()
    var the_one
    var z=0
    while (z<targetarray.length){
    the_one=Math.floor(Math.random()*targetarray.length)
    if (targetarray[the_one]!="_selected!"){
    ultimateshowCopy[z]=targetarray[the_one]
    targetarray[the_one]="_selected!"
    z++
    }
    }
    }

    if (randomorder=="yes")
    randomize(ultimateshow)
    else
    ultimateshowCopy=ultimateshow

    function rotateimages(){
    curcycle=(currentslide==0)? curcycle+1 : curcycle
    ultcontainer='<center>'
    if (ultimateshowCopy[currentslide][1]!="")
    ultcontainer+='<a href="'+ultimateshowCopy[currentslide][1]+'" target="'+ultimateshowCopy[currentslide][2]+'">'
    ultcontainer+='<img src="'+ultimateshowCopy[currentslide][0]+'" border="0">'
    if (ultimateshowCopy[currentslide][1]!="")
    ultcontainer+='</a>'
    ultcontainer+='</center>'
    if (ie||dom)
    crossrotateobj.innerHTML=ultcontainer
    if (currentslide==ultimateshow.length-1) currentslide=0
    else currentslide++
    if (curcycle==parseInt(slidecycles) && currentslide==0)
    return
    setTimeout("rotateimages()",slidedelay)
    }

    if (ie||dom)
    document.write('<div id="slidedom" style="width:'+slidewidth+';height:'+slideheight+'; background-color:'+slidebgcolor+'"></div>')

    function start_slider(){
    crossrotateobj=dom? document.getElementById("slidedom") : document.all.slidedom
    rotateimages()
    }

    if (ie||dom)
    window.onload=start_slider

    </script>

  • #4
    New Coder
    Join Date
    Mar 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post

    This is really ancient, ancient code. Vintage 1999 or so, I'd guess.

    You can't find something more up to date? And that allows you to say how many banners to create?
    What Might You Recommend that will allow for a Random Order on each page load but goes through the entire array before repeating, and would allow for me to have more that one instance of the same script on the same page?

    You can see an example of the script in action on an article page on my site at _http://www.rceno.com/RCENO/news/local-news/party-at-city-hall-gets-shut-down-3-arrested/_ The 250x250 Banner Ads Directly to the right of the Article Title is powered by this script, I am limiting the number of ads per block to 10, so I will need to add another block directly below this one to add another 10 sponsors.

  • #5
    New Coder
    Join Date
    Mar 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is where the Script came from
    http://www.javascriptkit.com/script/...bleslide.shtml

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,603
    Thanks
    80
    Thanked 4,500 Times in 4,464 Posts
    Well, this script uses the same images for both banners.

    You could just add more links/images to the array and it would work fine.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    var ads = [
           ['http://www.rockinghamcountymerchants.com/CraigTravis/CraigTravis250x250.jpg',
            'http://tcraigtravis.com/'],
           ['http://www.rceno.com/RCENO/bannerads/elizabethspizza/elizabethspizza250x250.jpg',
            'http://www.rceno.com/RCENO/advertisers/elizabethspizza/index.html'],
           ['http://www.rceno.com/RCENO/bannerads/gavinsmightychamps/gavin250x250.jpg', 
            'http://www.gavinsmightychamps.com/index.html'],
           ['http://www.rceno.com/RCENO/bannerads/redrivergrill/RedRiver2420-250x250.jpg',
            'http://www.rockinghamcountymerchants.com/redrivergrill'],
           ['http://www.rceno.com/RCENO/bannerads/qualitycleaners/QC250x250-011510.jpg',
            'http://www.rockinghamcountymerchants.com/qualitycleaners']
        ];
    
    // preload the images:
    var adimages = [];
    for ( var i = 0; i < ads.length; ++i )
    {
        adimages[i] = new Image();
        adimages[i].src = ads[i][1];
    
    }
    
    var curad = 0;
    var numberOfAdSpots = 2;
    
    function nextad( )
    {
        for ( var inum = 1; inum <= numberOfAdSpots; ++inum )
        {
            adnum = ( curad + inum - 1 ) % ads.length;
            var link = document.getElementById("adlink" + inum);
            var image = link.getElementsByTagName("img")[0];
            link.href = ads[adnum][1];
            image.src = ads[adnum][0];
        }
        curad += numberOfAdSpots;
        setTimeout( nextad, 9000 ); // 9 seconds between changes
    }
    </script>
    <head>
    <body onload="nextad( );">
    <div>
       <a id="adlink1" href="" target="PopupAd"><img src="" style="height: 250px; width: 250px;"></a>
    </div>
    Then other stuff
    <div>
       <a id="adlink2" href="" target="PopupAd"><img src="" style="height: 250px; width: 250px;"></a>
    </div>
    </body>
    </html>
    If you really want two separate sets of image/links, it's not too much more work to do that.

    By the way, that code is tested and works.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #7
    New Coder
    Join Date
    Mar 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for your help, I'll try this one out, as I'm looking at 20-30 ads max for these two areas, and the way they switch between top and bottom really gives it more of a random feel....

    One Question, ok?

    If I add 20 ads...Will this script go through all 20 displayed before it repeats any that has already been seen? (That way I can atleast tell my sponsors that they will bee seen pretty much equally)

    Thanks Again for your help

    R

  • #8
    New Coder
    Join Date
    Mar 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    One more troublesome question...sorry...... I tested this in my HTML editor WORKS Great like you said..... but when I transfer it to the Wordpress theme (It's a custom theme and the Admin Panel has a block for code to insert the 250x250 ads) anyway when I take away the <head> </head>tags and insert the code also with out the <htm></html><body></body> so as not to interfere with the wordpress theme... It Shows Empty Holders with red Xs.....

    Sorry to be a pain, but can this script be made into one that doesn't need the <html><head><body> tags?

  • #9
    New Coder
    Join Date
    Mar 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Testing on the site using <iframe> tags at this time with 10 sponsors.... They seem to be going in a predetermined order...and not in Random Order.... Ok I looked back at the Previous Script and it has 5 sponsors so when it cycles it takes the first one and places in the bottom <div> and cycles but it is still in a Set order.... Could it be Random?

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,603
    Thanks
    80
    Thanked 4,500 Times in 4,464 Posts
    Try this variation:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    var ads = [
           ['http://www.rockinghamcountymerchants.com/CraigTravis/CraigTravis250x250.jpg',
            'http://tcraigtravis.com/'],
           ['http://www.rceno.com/RCENO/bannerads/elizabethspizza/elizabethspizza250x250.jpg',
            'http://www.rceno.com/RCENO/advertisers/elizabethspizza/index.html'],
           ['http://www.rceno.com/RCENO/bannerads/gavinsmightychamps/gavin250x250.jpg', 
            'http://www.gavinsmightychamps.com/index.html'],
           ['http://www.rceno.com/RCENO/bannerads/redrivergrill/RedRiver2420-250x250.jpg',
            'http://www.rockinghamcountymerchants.com/redrivergrill'],
           ['http://www.rceno.com/RCENO/bannerads/qualitycleaners/QC250x250-011510.jpg',
            'http://www.rockinghamcountymerchants.com/qualitycleaners']
        ];
    
    // preload the images:
    var adimages = [];
    for ( var i = 0; i < ads.length; ++i )
    {
        adimages[i] = new Image();
        adimages[i].src = ads[i][1];
    
    }
    
    var curad = 0;
    var lastad = null;
    
    var numberOfAdSpots = 2;
    
    // random re-ordering
    function scramble()
    {
        for ( var i = 0; i < ads.length; ++i )
        {
            var r = Math.floor( ads.length * Math.random() );
            var temp = ads[r];
            ads[r] = ads[i];
            ads[i] = temp;
        }
        if ( lastad == ads[0] )
        {
            ads[0] = ads[ads.length-1];
            ads[ads.length-1] = lastad;
        }
    }
    
    function getnextad( )
    {
        ad = ads[curad];
        ++ curad;
        if ( curad >= ads.length ) 
        {
            scramble();
            curad = 0;
        }
        lastad = ad;
        return ad;
    }
    
    function showNextSet( )
    {
        for ( var inum = 1; inum <= numberOfAdSpots; ++inum )
        {
            var link = document.getElementById("adlink" + inum);
            var image = link.getElementsByTagName("img")[0];
            var ad = getnextad();
            link.href = ad[1];
            image.src = ad[0];
        }
        setTimeout( showNextSet, 2000 ); // 9 seconds between changes
    }
    </script>
    <head>
    <body onload="scramble(); showNextSet();">
    <div>
       <a id="adlink1" href="" target="PopupAd"><img src="" style="height: 250px; width: 250px;"></a>
    </div>
    Then other stuff
    <div>
       <a id="adlink2" href="" target="PopupAd"><img src="" style="height: 250px; width: 250px;"></a>
    </div>
    </body>
    </html>
    Scrambles before it starts.
    Scrambles each time it has run through all ads.
    Ensures that the first ad shown after the scramble is not the same as last ad shown before scramble.
    Not perfect, but not bad.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    New Coder
    Join Date
    Mar 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks, Thanks So Very Much, You have been Very Gracious With Your Time.


  •  

    Posting Permissions

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