I'm working against a deadline and, in addition to a few other problems, I'm struggling to get a gallery slider working properly.
I tried a number of out-of-the-box solutions (Gallerific, Flexslider, Media
Gallery, Views Slideshow, and more. - 3 days of trying and 1 all-nighter), but I can't get them working properly. So, following a buildamodule video, I created my own view using Views Slideshow. (the attached file, 5gallery.jpg, shows the design I'm going for.)
You can see the gallery here: http://www.humlafund.org/test/gallery
I'm close, but (1) I don't know how to center the main image (some of the
photos are landscape and some, portrait, so there's a variable width - I'm using Imagecache Action's Aspect Switcher to set their respective sizes); (2) I'm having trouble overriding styles to customize that grey slider button; and (3) I don't know how to get the thumbnail slider to work as a slider.
I'd be happy to post my view coding, if that would help.
Please help a newcomer who has hit a wall....
Thanks,
Debra
| Attachment | Size |
|---|---|
| 5gallery.jpg | 296.53 KB |
Comments
Views slideshow Gallery with thumbnail slider
It looks like a maragin on the right next to the thumbnail at the bottom. Check the CSS it could be in the num class. or in the id="views_slideshow_slide_counter_gallery-page" line 257 there is a margin somewere in that location.
JohnCat
Debra, Don't panic and take a
Debra,
Don't panic and take a deep breath. Ok, I am just kidding, I know how it's hard when you are trying to deliver something and you don't find a way.
The 1st issues seem to be with CSS right, nothing to do with the image slider. A couple of ways you can center the image and here is the reference - http://www.w3.org/Style/Examples/007/center.en.html
Are you coming to meet up on Thursday? I can come 30 min before to check out your problem.
Mahesh
This would be a great
This would be a great conversation to have in our slack group:
http://upstateweb.herokuapp.com In the #drupalbany channel.
Hi Debra, when is the
Hi Debra, when is the deadline for this?
Having trouble logging in to sign-up for meetups and such? Log in at Drupal.org first, then navigate to your groups page; groups.drupal.org's login tends not to work.
See https://www.drupal.org/node/2678132 for details.
Simple fix...
Hi Debra
Here's a solution for your image centering issue...
Within the .views-slideshow-cycle-main-frame-row class (or any class within those div containers) make the following adjustments:
- position: relative
- margin: auto
To style the slider you will need to override the JQuery UI styles, anything that contains "ui-" within the classname should do the job I.E. ui-slider-range, ui-widget-header
As for the images within the slider it looks like that has been resolved.
Hope this helps,
solution(s) - thank you Eric!
The solutions I went with were:
(1) Centering Image: I removed "position:absolute;" from the top-level container of the gallery and gave it a "text-align: center;" voila!
(2) (duh) This ended up being a simple matter of css specificity. The solution: referencing an additional css class for my slider styles.
(3) THIS was complicated. The solution was a matter of adjusting the slideshow settings in the my custom gallery view and using a JCarousel pager (from the jcarousel module). My view had two fields: the gallery image field (content:image). I entered that field twice, assigned the first content:image the full-size image-style and assigned the second content:image a thumbnail image-style. Importantly, in the field configuration, I "excluded-from-display" the thumbnail image; and under "slideshow settings" I set the "pager field" to the second content:image (this was the thumbnail field, they're identical in name since it's the same field only with a different configuration, so I had to go by the order in which they appeared on the page). Lastly, and this was the most essential things, I checked "Move To Active Pager Item On Slide Change". Voila. There were a bunch of other issues, most of which were resolved by disabling Jquery Update Module (which I vow to never use again!).
NONE of this would have been possible without, in fact it was all entirely accomplished by the very generous, soon-to-be-dad-for-the-second-time, Eric Steinborn. Thank you, Eric!
And thanks to all who posted for your encouragement and ideas. If anyone needs help with an image slider in the future, let me know. I'll "share the wealth".
See many of you tonight.
Looking forward to it.
Debra
(Here's the slideshow, for the curious... it's still in development and needs css tweaks, but it's functioning as I'd hoped: http://www.humlafund.org/test/gallery