javascript - attribute - title css
Problemas al iniciar el control deslizante de órbita varias veces (3)
El parámetro "elemento" que $ .each devuelve no necesita estar dentro de $ (), intente de esta manera y veamos qué sucede.
$(".slider").each(function(element) {
sliderInstances.push(new Foundation.Orbit(element, sliderOptions));
});
Estoy intentando iniciar el control deslizante de órbita varias veces, siguiendo this ejemplo. Pero no puedo hacerlo funcionar.
Este es mi archivo all.js
$(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 }]
});
});
Y cuando lo tengo así, me meto en la consola.
Uncaught TypeError: Object.defineProperty called on non-object jquery.js:3718
Cuando muevo el código para el control deslizante a la parte inferior del archivo, no obtengo ningún error en la consola, pero el control deslizante tampoco funciona.
Esta es mi opinión:
<div class="orbit slider" role="region" data-orbit>
<ul class="orbit-container">
<button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>◀︎</button>
<button class="orbit-next"><span class="show-for-sr">Next Slide</span>▶︎</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>
Además, ya que estaba usando el elixir por primera vez en Laravel, no estoy seguro de haber hecho correctamente las cosas allí, por lo que también podría haber un problema de archivos en conflicto. Este es mi 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")
});
Tuve ese problema cuando estaba implementando jQuery autocompletar, que no funcionaría hasta que haya movido el script zurb.js arriba de jquery-ui.min.js. Ahora estoy llamando a mis guiones así:
<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>
En primer lugar, asegúrese de que no haya conflicto debido a la variedad de sus scripts. Creo que cambiando el código a:
$(".slider").each(function($element) {
sliderInstances.push(new Foundation.Orbit($element, sliderOptions));
});
o
$(".slider").each(function() {
sliderInstances.push(new Foundation.Orbit($(this), sliderOptions));
});
ayudará.
No puedo probar su código pero noté una pequeña discrepancia que podría estar causándole algún problema.
$(".slider").each(function(element) {
sliderInstances.push(new Foundation.Orbit($(element), sliderOptions));
});
A cada declaración le falta un argumento. El primer argumento devuelve el índice y el segundo devuelve el elemento. El elemento está devolviendo el recuento de índice del bucle, no el elemento que está esperando. Debería ser...
$(".slider").each(function(index, element) {
sliderInstances.push(new Foundation.Orbit($(element), sliderOptions));
});
Esa podría ser una de las razones por las que tiene problemas para iniciar el control deslizante de Oribit.