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....
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.
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.
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.
I need to try and create thumbnails as well. But mostly need the slideshow to work.
@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
- the JavaScript
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?
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?
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...
@aaronmarp
Is the FlexSlider script file linked to and loaded in your page?
Is the FlexSlider script file linked to and loaded in your page?
Flexslider is installed via the dashboard. And I put the script in my footer after . I originally just had it in my page type template.
<?php Loader::element('footer_required'); ?>
@aaronmarp
Have you checked to make sure jQuery and FlexSlider are both loaded?
What does your script look like to call .flexslider()?
Have you checked to make sure jQuery and FlexSlider are both loaded?
What does your script look like to call .flexslider()?
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.
****I figured out the thumbnails!
Thanks for all of your help! I will post all my code later for others to reference.
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/...