Home Forums General Issues Recreating fancybox effect with image ID


Recreating fancybox effect with image ID

  • Hello,

    When I am using images with Object like this:

    <?php if( get_field('race_map_1') ): ?>
    <a href="<?php $image = get_field('race_map_1'); echo($image['sizes']['large']); ?>">
     <img alt="" src"<?php $image = get_field('race_map_1'); echo($image['sizes']['large']); ?>" />
    <?php endif; ?>

    I am getting the fancybox effect onclick (which is what I want).

    However, for some images I need to use ID, and I cannot recreate this effect. Instead when I click on the image it takes me on the full image url.

    My code when using ID looks like this:

    <?php if( get_field('race_logo') ): ?>
    	$attachment_id = get_field('race_logo');
    	$size = "medium"; // (thumbnail, medium, large, full or custom size)
    	$image = wp_get_attachment_image_src( $attachment_id, $size );
    	$large_img_src = wp_get_attachment_image_src( $attachment_id,"large" );
    				// url = $image[0];
    				// width = $image[1];
    				// height = $image[2];
    <a href=" <?php echo $large_img_src[0]; ?> "> <img alt="" src="<?php echo $image[0]; ?>" /></a>				
    <?php endif; ?>

    I have also used rel="fancybox", rel="lightbox" on <a but to no luck.

    If you want to see a live example, try clicking a) on the logo of the race (ID) and b) on a map (Object) here:

      In short, is it possible to recreate the above code/effect when returning image ID?

    Thanks in advance

  • Hi @JustRunLah

    I have looked at your website, and can see that all images are rendering correctly and your JS is creating the correct fancybox.

    Perhaps you have fixed the issue?


  • Hi,

    Thanks for the reply, but no the issue is still unresolved..

    Perhaps I didn’t make myself clear, let me try again 🙂

    Please visit:

    Then click on the Race logo (the brown square on the top left of the page, right above the star rating). This takes you to a new page showing the image file.

    Now, try clicking on a “Route Map” (further down in the same page). It pops up the fancybox, displaying the image.

    What I want to do, is make it for the Logo to behave the same way (fancybox pop-up instead of redirecting to the image url). For the maps I return the “object”, while for the logo, I return the “ID”.

    I have pasted the codes for both cases on my original post. So, is it possible to recreate effect of code no.1 with ID (code no.2)?

    thanks a lot

  • Oh by the way, this might help:

    I am using “Light – Responsive LightBox” plugin, which says
    “Automatically makes all images that link to other images into a responsive lightbox, using FancyBox from FancyApps.”

    Could it be that when using the ID, this plugin does not “understand” that it is actually an image object? I don’t know if that makes sense to you 🙂

  • any luck with this..?

  • Hi @JustRunLah

    I clicked on the brown logo image and it appeared in a fancybox.

    Perhaps you have a JS error for your browser or user when logged in.


  • Hi Elliot,

    Actually, I realised that I don’t need to work with “ID” at all. Instead, I can use “Object” type and still have a custom size as a thumbnail.

    So what I do now is have a function like this:

    	* Add automatic image sizes
           if ( function_exists( 'add_image_size' ) ) { 
    	add_image_size( 'smallsquare', 45, 45, false ); //false: soft prop crop, true: hard crop

    which creates ‘smallsquare’.

    So I can use ‘smallsquare’ with Object and get done what I wanted like this:

    <a href="<?php the_field('race_website') ?>" target=_new>
    						<img class="race_wiki_img" alt="" src="<?php $image = get_field('race_logo'); echo($image['sizes']['smallsquare']); ?>" />

    A very friendly suggestion, perhaps make this clearer in the docs for future users? The way it is written I got the idea that only predefined sizes can be used with Object, but if you want custom sizes you need to use ID.

    Thanks for the help

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Recreating fancybox effect with image ID’ is closed to new replies.