Sample or Demo of this Slideshow Xtra in action? Would be great if we can see some cool implementations that people have done with this as I'm not sure of the full functionality of this without seeing a demo of it.

thanks!

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

captaindav’s picture

Hi,

Sorry the only thing that is available now is the views_slideshow_xtra_example module that is included. Can you take a look at that and see if you have any other questions? That gives a plain (not highly themed) example of the overlays.

I am currently working on a better example, but don't have it done yet.

I will add a request on this project's main page for others to post to this thread their URL's for use as examples.

Thanks,

captaindav

maxchock’s picture

i'm using the Views Slideshow Xtra Overlay on my first page.. still in testing stage.

www.victoria.my

betovarg’s picture

hey just a quick question. Im looking for a slider that will let me add titles to the pager, just like the one you showed there. Does Views Slideshow Xtra provide that option? or did you have to modify themes or templates?

thanx!

Desi Raaj’s picture

could you please export your view, I just want to see and set up thumbnail pager, just can't figure that out. Thanks

timmyriddle’s picture

Example of Views Slideshow Xtra in action here: www.ardenaudio.co.uk.

There is a content type dedicated to the front page splash with both image and body fields. The image is cycled by Views slideshow and the body text is placed on top by Views Slideshow Xtra.

ghilsman’s picture

very nice example, timmyriddle ! thanks for posting

nno’s picture

Thank you very much for this great module.

jazzitup’s picture

Example: JazzIT.hr

caudiz’s picture

Title: Sample or Demo of this Slideshow Xtra in action? » Requirements and steps for Drupal 6 to build an slideshow
Version: 7.x-3.x-dev » 6.x-3.0
Priority: Normal » Critical

Greetings,

I'd like to know which modules do I require to make an slideshow Xtra like the JazzIT.hr site.
How could I do something like that?

Thanks,

jazzitup’s picture

Title: Requirements and steps for Drupal 6 to build an slideshow » Sample or Demo of this Slideshow Xtra in action?
Version: 6.x-3.0 » 7.x-3.x-dev
Priority: Critical » Normal

Welcome to the Drupal community. Please read the documentation first before making changes within the issue queue, eg. don't change the issue's overall values if you're not sure what you're doing. If you need a support, open a new issue, or post to Drupal forums.

http://drupal.org/node/317
http://drupal.org/forum-posting

To create a similar slideshow that we've built for JazzIT.hr you will need views_slideshow, views_slideshow_xtra modules and some advanced knowledge of CSS.

veeray’s picture

thanks for the great example. What do you call the small "chooser" with three spheres at the bottom left each representing a different slide. I need that functionality on a site.

mastoll’s picture

Darn, it looks like the site wasn't finished.
But I do like the way the overlay looks w/ text and additional image. Can you explain how you accomplished this?

spidersilk’s picture

Looking at the STS Health and JazzIt examples above, the row of dots is exactly what I was hoping to be able to create with this module, but looking at the code on those pages, it looks like the dots are just the pager widget that comes with Views Slideshow, but with custom fields substituted for the default ones.

So I'm not entirely sure what this module is actually doing in these examples - it doesn't seem to be adding anything that isn't already there in Views Slideshow. Is it just the fact that's positioning them over the slide instead of below it? I'm not sure why you'd need an extra module for that - you can do that just with CSS.

I must be missing something here...

spidersilk’s picture

OK, I did manage to get a dot-pager overlay like you see on those two sites working. Since a couple of people asked about how to do that, here's what worked for me:

1. Add a custom text field to the view, with the content set to "•" - a simple bullet character - if you want dots, or to "-" if you want rectangles.

2. In the slideshow settings for the view, enable the pager widget at the bottom of the slideshow, and set it to use the field you just added.

That gives you the dot pager underneath the slideshow, although it's initially tiny, left-aligned, and the dots are very close together. You'll need to add some styling to ".views-slideshow-controls-bottom .views-field-view-node a" in your theme's CSS:

3. To get the dots/rectangles looking better, set the font-size to something large (something in the 5-10 em range), and add some margin-right (maybe 0.25em or so) to space them apart a bit. You can also set the colour you want the dots to be here, and the colour you want the active dot to be as .views-slideshow-controls-bottom .active .views-field-view-node a.

Also, depending on your theme's styling, you may have the dots stacking vertically instead of appearing in a line horizontally. If that happens, you may need to set the various containing divs to display: inline.

4. Now, to position it over the slides. I used:

.views-slideshow-controls-bottom {
	position: absolute;
	top: 285px;
	text-align: center;
	width: 580px;
	z-index: 30;
}

Where 580px was the width of the slides, and 285px from the top of the image was about where I wanted the dots to appear (you could also use bottom: 25px or something like that if you like). Obviously, all of these values will need to be set differently for your specific slideshow.

Note that the z-index doesn't have to be 30; it just needs to be greater than 0. I used 30 because I had a couple of other items already there with z-indexes of 10 and 20 (an overlaid caption on the slides, with the background set to z-index 10 and the content to 20), and I wanted this to be on top of those.

This approach, I am somewhat embarrassed to admit, doesn't actually use the Views Slideshow Xtra module at all. I couldn't actually figure out how to do it with that module, so I resorted to just using CSS, and it actually turned out to be pretty easy that way. I'm sure there are other use cases for which this module is necessary. But if you just want the dot pager, this is one way to do it.

Mike_s’s picture

Title: Sample or Demo of this Slideshow Xtra in action? » Number of concurrently displayed slideshows
Component: Documentation » Miscellaneous

Hello,

first, I would to thank the creator of this module as well as those who are helping to maintain it.
I'm so kind of novice in this domain, but I always liked drupal, never have the time to do advanced things with it. Now, here is the time and here is the issue:

I want to display a two by two quadrant of slides (four slides), but it seems as if the two rows were folded, therefor I have two superimposed slides on one quadrant.

Who could I fix this ?

Your help would be sooo much apreaciated smart guys !

Thanks.

Mike_s’s picture

dmkelner’s picture

Title: Number of concurrently displayed slideshows » Sample or Demo of this Slideshow Xtra in action?
Component: Miscellaneous » Documentation

This is getting me close but not quite there. In one of the examples the pager takes you directly to the slide, not to the content. I want to be able to move through the slides in the slideshow using the pager. So I'm not clear on how to define the link field so that it doesn't take me to the original content, but merely changes the slide. Thanks!

W01F’s picture

Issue summary: View changes

I just implemented a pretty in-depth application of this module you can see here - https://www.volunteerglobal.com

isaac.el.cec@gmail.com’s picture

Hi...

After a few hours of study and testing... This is the result:
http://www.propium.org/

cptr.lab’s picture

Hi,

i've been using the module on www.triangraphics.com to display an dynamic arrow sliding in from the left on top of a (views) slideshow.

Its purpose is to show a headline which is linked to the product page of the related slide.

It's fully CSS coded and automatically adjusts it's width to the content.

The module provided all the functionality my customer needed to get the desired result.

Greetings

Christopher
CPTR.lab

sepp68’s picture

Example with backstretch and some js modification:
http://gckohmark.de/der-platz