JQuery Wrap Problem

I am trying to wrap a div in a <table> and <tr> tags and a number of dynamic <dl> tags with <td> tags. Here is the code I am using the the head tag

<script type="text/javascript">
    jQuery(document).ready(function() {
	jQuery(".gallery").wrap("<table><tr></tr></table>");
		jQuery(".gallery-item").wrap("<td></td>");
		}
</script>  

The code that I am trying to manipulate is:


<div id='gallery-1' class='gallery galleryid-249 gallery-columns-9 gallery-size-thumbnail'><dl class='gallery-item'>
			<dt class='gallery-icon'>
				<a href='http://tendliving.com/beta/test-gallery/art-glass-web-ready-1-of-54/' title='art glass web ready (1 of 54)'><img width="150" height="150" src="http://tendliving.com/beta/wp-content/uploads/2012/01/art-glass-web-ready-1-of-54-150x150.jpg" class="attachment-thumbnail" alt="art glass web ready (1 of 54)" title="art glass web ready (1 of 54)" /></a>
			</dt></dl>

It is having no impact though. It is a WordPress site and my page is at http://tendliving.com/beta/test-gallery/ (to view user and pass are both"test"). Any help is really appreciated!

Looks like you left off a closing parentheses at the end of the .ready();

e.g.


jQuery(document).ready(function() {
    jQuery(".gallery").wrap("<table><tr></tr></table>");
    jQuery(".gallery-item").wrap("<td></td>");
}[COLOR=#ff0000]);[/COLOR] //make sure you close of the .ready() method here

I’ll also add that using definition lists (<dl>) in this manner would probably be wrong tag to use from a semantics point of view, especially if you’re not using the description part and using one <dl> per gallery item. (See http://www.maxdesign.com.au/articles/definition/ for more info on definition lists :-)).

It would probably be better to use an unordered list to markup the gallery images, e.g.


<ul  id="gallery-1" class="gallery galleryid-249 gallery-columns-9 gallery-size-thumbnail">
  <li> 
    <a href="http://example.com/link/">
      <img width="150" height="150" src="image.jpg" class="attachment-thumbnail" alt="Alt text here" />
    </a> 
  </li>
  <li> <a href="http://example.com/link/"> <img width="150" height="150" src="image.jpg" class="attachment-thumbnail" alt="Alt text here" /> </a> </li>
  <li> <a href="http://example.com/link/"> <img width="150" height="150" src="image.jpg" class="attachment-thumbnail" alt="Alt text here" /> </a> </li>
</ul>

Of course if this is all generated code via a wordpress plugin or something like that, you might not be able to modify the markup without modifying the plugin, (unless it has templates you can define of course).

Is there a particular reason you’re trying to wrap a table around your gallery anyway? What are you trying to achieve? (There might be easier / better ways…)

Wow thanks John! That was it. I don’t use JQuery that much directly so I am always nervous - it looks like I ALMOST had it - thanks for spotting the omission. You are right about it being generated content - in this case it is coming from the output of the WordPress “[gallery]” shortcode. I am using a table because I am trying to force a horizontal scroll - rather than having the images wrap. Obviously I am still not there yet but this gets me closer.

You can control the markup generated by the [gallery] shortcode to a certain extent. There are 3 options:

(See http://codex.wordpress.org/Gallery_Shortcode)

Are you trying to achieve a horizontal scroll on the entire page or just 1 section? Both of these can be done with just a few lines of CSS, no JavaScript (or tables) required :slight_smile:

Take a look at this JS Fiddle - http://jsfiddle.net/GeekyJohn/QgC4Z/embedded/result/ - in which you’ll see two lists that are scrolling horizontally, 1 that makes the page scroll and 1 that scrolls in place.

Of course there are many carousel / [URL=“http://designmodo.com/jquery-image-sliders/”]slider / [URL=“http://www.1stwebdesigner.com/css/fresh-jquery-image-gallery-display-solutions/”]gallery plugins available for jQuery that will implement something similar for you with some nice animations attached as well.