Home › Forums › General Issues › 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']); ?>" />
</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/
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?
Thanks
E
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
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 🙂
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
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
The topic ‘Recreating fancybox effect with image ID’ is closed to new replies.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.