Ad gallery for wordpress

CMS & WordPress
1

Hi all,

So I’m banging my head against the wall, because I’m out of my depth on this one.

So I have a HTML site which uses the ad-gallery plug-in (www.coffeescripter/code/ad-gallery/). It works fine. Now I want to implement it into wordpress, so that the end user can edit the content at her leisure.

WordPress uses the [gallery] short code to implement a gallery, which enables clever functionality, like the ability to re-order images, and edit their captions etc. Which is a desirable thing to keep. The [gallery] shortcode is defined in wp-includes/media.php, and uses tags like dl dt and dd as mark-up, which is not ad-gallery friendly.

So the question is, what now? How do I convert the HTML gallery to WP friendly mark-up whilst still keeping the functionality of the ad-gallery plug-in? I know it’s possible cause Streetlight Media have done it here:

http://nasrinjeanbaptiste.com/fashion

I haven’t got a demo page up atm, but here is my HTML code:


<div id="gallery" class="ad-gallery">
      <div class="ad-image-wrapper">
      </div>
      <div id="description"></div>
      <div class="ad-controls">
      </div>
      <div class="ad-nav">
        <div class="ad-thumbs">
          <ul class="ad-thumb-list">
            <li>
              <a href="../../Documents/Quiz Master Mike/images/favor_big.jpg">
                <img src="../../Documents/Quiz Master Mike/images/favor.jpg" title="Favor" alt="Yup, it's favor alright.." class="image0">
              </a>
            </li>
            <li>
              <a href="../../Documents/Quiz Master Mike/images/Glamour.jpg">
                <img src="../../Documents/Quiz Master Mike/images/Glamoura.jpg" title="Glamour" alt="Well, yeah, that's quite a descriptive title I guess, not really much else to say there, huh." class="image1">
              </a>
            </li>
            <li>
              <a href="../../Documents/Quiz Master Mike/images/zoo1.jpg">
                <img src="../../Documents/Quiz MAster Mike/images/zooa.jpg" title="Zoo 1" alt="The first of the Zoo images" class="image2">
              </a>
            </li>
            <li>
              <a href="../../Documents/Quiz Master Mike/images/zoo2.jpg">
                <img src="../../Documents/Quiz Master Mike/images/zoob.jpg" title="Zoo 2" alt="The second of the Zoo images" class="image3">
              </a>
            </li>
            
          </ul>
        </div>
      </div>
    </div>

And here’s the mark-up that WordPress outputs when the [gallery] shortcode is used:


<div id='gallery-1' class='gallery galleryid-30'><dl class='gallery-item'> 
			<dt class='gallery-icon'> 
				<a href='http://quizmastermike.co.uk/image-gallery/favor_big/' title='Favor'><img width="80" height="80" src="http://quizmastermike.co.uk/wp-content/uploads/2010/10/favor_big-150x150.jpg" class="attachment-thumbnail" alt="Crazy strip light costume" title="Favor" /></a> 
			</dt> 
				<dd class='gallery-caption'> 
				Crazy strip light costume
				</dd></dl><dl class='gallery-item'> 
			<dt class='gallery-icon'> 
				<a href='http://quizmastermike.co.uk/image-gallery/zoo1/' title='zoo1'><img width="80" height="80" src="http://quizmastermike.co.uk/wp-content/uploads/2010/10/zoo1-150x150.jpg" class="attachment-thumbnail" alt="Another Zoo image" title="zoo1" /></a> 
			</dt> 
				<dd class='gallery-caption'> 
				Another Zoo image
				</dd></dl><dl class='gallery-item'> 
			<dt class='gallery-icon'> 
				<a href='http://quizmastermike.co.uk/image-gallery/glamour/' title='Glamour'><img width="80" height="80" src="http://quizmastermike.co.uk/wp-content/uploads/2010/10/Glamour-150x150.jpg" class="attachment-thumbnail" alt="Glamourous kinda photo" title="Glamour" /></a> 
			</dt> 
				<dd class='gallery-caption'> 
				Glamourous kinda photo
				</dd></dl><br style="clear: both" /><dl class='gallery-item'> 
			<dt class='gallery-icon'> 
				<a href='http://quizmastermike.co.uk/image-gallery/zoo2/' title='The second zoo image'><img width="80" height="80" src="http://quizmastermike.co.uk/wp-content/uploads/2010/10/zoo2-150x150.jpg" class="attachment-thumbnail" alt="Chimpanzees, Elephants, you know, **** like that" title="The second zoo image" /></a> 
			</dt> 
				<dd class='gallery-caption'> 
				Chimpanzees, Elephants, you know, **** like that
				</dd></dl> 
			<br style='clear: both;' /> 
		</div>

The ad-gallery plug-in is called using the class of the gallery div, in this case $(‘.ad-gallery’), like this: $(‘.ad-gallery’).adGallery(); but presumably, the unique id of the WP gallery could be used instead: $(‘.gallery’), or $(‘#gallery-1’) I guess.

Any clues would be great!

Cheers,
Mike

2

I did a search for ad gallery, the plugin I linked to came up because:

The first version of this plugin incorporates the awesome AD Gallery script developed by Anders Ekdahl over at CoffeeScripter.com

3

Just had a quick look on my iPhone, that looks like the perfect solution, I would never have known it was there. No mention of it on the coffeescripter site.

Many thanks Ryan,
Mike

4

Yeah, dunno how I missed it. Great plugin… works like a charm. Took me all of five minutes to implement it.

Once again, thanks.

Mike

5

the link to the ad-gallery is down.

Are you using: http://wordpress.org/extend/plugins/gallery-objects/