Elastislide – Adding tags to thumbnail code.

  • Hi all

    I need a responsive thumbnail carousel in WordPress.

    I was going to use the Elastislide plugin – https://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/

    I don’t think I’ll have a problem using the plugin but I’m a bit stuck creating the thumbnail code.

    The code for the thumbnails needs to look like this.

    <li><a href="#"><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="Some description" /></a></li>

    [In future please wrap your code in backticks]

    I just wanted to add the images in a list in the content area.

    If I add images to the content area in WP, selecting the thumbnail size set in media settings and linking it to the image I get

    <li><a href="https://localhost/wordpress/12.jpg"><img class="alignnone size-thumbnail wp-image-18" alt="12" src="https://localhost/wordpress12-91x70.jpg" width="91" height="70" /></a></li>

    [In future please wrap your code in backticks]

    I could remove the link from the a herf with jquery or adding # to the Link URL of the image.

    Is it possible to add the ‘data-large’ tag with the image URL to the img tag

    Is this a jQuery job?

  • The topic ‘Elastislide – Adding tags to thumbnail code.’ is closed to new replies.