Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Unhappy Add attr to images in wordpress post

    Hey,

    I've been trying to figure this out all day, resulting in browser crashes from infinite loops and all sorts of stuff going on

    I've installed a lightbox script and would like to have it set so all images in one post are in the same gallery.

    You group the images by having them in the same "data-fancybox-group" attribute surrounding the image. E.g:
    Code:
    <a href="1.jpg" data-fancybox-group="0" class="fancybox" rel="fancybox"><img src="#.jpg"></a>
    I've managed to write a script to add the attribute to all the images:
    Code:
    var i = 0;
    var posts = jQuery("a:has(img)").filter( function() { return /(jpe?g|png|gif|bmp)$/i.test(jQuery(this).attr('data-fancybox-group',i)) });
    Which works fine, it sets all the images on the page to the same group.

    But I need each post to have different groups.

    I've been playing round with javascript all day and this is as close as I've got:
    Code:
    var post = jQuery("div.post");
    jQuery.each(post, function() {
    		jQuery("a:has(img)").filter( function() { return /(jpe?g|png|gif|bmp)$/i.test(jQuery(this))
    		jQuery(this).attr('data-fancybox-group',i);
    		i++
    	})
    But it doesn't work at all. Can someone give me a helping hand? I'm really at the end of my tether with this

    Each wordpress post is wrapped in a class named "post".

    Thanks so much!!

  • #2
    New to the CF scene
    Join Date
    May 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Damn. Didn't see the frameworks section - maybe this could be moved there? Thanks!

  • #3
    Regular Coder
    Join Date
    May 2012
    Location
    France
    Posts
    224
    Thanks
    0
    Thanked 32 Times in 30 Posts
    Try this...
    Code:
    var post = jQuery("div.post");
    jQuery.each(post, function(index) {
    		jQuery("a:has(img)").filter( function() { return /(jpe?g|png|gif|bmp)$/i.test(jQuery(this))
    		jQuery(this).attr('data-fancybox-group',index);
    	})

  • #4
    New to the CF scene
    Join Date
    May 2011
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Didn't work but I managed to reverse engineer it from a plugin. Here's the code if anybody's interested:

    Code:
    var thumbnails = jQuery("a:has(img)").filter( function() { return /(jpe?g|png|gif|bmp)$/i.test(jQuery(this).attr('href')) });
    var posts = jQuery(".post");
    posts.each(function() {
    	jQuery(this).find(thumbnails).attr("data-fancybox-group","post"+posts.index(this)).getTitle()
    });


  •  

    Tags for this Thread

    Posting Permissions

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