Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
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!
Comment | File | Size | Author |
---|---|---|---|
#20 | 140814_Screenshot_Triangraphics_overlay.png | 489.41 KB | cptr.lab |
Comments
Comment #1
captaindav CreditAttribution: captaindav commentedHi,
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
Comment #2
maxchock CreditAttribution: maxchock commentedi'm using the Views Slideshow Xtra Overlay on my first page.. still in testing stage.
www.victoria.my
Comment #3
betovarghey 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!
Comment #4
Desi Raaj CreditAttribution: Desi Raaj commentedcould you please export your view, I just want to see and set up thumbnail pager, just can't figure that out. Thanks
Comment #5
timmyriddle CreditAttribution: timmyriddle commentedExample 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.
Comment #6
ghilsman CreditAttribution: ghilsman commentedvery nice example, timmyriddle ! thanks for posting
Comment #7
nno CreditAttribution: nno commentedThank you very much for this great module.
Comment #8
jazzitup CreditAttribution: jazzitup commentedExample: JazzIT.hr
Comment #9
caudiz CreditAttribution: caudiz commentedGreetings,
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,
Comment #10
jazzitup CreditAttribution: jazzitup commentedWelcome 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.
Comment #11
veeray CreditAttribution: veeray commentedthanks 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.
Comment #12
mastoll CreditAttribution: mastoll commentedDarn, 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?
Comment #13
spidersilk CreditAttribution: spidersilk commentedLooking 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...
Comment #14
spidersilk CreditAttribution: spidersilk commentedOK, 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:
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.
Comment #15
Mike_s CreditAttribution: Mike_s commentedHello,
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.
Comment #16
Mike_s CreditAttribution: Mike_s commentedComment #17
dmkelner CreditAttribution: dmkelner commentedThis 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!
Comment #18
W01F CreditAttribution: W01F commentedI just implemented a pretty in-depth application of this module you can see here - https://www.volunteerglobal.com
Comment #19
isaac.el.cec@gmail.com CreditAttribution: isaac.el.cec@gmail.com commentedHi...
After a few hours of study and testing... This is the result:
http://www.propium.org/
Comment #20
cptr.lab CreditAttribution: cptr.lab commentedHi,
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
Comment #21
sepp68 CreditAttribution: sepp68 commentedExample with backstretch and some js modification:
http://gckohmark.de/der-platz