Hi,

I would like to to be able to dynamically land on an specific slide when I arrive on a page with flexslider, based on a query string. As an example I click the link below and it will take me the fourth slide.
like http://example.com/page?startsAt=3"

There is documentation on how to do it on the woothemes site, but would love some guidance on how to do it using the drupal flexslider module.
Flexslider Documentation: https://github.com/woothemes/FlexSlider/issues/562 

<script type="text/javascript">
var startAtNum = 0;

        <?php if (isset($_GET['startsAt'])){ ?> 
            startAtNum = <?php echo $_GET['startsAt']; ?>;
        <?php } ?>

        $(function(){
              SyntaxHighlighter.all();
            });
            $(window).load(function(){
              $('.flexslider').flexslider({
                startAt: startAtNum
              });
            });
    </script>

Thanks in advance,
Dan

Comments

dandolino’s picture

dandolino CreditAttribution: dandolino commented
Issue summary: View changes
minorOffense’s picture

minorOffense CreditAttribution: minorOffense commented

You'll need to manupilate the option set before the browser loads it or access the flexslider object on page load and change the settings with javascript.

I would recommend option 1.

Look at the flexslider.module file, has all the Optionset stuff in it.

dandolino’s picture

dandolino CreditAttribution: dandolino commented

deleted this comment

dandolino’s picture

dandolino CreditAttribution: dandolino commented

Hi Matt and Flexslider fans,

I found a way to target a starting slide using a query string. So, if you use http://example.com/yourpage?slide=2 , it should work. This code might not work for multiple optionsets or complex query strings, but im sure other people can help make it more robust. But, it's very simple for my needs. I got the code for getting url variables from css-tricks.com

I just added this code at the very end of this js file /assets/js/flexslider.load.js:

function getQueryVariable(variable)
{
       var query = window.location.search.substring(1);
       var vars = query.split("&");
       for (var i=0;i<vars.length;i++) {
               var pair = vars[i].split("=");
               if(pair[0] == variable){return pair[1];}
       }
       return(false);
}

var slideNumber=getQueryVariable("slide");

And I added this value into the code below:

startAt:slideNumber

like this:


        // Add events that developers can use to interact.
        $(this).flexslider($.extend(optionset, {
          start: function(slider) {
            slider.trigger('start');
          },
          before: function(slider) {
            slider.trigger('before');
          },
          startAt:slideNumber
          ,
          after: function(slider) {
            slider.trigger('after');
          },
          end: function(slider) {
            slider.trigger('end');
          },
          added: function(slider) {
            slider.trigger('added');
          },
          removed: function(slider) {
            slider.trigger('removed');
          }
        }));

And if user visits just http://example.com/yourpage, it will just revert to whatever you have set as the default starting slide, or just the first slide.

nickmaine’s picture

nickmaine CreditAttribution: nickmaine commented

#2 minorOffense is correct, this value needs to be set prior to page load. Altering the value after page load didn't work for me. I used hook_js_alter(), then I'll add code to get information from the path, in my case it will be an image file name. This could also be done in the theme using template_process_flexslider()

This is my first cut, the function could possibly be refined and I will also need to check which flexslider I'm altering, as this inspects sitewide. 

/**
* Implements hook_js_alter()
*/
function my_module_js_alter(&$javascript) {
  if (isset($javascript['settings']['data'])) {
    foreach ($javascript['settings']['data'] as $idx => $data) {
      if (isset($data['flexslider']['optionsets'])) {
        foreach($data['flexslider']['optionsets'] as $key => $optionset) {
          if (isset($optionset['startAt'])) {
            $javascript['settings']['data'][$idx]['flexslider']['optionsets'][$key]['startAt'] = NUMERIC VALUE;
          }
        }
      }
    }
  }
}

Thanks Guys.

amaria’s picture

amaria CreditAttribution: amaria commented
Status: Active » Closed (outdated)
prinds’s picture

prinds CreditAttribution: prinds commented

if you know the optionset name, then you can do something like:

  drupal_add_js(array(
    'flexslider' => array(
      'optionsets' => array(
        'optionset_name => array(
          'startAt' => XX,
        ),
      ),
    ),
  ), 'setting');