Problems with initiating orbit slider multiple times

Question

I am trying to initiate orbit slider multiple times, by following this example. but I can't get it to work.

This is my all.js file

$(document).ready(function() {

//add input field for external media
var max_fields      = 10; //maximum input boxes allowed
var wrapper         = $(".input_fields_wrap"); //Fields wrapper
var add_button      = $(".add_field_button"); //Add button ID

var x = 1; //initial text box count
$(add_button).click(function(e){ //on add input button click
    e.preventDefault();
    if(x < max_fields){ //max input box allowed
        x++; //text box increment
        $(wrapper).append('<div><input type="text" name="external_media[]"/><a href="#" class="remove_field"><button type="button" class="secondary button">Remove</button></a></div>'); //add input box
    }
});

$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).parent('div').remove(); x--;
})

//autocomplete for challenge question
$("#challenge_question").autocomplete({
    source: "http://coop.app/admin/challenges/autocomplete",
    minLength: 2,
    select: function( event, ui ) {
        $('#challenge_question').val(ui.item.id);
    }
});

//slider
//var orbit = new Foundation.Orbit($('#slider'));
var sliderOptions = {};
var sliderInstances = [];

$(".slider").each(function(element) {
  sliderInstances.push(new Foundation.Orbit($(element), sliderOptions));
});

//chart views by category
$('#byCategory').highcharts({
   chart: {
       type: 'bar'
   },
   title: {
       text: 'Most read article type'
   },
   xAxis: {
       categories: icoop.categories
   },
   yAxis: {
       min: 0,
       title: {
           text: null
       },
       allowDecimals: false
   },
   legend: {
       reversed: true
   },
   plotOptions: {
       series: {
           stacking: null
       },
   },
   series: [{ name: 'Views', data: icoop.categoryViews }]
 });

 //chart views by chains
 $('#byChain').highcharts({
    chart: {
        type: 'bar'
    },
    title: {
        text: 'Most read chain'
    },
    xAxis: {
        categories: icoop.chains
    },
    yAxis: {
        min: 0,
        title: {
            text: null
        },
        allowDecimals: false
    },
    legend: {
        reversed: true
    },
    plotOptions: {
        series: {
            stacking: null
        },
    },
    series: [{ name: 'Views', data: icoop.chainViews }]
  });

  //by time of the day
  $('#byTime').highcharts({
    chart: {
        type: 'column'
    },
    title: {
        text: 'Time of the day with most reads'
    },
    xAxis: {
        categories: ['0-2', '2-4', '4-6', '6-8', '8-10', '10-12', '12-14', '14-16', '16-18', '18-20', '20-22', '22-24']
    },
    yAxis: {
        min: 0,
        title: {
            text: null
        },
        allowDecimals: false
    },
    plotOptions: {
        column: {
            stacking: null
        }
    },
    series: [{ name: 'Views', data: icoop.viewsByTimeOFTheDay }]
  });
});

And when I have it like that, I get in the console

Uncaught TypeError: Object.defineProperty called on non-object     jquery.js:3718

When I move the code for the slider to the bottom of the file, I don't get any errors in the console, but also slider doesn't work either.

This is my view:

<div class="orbit slider" role="region" data-orbit>
    <ul class="orbit-container">
      <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
      <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
      @foreach($article->medias as $media)
        <li class="orbit-slide">
          {!! Html::image($media->path) !!}
        </li>
      @endforeach
      @foreach($article->externalMedias as $externalMedia)
          <li class="orbit-slide">
            <div class="flex-video">
              <iframe src="{{ $externalMedia->url }}"></iframe>
            </div>
          </li>
      @endforeach
    </ul>
  </div>

Also, since I was using for the first time elixir in Laravel, I am not sure if I have done correctly things there, so there might be also a problem of files conflicting. This is my gulpfile.js:

elixir(function(mix) {
mix.sass('app.scss', './public/css/app.css')

.styles([
  'foundation.min.css',
  'app.css'
])

.styles([
  'jquery.filer.css',
  'jquery.filer-dragdropbox-theme.css',
], "public/css/jquery-filer/jquery.filer.css")

.scripts([
  'zurb/jquery.js',
  'zurb/what-input.js',
  'zurb/foundation.js',
], "public/js/zurb/zurb.js")

.scripts([
  'jquery-filer/jquery.filer.js',
  'jquery-filer/image-uploader.js',
], "public/js/jquery-filer/jquery-filer.js")

.scripts([
  'editor/editor.js',
], "public/js/editor/editor.js")

.scripts([
  'app.js',
], "public/js")
});

I had that problem when I was implementing jQuery autocomplete, which wouldn't work until I have moved script zurb.js above jquery-ui.min.js. Now I am calling my scripts like this:

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
  <script type="text/javascript" src="{{ asset('js/zurb/zurb.js') }}"></script>
  <script type="text/javascript" src="{{ asset('js/jquery-ui/jquery-ui.min.js') }}"></script>
  <script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
  <script type="text/javascript" src="{{ asset('js/jquery-filer/jquery-filer.js') }}"></script>
  <script type="text/javascript" src="{{ asset('js/editor/editor.js') }}"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
  <script src="{{ asset('js/all.js') }}"></script>

I checked it now and I get: foundation.js:5474 Uncaught TypeError: Cannot read property 'data' of undefined — Ludwig, May 05 '16 at 07:22
@Marco by default it should be working fine https://jsfiddle.net/8c4ztmut/ — codefreaK, May 15 '16 at 23:35
@SachinDivakar yes, it should, but you are also not using foundation in your example — Ludwig, May 16 '16 at 08:15
@Marco https://jsfiddle.net/8c4ztmut/1/ I added the zurb foundation files to the jsfiddle it works when foundation js is added before jquery library and another thing where is bxSlider.js added ?? — codefreaK, May 16 '16 at 08:36
@Marco it works either way no conflict at all that was a mistake on my part but I ahve a question regarding the fact that I dont see bxslider .js n added anywhere in your code or has you renamed it to your liking ?.If not there is a strong chance that its the issue which is causing this — codefreaK, May 16 '16 at 19:01
@SachinDivakar yes I am not using bxslider.js because question is not about bxslider it is about zurb foundation orbit slider — Ludwig, May 17 '16 at 18:11
@Marco the example you quoted was that of bxslider so I went with it so that is the reason why I didnt put it down as answer because I didnt see anything wrong there let me check it with zurbfoundation and tell you about it — codefreaK, May 17 '16 at 19:59
I'd recommend using [slick.js](http://kenwheeler.github.io/slick/) which can do wonders — carkod, May 28 '18 at 14:37

score 1 · Answer 1 · answered Sep 11 '17 at 12:04

First of all be sure that there's no conflict because of the variety of your scripts. I think changing the code to:

$(".slider").each(function($element) {
  sliderInstances.push(new Foundation.Orbit($element, sliderOptions));
});

or

$(".slider").each(function() {
   sliderInstances.push(new Foundation.Orbit($(this), sliderOptions));
});

will help.

score 0 · Answer 2 · answered May 23 '17 at 22:52

Im unable to test out your code but I noticed a small discrepency that might be causing you some issue.

$(".slider").each(function(element) {
  sliderInstances.push(new Foundation.Orbit($(element), sliderOptions));
});

The each statement is missing an argument. The first argument returns the index and the second one returns the element. The Element is returning the index count of the loop not the element that you are hoping for. It should be...

$(".slider").each(function(index, element) {
  sliderInstances.push(new Foundation.Orbit($(element), sliderOptions));
});

That might be one reason why you having issues initiating the oribit slider.

score 0 · Answer 3 · answered Aug 16 '17 at 12:28

0

The "element" parameter that $.each returns doesn't need to be within $(), try like this and let's see what happens.

$(".slider").each(function(element) { 
    sliderInstances.push(new Foundation.Orbit(element, sliderOptions)); 
});

answered Aug 16 '17 at 12:28

Cristiano T. Fetter

1
1

Problems with initiating orbit slider multiple times

3 Answers3