11

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.

2
  • To have a node per image is IMO the preferred way of doing it, as it is more flexible. You can publish/unpublish nodes, add title / description text / links to the nodes which can be used in the slide show, node queue can be used to arrange sorting etc etc. You should add what problems you actually are facing with the single node slideshow approach, what have you tried, what happened, what is broken etc. Also is this Drupal 6 or 7? Which slideshow module do you use?
    – googletorp
    May 31, 2011 at 11:07
  • @googletorp I use "Views Slideshow" module with Drupal 7. It's gonna be a simple slideshow/intro page and I don't need anything else but simple image slideshow without title, description, navigation buttons etc. I configured views like this: format: Slideshow, show: fields, content: intro (its my content type for this node). Now it shows images one by one in single row.
    – smogg
    May 31, 2011 at 12:13

9 Answers 9

10

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.

0
7

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.

2

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.

2

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

1
  • Yeah, I know this module and I'm using it on the same site as gallery. But its hard to achieve simple slideshow without any navigation buttons etc. But it doesn't matter, I'm staying with image per node system. Also galleria module doesnt work when I turn on js compression in configuration>>performance ;/
    – smogg
    Jun 3, 2011 at 9:44
2

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.

2

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.

1

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

1

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.

0

There is a moduel https://www.drupal.org/project/field_slideshow which is made for creating a slideshow from a single node.

Personally, I think this would be a great use of a node--type template, then each node of that type would be formatted as a slide show with a high degree of control, such as where to present the rest of the fields for that node...

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.