Random Image Javascript

General web design discussion, including HTML, CSS, and JavaScript

Random Image Javascript

Postby gsw28 » Fri Dec 07, 2012 4:55 pm

So I have ads running on my website and I'm using the below java script code to randomly show ads and link them to the advertiser. How can I use MagicEdit to update the ads / links? And does MagicEdit have a better way to do this than using the java-script code that I have here?
Here is my website and the ads are on the right side of the page: http://rtt11.cust.magicedit.com/flicks.html

thank you!

(The code below is an example of what I'm using)

<!-- begin ads javascript -->
var imagenumber = 17 ;
var randomnumber = Math.random(2) ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;
images = new Array
images[1] = "assets/ads/ad1.jpg"
images[2] = "assets/ads/ad2.jpg"
images[3] = "assets/ads/ad3.jpg"

var image = images[rand1] ;
var linknumber = 17;
var img1 = Math.round( (linknumber-1) * randomnumber) + 1 ;
links = new Array

links[1] = "http://www.link_to_advertiser_1.com/"
links[2] = "http://www.link_to_advertiser_2.com/"
links[3] = "http://www.link_to_advertiser_3.com/"

var link = links[img1];
document.write('<a href="' + link + '"><img src="' + image + '" border="0"></a>') ;
<!--end of ads javascript -->
gsw28
 
Posts: 8
Joined: Fri Dec 07, 2012 4:40 pm

Re: Random Image Javascript

Postby raw10 » Sun Dec 09, 2012 10:52 am

I put together a quick demo of how a solution might work that's managed with MagicEdit. The idea would be to have an admin-only page that lets you easily create new advertisements, along with a link that allows a click-through.

MagicEdit doesn't have a randomizer built-in, so we'll use a bit of JavaScript (aided by jQuery) to take care of that part.

Here's the code for where the ad should go:

Code: Select all
<magicrepeat me_name="ads" me_hidebuttons>
  <div class="ad" style="display:none">
    <a class="link" href="#" magicedit me_name="link" me_hidebuttons><img magicedit me_name="banner" me_hidebuttons /></a>
  </div>
</magicrepeat>

<p cl_visible="=CLManager.activeAccount:isAdmin"><a href="manageAds.html">Manage Ads</a></p>

// Leave next line off if already including jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $(".ad").eq(Math.floor(Math.random() *  $(".ad").length)).show();
  });
</script>


Now, to easily manage ads we just create a "manageAds.html" page with the following code on it:

Code: Select all
<ul style="list-style-type:none">
  <magicrepeat me_name="ads">
    <li style="padding-bottom:15px">
      <img magicedit me_name="banner" src="http://placehold.it/200x200&text=Ad+Image" style="display:block"/>
      <p>Banner Link: <a href="#" magicedit me_name="link" class="link"><span></span></a></p>
    </li>
  </magicrepeat>
</ul>

// Leave next line off if already including jQuery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
  // Here's a little script that shows the link URL. This is optional.
  $(document).ready(function() {
    $(".link").each(function() {
      var thisHref = $(this).attr("href");
      if ( thisHref.substring(0,1) != "#" )
      $("span", this).text(thisHref);
    });
  });
</script>


That's it! Here's a quick demo and download. To try it out, click the login link in the upper right, then click through to the manageAds page and add a few images and links.

DEMO | DOWNLOAD

Note that this doesn't use MagicEdit's image sizing; we're assuming that the ad is already formatted correctly. Here are some advantages of this method:

1. Banner images and links are easily managed with MagicEdit
2. Nothing is hard-coded into the script
3. Any number of ads can be included in the site
raw10
 
Posts: 81
Joined: Tue Apr 12, 2011 2:46 pm

Re: Random Image Javascript

Postby gsw28 » Mon Dec 10, 2012 2:57 pm

This code works really well! Thank you.

As of right now the code display one ad. Is there a way that i can display two ads at a time? Or would I need to duplicate the code?
gsw28
 
Posts: 8
Joined: Fri Dec 07, 2012 4:40 pm

Re: Random Image Javascript

Postby gsw28 » Wed Dec 19, 2012 2:27 pm

Is there a way to make the javascript display two ads at a time? I was trying me_maxitems="2" but that doesn't do anything. Please help.
gsw28
 
Posts: 8
Joined: Fri Dec 07, 2012 4:40 pm

Re: Random Image Javascript

Postby raw10 » Wed Dec 19, 2012 3:16 pm

You don't want to use me_maxitems in this case, since you want the script to be able to randomly choose from among all of the ads.

The challenge is to select another ad, but not the one that was already chosen randomly. The simplest thing to do is show the next ad, or if the last one is chosen, show the first one. So it will always show the ads in the same order, but a random two within the range.

Here's a script to do that:

Code: Select all
<script>
  $(document).ready(function() {
    var range = $(".ad").length;
    var rand = Math.floor(Math.random() * ($(".ad").length));

    if (rand == range - 1) {
      var $next = $(".ad").first();
     
      $(".ad").eq(rand).show().after($next);
      $next.show();
    }
    else
      $(".ad").eq(rand).show().next(".ad").show();
  });
</script>


Just replace the existing script you were using, and now you should see two ads instead of one. For example, if you have 10 ads, it will randomly show two in a row except when the last one is chosen: like 3 and 4, or 7 and 8, or 10 and 1.

[edit] Changed .append() to .after(), since the first ad should be inserted after the last one (in the case where the last one is selected), not inside the container.
raw10
 
Posts: 81
Joined: Tue Apr 12, 2011 2:46 pm

Re: Random Image Javascript

Postby guiding » Tue Jan 15, 2013 6:13 pm

Here's a simple script to display 9 random images. You can place this anywhere inside the body.

Code: Select all
<script type="text/javascript">
document.write ('<img src="images/random-' + Math.floor((Math.random()*9)+1) + '.jpg">');
</script>


In the example above you would need to place your random images inside a folder named images. You also need to name them random-1.jpg, random-2.jpg, random-3.jpg and so forth. To increase or decrease the number of random images change the 9 in Math.random()*9.

Hope this helps.
guiding
 
Posts: 17
Joined: Tue Jan 15, 2013 1:45 pm


Return to Web Design

Who is online

Users browsing this forum: No registered users and 1 guest

cron