Using the Views Slideshow method I'm having trouble getting the directional navigation to appear outside the .flexslider div as it is supposed to. I can get it to work, but only by overriding some of the css in the library (which it seems should not be necessary).

It seems that the template (flexslider-views-slideshow-main-frame.php) should output a wrapper div (class="flex-container") , and that this container should be set to position:relative. Still though, the position of the "flexslider" div would need to be set to static to allow the controls to flow outside the div (i.e. override the overflow:hidden property of that div). Yet, it is set to position:relative by the library.

I can't seem to find a way around this without hacking the library. Any thoughts? Am I over- (or under-) thinking this?

CommentFileSizeAuthor
#14 Screen Shot 2012-04-18 at 7.45.40 PM.png151.32 KBminoroffense
#11 flex-slider.png435.6 KBmermentau

Comments

ishadakota’s picture

ishadakota commented

FWIW, this was my workaround:

I changed the module file /flexslider_views_slideshow/theme/flexslider-views-slideshow-main-frame.tpl.php to:

<div class="flex-container"> /* Add the wrapper div */
  <div class="flexslider">
    <ul id="flexslider_views_slideshow_<?php print $variables['vss_id']; ?>" class="<?php print $classes; ?>">
      <?php print $rendered_rows; ?>
    </ul>
  </div>
</div>

and added the following css:

.flexslider {  
  position: static; /* Allow the navigation controls to overflow the div. */
  border: 4px solid #475B80; /* Also change border color */
}

.flex-direction-nav li .next { 
    right: -24px; /* Resetting the position set nav elements off by a bit */
}

.flex-direction-nav li .prev {
    left: -16px; /* Resetting the position set nav elements off by a bit */
}
Anonymous’s picture

Anonymous (not verified) commented

The proper fix to this would be for the ol.flex-control-nav and ul.flex-direction-nav to be generated outside of div.flexslider.

I'm running out of time today for finding how that part is actually generated in this module (or my grep-fu is extremely lacking today), but I know that this issue is mostly solved after dragging these two elements outside of div.flexslider in Chrome just as they normally appear outside of Drupal.

bones’s picture

bones commented

Also having this problem. Taking ol.flex-control-nav and ul.flex-direction-nav out of the div.flexslider does the trick, but cannot find where this is in the code.

bones’s picture

bones commented

Bit more info, it is actually the flexslider js which puts the controls in the div.flexslider, whereas it should be after that. You can override by setting {controlsContainer: ".flexslider-container"} with that class being the container class.

rade’s picture

rade commented

The ol and ul you are looking for are printed from the flexslider library itself, not from the Drupal module. See sites/all/libraries/flexslider/jquery.flexslider.js or the minified version.

minoroffense’s picture

minoroffense commented
Assigned: Unassigned » minoroffense
Status: Active » Postponed (maintainer needs more info)

I'm having a similar issue when using vertical slide direction. I'm still unsure if this is an issue with the Drupal templates the module uses or an issue with Flex Slider itself. If anyone can provide links to some more examples of this issue along with information regarding configuration that would be appreciated.

Thanks!

bones’s picture

bones commented

I actually ended up not using this module and implementing flexslider through my theme. Not very helpful for you I know, sorry!

My understanding was that the default setting for 'controlsContainer' which is the flexslider element, does not work (I cannot see how it would) and this is a flexslider issue.

A simple work round is to set the 'controlsContainer' value to the container instead.

Hope that helps.

minoroffense’s picture

minoroffense commented

Sounds like you recommend just changing the default value for controlsContainer to the default Flex Slider container class? If so, I could make that change in the default configuration.

bones’s picture

bones commented

Yes, that is what I suggest. Set it in the default.

I have done this with my own implementation of flexslider (as this module wasn't working for me) and it fixes it.

minoroffense’s picture

minoroffense commented
Title: Views Slideshow direction nav » Add Flex Slider navigation container object and set default controlsContainer to match
Status: Postponed (maintainer needs more info) » Needs review

I've added a potential fix for the issue. Please see commit http://drupalcode.org/project/flexslider.git/commit/8ee57b7 and report back results.

P.S. You'll have to go and recreate your option sets to include the default value of '.flex-nav-container' or create a new one to test this.

Thanks

mermentau’s picture

mermentau commented
StatusFileSize
new flex-slider.png435.6 KB

I installed Flex Slider on two sites today using 7.x-1.0-rc2 which at the moment is the same as the dev release. Both are Zen sub-themes, but different ones. The problem is that when using Flex Slider in a field with the article content type there is some over lap at the bottom between the navigation controls and the tags or login links that are just below the slider. It's such that the links in some cases aren't active and can't be clicked.

I was able to tweak flexslider_img.css in one case and it looked great, but the same fix didn't work with the other theme so I couldn't say that I had a fix to share.

minoroffense’s picture

minoroffense commented

Can you post the css you used to adjust the one site?

mermentau’s picture

mermentau commented 
.flex-nav-container {
  float: right;
  position: relative;
  width: 100%;
}

.flexslider ul.slides,
.flex-nav-container ol.flex-control-nav,
.flex-nav-container ul.flex-direction-nav,
.flexslider ul.slides li img {
  padding: 0px;
  /*margin: 0px;*/
}
.flex-control-nav {
  bottom:  -10px;
  margin-bottom: 10px;
}

This theme is my conversion of the Drupal 6 version of Airy Blue. There was no D7 version at the time.
Code in action here.

minoroffense’s picture

minoroffense commented
StatusFileSize
new Screen Shot 2012-04-18 at 7.45.40 PM.png151.32 KB

I tried it out on Bartik and the navigation tends to overlap the fields below. I think adding a reasonable default margin below would suffice.

But I doubt there's a case that will work everywhere but at least if we provide a decent default that should be good enough.

minoroffense’s picture

minoroffense commented
Status: Needs review » Closed (fixed)

Added margin-bottom: 30px to the nav container. Should suffice for the most part. Any other updates will have to be applied in the theme.

See http://drupalcode.org/project/flexslider.git/commit/d3af3ce

ssaha’s picture

ssaha commented

Hi
We are trying to implement the FlexSlider Pause/Play button and we have our theme developed by a consultant.The flexslider is a part of our theme.I am no theming expert and I tried to change the javascript inside our theme.But it doesn't work.So can you please let us know what you did so we can use it as our guide.

I tried to create a simple html with the felxslider and that works ie has the Pause/Play button.But when I am trying to do the same thing inside drupal doesn't work.I can't see the Pause/Play button.

gittosj’s picture

gittosj commented

Managed to do this in Zen 7.5 (and may work in other themes) with the following css in my custom theme

ul.flex-direction-nav {
position:absolute;
overflow: show;
top:0;
right: -50px;
bottom:0;
left: -50px;
}

with that I get the directional control arrows appearing on either side of the slideshow - reset set this with @media declaration to be responsive for smaller screens

  • Commit 8ee57b7 on 7.x-1.x, youtube, 8.x-2.x, startslide by minorOffense: 
    Fix for issue [#1415474] Fixed nav layering Added flex-nav-container...