Hello, I am not sure if this is in the right area. I am looking for assistance with setting up views slideshow so that it will link to the next image field for the content that it is displaying.

For example, I have a content type which uses imagefield and is set to allow uploading unlimited amounts of images. I then have a views slideshow ThumbnailHover which displays one large image (Main frame fields), and then the others as small click-able images (Breakout fields).

Is it possible to setup the Main frame fields so that when someone clicks on them, it will rotate to the next image? We are basically trying to create a photo gallery by using the views slideshow module.

CommentFileSizeAuthor
#10 comics.jpg67.81 KBwrender
#5 slides.jpg201.92 KBwrender

Comments

redndahead’s picture

redndahead commented
Status: Active » Fixed

I probably won't add this functionality to the module, but you can do it with this bit of jquery. You'll need to somehow add it to the page. Replace mymodule with the name of the module or theme you use and replace the #views_slideshow_thumbnailhover_teaser_section_slideshow-page_2 with the one that matches yours.

With this simple function the last slide won't wrap. 

Drupal.behaviors.mymodule = function(context) {
  $('#views_slideshow_thumbnailhover_teaser_section_slideshow-page_2').click(function() {
    $(this).cycle('next');
  });
}

This one will cause the last slide to wrap. Hackish but works. Remember to replace the same things as above.

Drupal.behaviors.mymodule = function(context) {
  // Get the slideshow variables
  var wrapper = '#views_slideshow_thumbnailhover_teaser_section_slideshow-page_2';
  var slides = $(wrapper + ' .views_slideshow_thumbnailhover_slide');

  // Find out how many slides there are.
  var count = slides.length;

  // Activate when slideshow is clicked.
  $(wrapper).click(function() {
    // Loop through each slide.
    var selected = 0;
    slides.each(function(index) {
      // Find the slide number that is being displayed.
      if ($(this).css('display') == 'block') {
        selected = index;
        return false;
      }
    });

    // check to see if we are on the last slide. Need to add 1 because it's zero indexed.
    if (selected + 1 == count) {
      // Loop through all the slides going backwards to get us back at the beginning.
      for (var i = 1; i <= selected; i++) {
        $(this).cycle('prev');
      }
    }
    else {
      // On click move us to the next slide as long as we are not on the last one.
      $(this).cycle('next');
    }
  });
}
wrender’s picture

wrender commented

Hi Redndahead,

Thanks for providing this. I really appreciate the help. I am just unsure where I could add this code to work. Would I be able to add it to a views template file? For example I have these template options that show up in my view "Theme information" link.

    * Display output: views-view.tpl.php, views-view--Comix-View.tpl.php, views-view--.tpl.php, views-view--default.tpl.php, views-view--Comix-View--default.tpl.php
    * Style output: views-slideshow.tpl.php, views-slideshow--Comix-View.tpl.php, views-slideshow--.tpl.php, views-slideshow--default.tpl.php, views-slideshow--Comix-View--default.tpl.php
    * Row style output: views-view-fields.tpl.php, views-view-fields--Comix-View.tpl.php, views-view-fields--.tpl.php, views-view-fields--default.tpl.php, views-view-fields--Comix-View--default.tpl.php
    * Field Content: Image (field_image) (ID: field_image_fid): views-view-field.tpl.php, views-view-field--field-image-fid.tpl.php, views-view-field--Comix-View.tpl.php, views-view-field--Comix-View--field-image-fid.tpl.php, views-view-field--default.tpl.php, views-view-field--default--field-image-fid.tpl.php, views-view-field--Comix-View--default.tpl.php, views-view-field--Comix-View--default--field-image-fid.tpl.php
    * Field Content: Image (field_image) (ID: field_image_fid_1): views-view-field.tpl.php, views-view-field--field-image-fid-1.tpl.php, views-view-field--Comix-View.tpl.php, views-view-field--Comix-View--field-image-fid-1.tpl.php, views-view-field--default.tpl.php, views-view-field--default--field-image-fid-1.tpl.php, views-view-field--Comix-View--default.tpl.php, views-view-field--Comix-View--default--field-image-fid-1.tpl.php

Also, say if my themename was bluemarine, would I just add:

Drupal.behaviors.bluemarine = function(context) {
  $('#views_slideshow_thumbnailhover_teaser_section_slideshow-page_2').click(function() {
    $(this).cycle('next');
  });
}

And I think that the "#views_slideshow_thumbnailhover_teaser_section_slideshow-page_2" is just a css div tag?

Sorry for all of the questions. I am new to programming and drupal. Although I have done a lot of css/html work.

Regards,

Wes

wrender’s picture

wrender commented

Just thought I would follow up. Any recommendations on where I could stick this code?

redndahead’s picture

redndahead commented

So yes if your themename is bluemarine you can do it like that really I believe it can be anything just as long as it's unique. You can add the javascript file in your theme folder and then add it to your [theme].info file. Just add it using the scripts variable. 

scripts[] = myscript.js

This will load it for every page, but shouldn't affect much.

wrender’s picture

wrender commented
StatusFileSize
new slides.jpg201.92 KB

Thanks for that. I ended up just putting it in a file called scripts.js in the root of the theme. It works great, but I am a bit stuck at the pager. I want to limit the number of thumbnails/slideshow images per page to say 5, and then have a pager that flips to the next set of images attached to that node. For example, there is a node with 100 images attached to it using imagefield, and we want the user to be able to easily click through all one 100 images in an order. (It's a comic book). Page 1 would have 5 slides, and 5 thumbnails, but when the user gets to slide 5 by clicking the large image and clicks it one more time, it would switch to page 2. Currently, the user would have to click the pager items at the bottom. 1 2 next > last >>

I guess in pseudo code it would be something like:
- If user clicks on last side on page send them to the next page(pager item) in the view

In my case.

The view page one is called www.domainname.com/testcomixview

page two is called www.domainname.com/testcomixview?page=1

I have attached a screenshot of page 1.

redndahead’s picture

redndahead commented

Views Slideshow doesn't work with views pagers. Sorry about that.

wrender’s picture

wrender commented

Ok. Thanks for your help. I will try posting in the imagefield and views areas to see if there is a way to accomplish this.

wrender’s picture

wrender commented
Status: Fixed » Needs work

Hi redndahead,

I have been asking around, and have made a few posts regarding trying to do what I need here. Still no luck with having the pages automatically advanced when clicking on the last image on a page. Would it be possible to to hire someone to get views slideshow working with pagers the way we want?

redndahead’s picture

redndahead commented

I am not sure who would be able to do that. In my head I don't see how this could be accomplished so I am not sure I would feel comfortable taking the contract. There may be others who know views slideshow well enough to handle this. There are ways to create a views slideshow within a views slideshow and that may work in this case, but it'll have to load up all the images from all the nodes which may take a while.

wrender’s picture

wrender commented
StatusFileSize
new comics.jpg67.81 KB

Do you think we would be able to accomplish this without using the views slideshow module? I have posted in the imagefield and views areas of this site. Nobody seems to know how to accomplish this though. A few people now have said that it is possible with a slideshow program, but I don't think they understand the issue is switching between pagers. I have attached another image of what we are trying to do. We really don't need any javascript preloading or effects. Basically we just need the large image to link to the next imagefield fid I believe...

See attached.

redndahead’s picture

redndahead commented

Have a look at this issue. Tell me if this is what you are kind of looking for. Specifically the image linked to this comment. http://drupal.org/node/847396#comment-3205960

wrender’s picture

wrender commented

It is similar to what I am looking for, but it sounds different. Basically, we are just looking for the ability to be able to click through all 100 imagefields (by clicking on the large image), but say only display 6 thumbnails per page.

redndahead’s picture

redndahead commented
Status: Needs work » Postponed

ok yeah I see first ajax support would have to be put in and that is kind of stalled while I learn how to do it or someone comes up with a good solution. I think this is unfortunately going to be a long way off.

wrender’s picture

wrender commented

Ok. Well I appreciate your time with looking into this. Would you know of anyway to accomplish what we are trying to do with templating in Drupal?

redndahead’s picture

redndahead commented

Well you can definitely create the ajax pager. 1, 2, 3, 4, 5 and that would get you half way there. You would then need to create an on click event that would look for the new images and rerun jquery cycle on them. Probably wouldn't be terribly difficult to do that. Trick is finding the images each time. But since this is custom you should just be able to specify them. Are all of these images on a single node or are these multiple nodes?

wrender’s picture

wrender commented

That is interesting. Sounds like it would work for what we are trying to do. Yes the images for one Comic would be all attached to one node. So for example, we would have a CCK type called Comics. Comics has a imagefield attached to it, that allows "unlimited" amount of images to be uploaded to it.

So then ideally, when the user goes to that node, it would be presented to them in the fashion we are talking about (One large image that is click-able to navigate through the images, and a certain amount of thumbnails per page). And then we would have a feed in a sidebar or something, listing other recent comics.

Currently the live website is here, http://colinwhitecomix.com/ (This is the old site, we are working on the new Drupal site on a development server).

redndahead’s picture

redndahead commented
Status: Postponed » Closed (won't fix)

I'm closing this as I'm not going to fix it.