WordPress.org

Ready to get started?Download WordPress

Forums

retrieve second image? (5 posts)

  1. cacoe
    Member
    Posted 4 years ago #

    There are many ways to retrieve the first image uploaded for any particular post. I am currently using a script which does this (in the form of grid-a-licious).

    I also would like to retrieve the url of a second, larger image to intergrate fancybox. Is there a way to do this for the second image, as well as the first?

    I currently have my template setup to use a custom field to input the larger image url but I'd like to upload the first image (the thumbnail) and then the larger image which fancybox will use. I've attempted to use timThumb to automatically create the thumb but mashing so much, rather complex PHP seems a bit difficult for this PHP noob. Retreiving a second image seems like a simpler, yet less elegent solution...

  2. tugbucket
    Member
    Posted 4 years ago #

    If your sure that the first image you are inserting is going to always be the one you click to fire Fancybox, you can do something like this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    
    <script type="text/javascript">
    $(document).ready(function() {
    
    // get the URL of the second image
    var imageURL = $('.post img:eq(1)').attr('src');
    
    // get the alt text of the first image
    var imageTitle = $('.post img:eq(0)').attr('alt');
    
    // wrap the first image in a link pointing to the second image and using the alt text as the caption for fancybox
    $('.post img:eq(0)').wrap('<a href="'+imageURL+'" title="'+imageTitle+'"></a>');
    
    // hide the second image since it's going to be displayed with fancy box
    $('.post img:eq(1)').css({'display' : 'none'});
    
    });
    </script>
    
    </head>
    <body>
    <div class="post">
    <img src="icandeathstartoo.GIF" alt="Your Title" />
    <img src="yukigaya.jpg" />
    <img src="twitme2.jpg" />
    </div>
    </body>
    </html>

    There are comments in the JS so it should be straight forward to see whats going on.

  3. cacoe
    Member
    Posted 4 years ago #

    Sorry, I don't think I got what I was trying to achieve across very well..

    I would simply like to make this script provide the second image, rather than the first?.. (I'm already using the 1st image for a thumbnail, the 2nd uploaded image will be the full image. I'm doing this to get better control over image resizing and sharpening in photoshop rather than relying on a php script to do that.)
    http://wordpress.org/support/topic/246893?replies=19

  4. tugbucket
    Member
    Posted 4 years ago #

    i think you can change:

    $first_img = $matches [1] [0];

    to say:

    $first_img = $matches [2] [1];

  5. cacoe
    Member
    Posted 4 years ago #

    Thanks a lot, I'll try that later. My eyes were drawn to that section but I would have probably just tried changing it to [2] [0];

Topic Closed

This topic has been closed to new replies.

About this Topic