SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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
    HTML Code:
    <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:
    HTML Code:
    <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!

  2. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Looks like you left off a closing parentheses at the end of the .ready();

    e.g.
    Code:
    jQuery(document).ready(function() {
        jQuery(".gallery").wrap("<table><tr></tr></table>");
        jQuery(".gallery-item").wrap("<td></td>");
    }); //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.
    Code HTML4Strict:
    <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...)
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by extravaganzasd View Post
    in this case it is coming from the output of the WordPress "[gallery]" shortcode.
    You can control the markup generated by the [gallery] shortcode to a certain extent. There are 3 options:

    Quote Originally Posted by Wordpress Codex
    itemtag
    the name of the XHTML tag used to enclose each item in the gallery. The default is "dl".

    icontag

    the name of the XHTML tag used to enclose each thumbnail icon in the gallery. The default is "dt".

    captiontag

    the name of the XHTML tag used to enclose each caption. The default is "dd". For example, to change the gallery markup to use div, span and p tags:

    Code:
    [gallery itemtag="div" icontag="span" captiontag="p" link="file"]
    (See http://codex.wordpress.org/Gallery_Shortcode)


    Quote Originally Posted by extravaganzasd View Post
    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.
    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 :-)

    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 / slider / gallery plugins available for jQuery that will implement something similar for you with some nice animations attached as well.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }


Bookmarks

Posting Permissions

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