0

I don't know exactly where to start to display files from the file set in order to show a fancybox gallery on click. I would like to have the gallery open from a link. On click show the gallery, aka images that have the same rel but are set to display:none (easily controlled by my css). I can do it from selecting one image but am not sure how to pass the images from the file set into the view (I'm assuming I need to create some kind of function in my controller to get the fsID, just not sure how). I just need the first image to display on the page (thumbnail image), then click the link and it shows more full size images.

Basically, if you know Concrete5, I would like it to be like the image block, except that the administrator can choose a fileset instead of one image.

here is my view.php

$picture = $this->controller->getPicture();
if ($picture) {
    $bigPicture = $image->getThumbnail($picture,600,600)->src;
    $smallPicture = $image->getThumbnail($picture,200,200)->src;

    echo "<img src=" . $smallPicture . " alt=" . $imageTitle . " title=" . $imageTitle . "/>";//thumbnail picture
echo "<div id=\"image-modal\">";
echo "<a href=" . $bigPicture . " class=\"fancybox-thumb\" rel=" . $title . " title=" . $imageTitle . ">{$linkText}</a>";//open fancybox from link
echo "<div class=\"hiddenGallery\"  style=\"display:none;\">";//hidden images
    echo "<a href=\"images/pattern/t-103-n.jpg\" class=\"fancybox-thumb\" rel=" . $title . " title=" . $imageTitle . ">";
echo "<img src=\"images/pattern/t-103-n.jpg\" class=\"fancybox-thumb\" />";
echo "</a>";
    echo "</div>";
echo "</div>";
}

my controller.php

function getPicture() {
        if ($this->fIDpicture > 0) {
            return File::getByID($this->fIDpicture);
        }
        return null;
    }

my add.php

$al = Loader::helper('concrete/asset_library');
echo $al->image('ccm-b-image', 'fIDpicture', t('Choose File'),
    $this->controller->getPicture());
echo '</div>';

Any and all help is much appreciated.

user2066695
  • 75
  • 1
  • 1
  • 6

2 Answers2

0

Well, two things :

  • You have to set the class="fancybox-thumb" AND the rel attribute to the <a> tag!!, not to the <img /> tag.
  • If you are planing to hide the rest of the elements of the gallery, don't set a display: none; css property to each of them, but rather wrap them in a hidden <div> container like :

    <div style="display: none;">
      <a class="fancybox-thumb" rel="gallery" href="images/02.jpg"></a>
      <a class="fancybox-thumb" rel="gallery" href="images/03.jpg"></a>
      <a class="fancybox-thumb" rel="gallery" href="images/04.jpg"></a>
      ... etc
    </div>
    

I am using the rendered html, which is what it matters.

JFK
  • 40,963
  • 31
  • 133
  • 306
  • Mmm yes, I missed those finer details while I was focused on how to get the images to show in the first place. Thank you for the pointers! – user2066695 Feb 27 '13 at 17:57
0

I have some code which handles the entire back-end (add/edit/controller) part of this equation: https://github.com/jordanlev/c5_designer_gallery

Here's a tutorial that explains how to use it (with the example of the FlexSlider, but if you know how Fancybox works then it shouldn't be hard to understand what's going on): http://c5blog.jordanlev.com/blog/2011/12/build-a-slideshow-block/

Jordan Lev
  • 2,773
  • 2
  • 26
  • 39