Recreating fancybox effect with image ID

• JustRunLah

• March 3, 2014 at 11:34 am

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']); ?>" />
</a>
<?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') ): ?>

	<?php
	$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: http://www.justrunlah.com/blog/race/ntuc-income-run-350/

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

Thanks in advance

• Elliot

• March 4, 2014 at 9:35 am

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?

Thanks
E

• JustRunLah

• March 4, 2014 at 12:53 pm

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: http://www.justrunlah.com/blog/race/safari-zoo-run-2014/

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

• JustRunLah

• March 4, 2014 at 1:01 pm

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 🙂

• JustRunLah

• March 5, 2014 at 10:42 pm

any luck with this..?

• Elliot

• March 7, 2014 at 10:08 am

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.

Thanks
E

• JustRunLah

• March 7, 2014 at 12:05 pm

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>

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