Views slideshow from single node

Question

I'm trying to achieve working slideshow from images in single node. Images are uploaded from the image field. It's drupal 7. I made new content type and all I made now is slideshow from multiple nodes (with one image in every node). This works fine but thats too problematic to add new node for every single image.

Answer 1

In the views image field settings, under Multiple Field Settings, there is checkbox for "Display All Values in the Same Row" which is checked by default. If you uncheck this box it will place each image in a new row and it will work as you require. I know views has had this feature since at least version 2, but it might be called something slightly different in older versions.

I like doing it this way for simple slideshows, I can rearrange all of the images on one node/edit page. But for more complex slideshows, like where each image links somewhere or has alternate text, your best bet is probably still to use one node per row.

Answer 2

The Field Slideshow module is exactly what you need then. All images are contained within the node (no node bloat) and it uses jquery cycle (The same as views slideshow does) to produce a dynamic gallery and slideshow.

Answer 3

I have recently built a site with simple galleries and I ended up not using additional slideshow modules at all. All I needed was jQuery Cycle and a little javascript, added to my custom theme. This site has a 'photo' content type and an 'album' vocabulary to assign photo's to different albums. A view creates a list of photo's filtered by album. In my theme I have a js file that looks like this:

(function($){

Drupal.behaviors.myAlbumSlideshow = {
  attach: function(){
    var slideshowContent = $('.view-fotoalbum.view-display-id-page_1>.view-content');

    slideshowContent.before('<div id="slideshow-prev">&lt;</div><div id="slideshow-next">&gt;</div>');

    slideshowContent.cycle({
      fx:       'scrollHorz',
      next:     '#slideshow-next',
      prev:     '#slideshow-prev',
      timeout:  0
    });

    var slideshowHeight = slideshowContent.height() + 'px';
    $('#slideshow-prev, #slideshow-next').css('lineHeight', slideshowHeight);
  }
}

})(jQuery)

A touch of CSS finishes it:

.view-fotoalbum {
  width: 710px;
  margin-right: 10px;
}

.view-fotoalbum #slideshow-prev {
  color: #808080;
  border-right: 1px solid #808080;
  cursor: pointer;
  float: left;
  line-height: 300px;
  margin-left: -40px;
  text-align: center;
  width: 30px;  
}

.view-fotoalbum #slideshow-next {
  color: #808080;
  border-left: 1px solid #808080;
  cursor: pointer;
  float: right;
  line-height: 300px;
  margin-right: -40px;
  text-align: center;
  width: 30px;
}

PS. IMHO, it's not always better to have a single node per image. It's true that this approach provides greater flexibility (for instance adding one image to multiple slideshows), but to some end users, unneeded flexibility is just pointless complexity.

Answer 4

You might consider using the Galleria module. It uses a single node and displays the images from it as a slideshow.

Answer 5

I discovered a good way to have multiple images and multiple links per image in one single node:

What you'll want to do is make sure that both the image and link fields are set to unlimited in the content type. When you create your view also make sure that "Display all values in the same row" is NOT checked. Add a delta field for your image and for your link. Add a Global: PHP filter and set the filter code to this: return(! $row->delta == $row->delta_1);

That should do it. You'll need to have the Views PHP module installed to use PHP as a filter.

Answer 6

To show multiple image of single node in slider, use Dynamic display block module and read the configuration setting. In this when you create view for showing slider block please don't check the checkbox in adding of image with "Show Multiple field settings" if it already checked then please uncheck it.

Answer 7

I recommend the Colorbox module

Also, take a look at the following video tutorial: Colorbox for Drupal 7, part 1: Installation and image field integration

Answer 8

Like nearly everything in Drupal, there are a bunch of different solutions to this, but I want to share a simple one I haven't come across anywhere yet.

Basically, I was searching for a way to display a bunch of different fields—all attached to a single node—in a slideshow. These fields included both image and text fields. So, in order to display all fields attached to a single node in a slideshow:

1. Create a view for your slideshow. Use the "Unformatted List" format.
2. Set the view to display only one item, so that you're only dealing with a single node (or use the Contextual Filter: NID)
3. Add all fields that you want to appear in the slideshow. Exclude all fields from display.
4. Add a custom field (make sure this field is rendered after all the fields you've excluded from display). This where you'll build the basic markup for your slideshow. Using the replacement patterns available, set each available field inside a li item like this:

   
   <ul id="slider">
   <li>[text_field_1]</li>
   <li>[image_field_1]</li>
   <li>[text_field_2]</li>
   <li>[image_field_2]</li>
   </ul>
   
   

5. Then you can run your prefered jQuery slider. If you've already installed in the jQuery Cycle Plugin, you can run that on the slider really easily. Just make sure the plugin is loaded on the page with your slider, and then run it on your newly created ul:

   
   (function ($, Drupal, window, document, undefined) {
   
       $(document).ready(function() {
           $('#slider').cycle({
           // choose your options
       });
       });
   
   })(jQuery, Drupal, this, this.document);
   
   

And you should be good to go.