Forums

Multiple images attribute to display a slideshow with thumbnails

Permalink
Hoping someone can help me out here. I am using Tony's Multi-File Attribute to allow users to upload multiple images of their property to a custom page type I have setup in Composer (Dashboard Page Manager), and need to show them in a slideshow with thumbnails.

I can get the file paths to display the paths using....
<?php $page = Page::getCurrentPage();
                  $images = $page->getAttribute('property_images');
                  $getFiles = MultipleFilesAttributeTypeController::getFiles($images);
                  foreach($getFiles as $file){
                     echo $file->getVersion()->getRelativePath();
                  }?>


I ultimately need to display these images in a slideshow with thumbnails under it. Trying to use FlexSlider. Any help would be awesome! BTW I am using 5.6.2.1

Thank you.
 
MrKDilkington replied on at Permalink Reply
MrKDilkington
Hi aaronmarp,

You could give this a try:
<div class="flexslider">
    <ul class="slides">
        <?php 
        $page = Page::getCurrentPage();
        $images = $page->getAttribute('property_images');
        $getFiles = MultipleFilesAttributeTypeController::getFiles($images);
        foreach($getFiles as $file){
            echo '<li><img src="' . $file->getVersion()->getRelativePath() . '"></li>';
        }
        ?>
    </ul>
</div>

http://flexslider.woothemes.com/...
aaronmarp replied on at Permalink Reply
Thanks for that, although it doesn't create a slideshow. All the images show up as <li> only and go all the way down the page. I have flexslider installed as well. Am I missing something? A helper or something?

I need to try and create thumbnails as well. But mostly need the slideshow to work.
MrKDilkington replied on at Permalink Reply
MrKDilkington
@aaronmarp

It won't create the slideshow on its own, it still needs the FlexSlider JavaScript call.
http://flexslider.woothemes.com/...

Example from the FlexSlider site:
- what the HTML should look like
<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
Viewing 15 lines of 17 lines. View entire code block.

- the JavaScript
// Can also be used with $(document).ready()
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide"
  });
});


I don't have any experience with 5.6 and am not sure what is returned from getFiles(), but you said you were getting the file paths to the images to display. The image path can then be used as the img src and the opening and closing li can be added. The rest is the example HTML.

How many image attributes are you using?

You said the li tags show up without images. Did you inspect the img src inside them to see what was being added?
aaronmarp replied on at Permalink Reply
The images ARE showing up in the <li>'s. Just no joy on the slideshow. I inserted the JS call and still no love. I get this error "Uncaught TypeError: $(...).flexslider is not a function". Unsure what I am missing...
MrKDilkington replied on at Permalink Reply
MrKDilkington
@aaronmarp

Is the FlexSlider script file linked to and loaded in your page?
aaronmarp replied on at Permalink Reply
Flexslider is installed via the dashboard. And I put the script in my footer after 
<?php   Loader::element('footer_required'); ?>
. I originally just had it in my page type template.
MrKDilkington replied on at Permalink Reply
MrKDilkington
@aaronmarp

Have you checked to make sure jQuery and FlexSlider are both loaded?

What does your script look like to call .flexslider()?
aaronmarp replied on at Permalink Reply
I got it working! The problem (I think) was because even though Flexslider was installed in C5, it wasn't loading because I didn't place a flexslider block via Edit Mode. I uninstalled the Flexslider package and called it manually in my theme's HEADER. So the slideshow is working now!

****I figured out the thumbnails!

Thanks for all of your help! I will post all my code later for others to reference.