Forums

How to get the path of the "original" image from the path of its "cached" image?

Permalink
Hi Community,

My goal is to be able to display in a FancyBox any chosen images of a page content ("Content" block) to see it bigger.

I used a bit of jQuery to automatically wrap hyperlinks tags around images styled with the class "apply-fancybox-to-image". It looks like that and it does the trick:

// AUTO INSERTION OF FANCYBOX ON IMAGES
var images = $('#page img[class*="apply-fancybox-to-image"]');
$.each(images, function(key, img) {
  var imgSrc = $(img).attr('src');
  var comment = $(img).attr('alt');
  $(img).wrap('<a class="fancybox" data-fancybox-group="gallery" href="'+imgSrc+'" title="'+comment+'" />');
});


Here is the path of my image as given in the WYSIWYG editor ("Content" block) when I insert it:
/index.php/download_file/view_inline/73/

Then when I publish my edits here's the path of the same image in my page, which is a cached file:
/files/cache/bdd0e61c154d0fad6ab87f9891f64c7d.jpg

The problem is that the image passed to FancyBox is the same than the small image that is clicked on, so it stays small :(

My question is:
How can I get the path of the "original" image from the path of its "cached" image?

Is it clear??
Thanks!
stephanebeck
 
adajad replied on at Permalink Reply
adajad
jordanlev has posted an awesome blog post a while back where I think you will find your answers. He even supplies all code you will need as a starting point.

Check it out: http://c5blog.jordanlev.com/blog/2011/12/build-a-slideshow-block/...
stephanebeck replied on at Permalink Reply
stephanebeck
Thanks for your reply adajad, the tutorial you pointed out unfortunately don't help my case (quite different stuff) but is very interesting indeed.
adajad replied on at Permalink Reply
adajad
Since jQuery only applies to the rendered webpage you will only get the source of the images on the actual page (the cached ones).

If you look in jordanlevs controller from the blog post you can see where he is pulling the images into an array (processImageFiles function). In view.php he is looping through the array with a foreach like. 
<?php foreach ($images as $img): ?>
  <?php echo $img->title ?>:<br />
    <img src="<?php echo $img->orig->src ?>" width="<?php echo $img->orig->width ?>" height="<?php echo $img->orig->height ?>" alt="" />
<?php endforeach; ?>


The source would then be $img->orig->src for the original source.
So to get the original source to the FancyBox I suggest you either build your own block with jordanlevs C5 Designer Gallery, or install and use one of the blocks already available in the Marketplace and add your images using that block.

Have a look at Zoom Image by Remo
http://www.concrete5.org/marketplace/addons/zoom_image/...

or Zoom Image Dual by jordanlev which is compatible but requires a manual installation with 5.5.1. Jordanlev hasn't had the time yet to go through all his add-ons and themes since the 5.5.1 release.
http://www.concrete5.org/marketplace/addons/zoom-image-dual/...