Displaying random banner AD above each photo

offroadpaparazzi

I'd like to start showing my own non intrusive Ads above each photo as they are viewed. All the images are the same size (468x60) and stored in a private gallery. Viewers would need to be able to click on them to open associated content in a new window. Right now I can only display one at a time.

Anyone here know how to do this?

thanks

-art

thenickdude

Do you mean displaying them in the lightbox? Or just at the top of the gallery?

offroadpaparazzi

I guess I don't know what lightbox is.

Here is my example gallery: http://www.offroadpaparazzi.com/Other/For-NETRA/Misc/n-fQzHg/i-63DqTZs

it is the "MVTR" banner.

thanks

ChancyRat

offroadpaparazzi wrote: »

I guess I don't know what lightbox is.

Here is my example gallery: http://www.offroadpaparazzi.com/Other/For-NETRA/Misc/n-fQzHg/i-63DqTZs

it is the "MVTR" banner.

thanks

If you click on the large image to the right, it "opens" to most of the browser, or much of the browser window. That's "lightbox mode".

offroadpaparazzi

ChancyRat wrote: »

If you click on the large image to the right, it "opens" to most of the browser, or much of the browser window. That's "lightbox mode".

Now I understand.

It would be great to get my ads there but not required. As long as I can get them in the galleries I'd be pretty happy.

thenickdude

I can probably adapt my "new background photo on every refresh" code to do that, how many banners do you currently have?

offroadpaparazzi

I'm shooting for 10 banners. Right now I have one committed and a few possibles.

thenickdude

Okay, add an HTML block to the page with this HTML code (each <div> at the top level is a different banner that'll be randomly picked, so you can fill in an image and link for each):

<div>
  <a href="http://www.mvtr.org/" target="_blank">
    <img src="http://www.offroadpaparazzi.com/photos/i-XvQ5CHz/0/S/i-XvQ5CHz-S.jpg" alt="" />
  </a>
</div>
<div>
  <a href="http://www.mvtr.org/" target="_blank">
    <img src="http://www.offroadpaparazzi.com/photos/i-xzfZ7bP/0/M/i-xzfZ7bP-M.jpg" alt="" />
  </a>
</div>
<div>
  <a href="http://www.mvtr.org/" target="_blank">
    <img src="http://www.offroadpaparazzi.com/photos/i-XvQ5CHz/0/S/i-XvQ5CHz-S.jpg" alt="" />
  </a>
</div>
<div>
  <a href="http://www.mvtr.org/" target="_blank">
    <img src="http://www.offroadpaparazzi.com/photos/i-xzfZ7bP/0/M/i-xzfZ7bP-M.jpg" alt="" />
  </a>
</div>
<div>
  <a href="http://www.mvtr.org/" target="_blank">
    <img src="http://www.offroadpaparazzi.com/photos/i-XvQ5CHz/0/S/i-XvQ5CHz-S.jpg" alt="" />
  </a>
</div>
<div>
  <a href="http://www.mvtr.org/" target="_blank">
    <img src="http://www.offroadpaparazzi.com/photos/i-xzfZ7bP/0/M/i-xzfZ7bP-M.jpg" alt="" />
  </a>
</div>
<div>
  <a href="http://www.mvtr.org/" target="_blank">
    <img src="http://www.offroadpaparazzi.com/photos/i-XvQ5CHz/0/S/i-XvQ5CHz-S.jpg" alt="" />
  </a>
</div>
<div>
  <a href="http://www.mvtr.org/" target="_blank">
    <img src="http://www.offroadpaparazzi.com/photos/i-xzfZ7bP/0/M/i-xzfZ7bP-M.jpg" alt="" />
  </a>
</div>
<div>
  <a href="http://www.mvtr.org/" target="_blank">
    <img src="http://www.offroadpaparazzi.com/photos/i-XvQ5CHz/0/S/i-XvQ5CHz-S.jpg" alt="" />
  </a>
</div>
<div>
  <a href="http://www.mvtr.org/" target="_blank">
    <img src="http://www.offroadpaparazzi.com/photos/i-xzfZ7bP/0/M/i-xzfZ7bP-M.jpg" alt="" />
  </a>
</div>

And this CSS on the CSS tab:

.sm-page-widget-body div {
	display:none;	
}
.sm-page-widget-body[id$='a'] div:nth-of-type(1), .sm-page-widget-body[id$='b'] div:nth-of-type(1), .sm-page-widget-body[id$='c'] div:nth-of-type(1), .sm-page-widget-body[id$='d'] div:nth-of-type(1), .sm-page-widget-body[id$='e'] div:nth-of-type(1), .sm-page-widget-body[id$='f'] div:nth-of-type(1),
.sm-page-widget-body[id$='g'] div:nth-of-type(2), .sm-page-widget-body[id$='h'] div:nth-of-type(2), .sm-page-widget-body[id$='i'] div:nth-of-type(2), .sm-page-widget-body[id$='j'] div:nth-of-type(2), .sm-page-widget-body[id$='k'] div:nth-of-type(2), .sm-page-widget-body[id$='l'] div:nth-of-type(2),
.sm-page-widget-body[id$='m'] div:nth-of-type(3), .sm-page-widget-body[id$='n'] div:nth-of-type(3), .sm-page-widget-body[id$='o'] div:nth-of-type(3), .sm-page-widget-body[id$='p'] div:nth-of-type(3), .sm-page-widget-body[id$='q'] div:nth-of-type(3), .sm-page-widget-body[id$='r'] div:nth-of-type(3), .sm-page-widget-body[id$='s'] div:nth-of-type(3),
.sm-page-widget-body[id$='t'] div:nth-of-type(4), .sm-page-widget-body[id$='u'] div:nth-of-type(4), .sm-page-widget-body[id$='v'] div:nth-of-type(4), .sm-page-widget-body[id$='w'] div:nth-of-type(4), .sm-page-widget-body[id$='x'] div:nth-of-type(4), .sm-page-widget-body[id$='y'] div:nth-of-type(4),
.sm-page-widget-body[id$='z'] div:nth-of-type(5), .sm-page-widget-body[id$='A'] div:nth-of-type(5), .sm-page-widget-body[id$='B'] div:nth-of-type(5), .sm-page-widget-body[id$='C'] div:nth-of-type(5), .sm-page-widget-body[id$='D'] div:nth-of-type(5), .sm-page-widget-body[id$='E'] div:nth-of-type(5),
.sm-page-widget-body[id$='F'] div:nth-of-type(6), .sm-page-widget-body[id$='G'] div:nth-of-type(6), .sm-page-widget-body[id$='H'] div:nth-of-type(6), .sm-page-widget-body[id$='I'] div:nth-of-type(6), .sm-page-widget-body[id$='J'] div:nth-of-type(6), .sm-page-widget-body[id$='K'] div:nth-of-type(6),
.sm-page-widget-body[id$='L'] div:nth-of-type(7), .sm-page-widget-body[id$='M'] div:nth-of-type(7), .sm-page-widget-body[id$='N'] div:nth-of-type(7), .sm-page-widget-body[id$='O'] div:nth-of-type(7), .sm-page-widget-body[id$='P'] div:nth-of-type(7), .sm-page-widget-body[id$='Q'] div:nth-of-type(7),
.sm-page-widget-body[id$='R'] div:nth-of-type(8), .sm-page-widget-body[id$='S'] div:nth-of-type(8), .sm-page-widget-body[id$='T'] div:nth-of-type(8), .sm-page-widget-body[id$='U'] div:nth-of-type(8), .sm-page-widget-body[id$='V'] div:nth-of-type(8), .sm-page-widget-body[id$='W'] div:nth-of-type(8), .sm-page-widget-body[id$='X'] div:nth-of-type(8),
.sm-page-widget-body[id$='Y'] div:nth-of-type(9), .sm-page-widget-body[id$='Z'] div:nth-of-type(9), .sm-page-widget-body[id$='0'] div:nth-of-type(9), .sm-page-widget-body[id$='1'] div:nth-of-type(9), .sm-page-widget-body[id$='2'] div:nth-of-type(9), .sm-page-widget-body[id$='3'] div:nth-of-type(9),
.sm-page-widget-body[id$='4'] div:nth-of-type(10), .sm-page-widget-body[id$='5'] div:nth-of-type(10), .sm-page-widget-body[id$='6'] div:nth-of-type(10), .sm-page-widget-body[id$='7'] div:nth-of-type(10), .sm-page-widget-body[id$='8'] div:nth-of-type(10), .sm-page-widget-body[id$='9'] div:nth-of-type(10) {
	display: block;
}

Want to centre the banners inside the block? Add this CSS:

.sm-page-widget-body div {
  text-align:center;
}

offroadpaparazzi

That works great! Thanks!!!!!!

Now the icing on the cake would be to make it refresh with each photo view. (-: (possibly the lightbox??)

thanks again..

-art

thenickdude

Sorry, no can do on that one. The best you could do would be to have the banner change on a timer, but it'd be pretty awkward because it could change while you're trying to click on it.

offroadpaparazzi

OK, no worries

offroadpaparazzi

How easy would it be to add a timer? I think it would be great if they faded to another banner every 15 seconds or so.