It will just not display for some reason, the one I have in the regular(non-modal) page works wonders, but this one does not. I googled and found, that I have to trigger the flexsslider initialisation, when modal opens, so I did.
$(document).ready(function(){
$('#modal').on('shown.bs.modal', function() {
console.log('Init flex.....');
$('#carousel-modal').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider-modal').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel"
});
});
});
Thats the JS part
<div class="container">
<div class="flexslider" id="slider-modal">
<ul class="slides">
<? foreach ($aImages as $image) { ?>
<li>
<img src="<?=getImageAddress($image['image_id'], 'obj', 'med')?>"/>
</li>
<? } ?>
</ul>
</div>
<div class="flexslider" id="carousel-modal">
<ul class="slides">
<? foreach ($aImages as $image) { ?>
<li>
<img src="<?=getImageAddress($image['image_id'], 'obj', 'sml')?>"/>
</li>
<? } ?>
</ul>
</div>
</div>
And thats the Part in modal.
The console.log part triggers, when I open the modal, but rest won't :/ I have googled and messed for hours now, maybe someone can point me in the right direction?
For some reason, when I put the initialisation script into the modal body with a small delay(I used 500 ms), it mysteriously started working
You shouldn't initialise flexslider only when modal is shown. Supposably if you show and hide it several times, the slider would be initialised at each.
I would let the flexslider initialisation on document ready. The modal 'show' will only make it visible.
Related
I'm using flexslider for showing custom post type posts. I've managed to get the deep linking to work by adding the post id to each li element and using this to update the url with that id when clicking previous/next.
However I can't get this new link to work when it's pulled up in the browser. The goal is to use this url for sharing on facebook for example. When someone clicks the url it should go to that specific slide.
$(document).ready(function(){
var $flexslider = $('.flexslider');
$flexslider.flexslider({
before:function (slider) {
// get the ID of the slide we are animating to
id = slider.slides[slider.animatingTo].id
// set the URL path to #slideID
history.pushState(null, null, "#" + id);
},
animation: "fade",
touch: false,
slideshow: false,
manualControls: ".flex-control-nav li",
useCSS: false /* Chrome fix*/
});
});
<section id="slider">
<div class="flexslider">
<ul class="slides">
<?php query_posts(array('post_type' => 'juweel','orderby' => 'rand')); if(have_posts()) : while(have_posts()) : the_post();?>
<li data-thumb="<?php the_post_thumbnail_url(); ?>" class="slide" id="<?php the_ID(); ?>">
<?php the_title(); ?>
<?php the_post_thumbnail(); ?>
</li>
<?php endwhile; endif; wp_reset_query(); ?>
</ul>
</div>
</section>
I know I can get the current location hash by using
var hash = window.location.hash;
But I have no clue how to check if the value matches the id of one of my slides and make it go there
I need to set custom dots in owl carousel. I have this code in JS:
$(document).ready(function() {
$('#header-slider').owlCarousel({
loop: true,
autoplay: true,
autoplayTimeout: 2300,
pagination: false,
navigation: true,
navText: [$('.am-next'), $('.am-prev')],
navigation: true,
margin: 0,
dotsData: ["<button role='button' class='owl-dot'></button><svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='16' height='16' viewbox='0 0 250 250' enable-background='new 0 0 426.667 410' xml:space='preserve'><path class='loader' transform='translate(125, 125) scale(.84)'></svg>"],
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1,
nav: false
},
1200: {
items: 1,
nav: false
}
}
});
});
But with this code nothing happend, just undefined dots are displayed. Is even possible to make custom dots like this?
Change the following code like this:
$(document).ready(function() {
$('#header-slider').owlCarousel({
loop: true,
autoplay: true,
autoplayTimeout: 2300,
pagination: false,
navigation: true,
navText: [$('.am-next'), $('.am-prev')],
navigation: true,
margin: 0,
dotData: true,
dotsData: true
responsive: {
0: {
items: 1
},
600: {
items: 1
},
1000: {
items: 1,
nav: false
},
1200: {
items: 1,
nav: false
}
}
});
});
Add your dots data in your owl-item:
<div class="item" data-dot="<button role='button' class='owl-dot'></button>">
<!-- Your Image -->
</div>
So looking at the documentation, the dotsData option takes a boolean which just tells Owl Carousel to look for the data-dot attribute for each item a dot is shown for. So your custom markup needs to go into the HTML rather than being passed in as a string when configuring the carousel in JS.
If you check this Fiddle you can see how the JS option relates to the HTML data attribute: https://jsfiddle.net/4xymnwey/
HTML
<ul class="owl-carousel owl-theme">
<li class="carousel-slot" data-dot="<p>text 1</p>">slide 1</li>
<li class="carousel-slot" data-dot="<p>text 2</p>">slide 2</li>
<li class="carousel-slot" data-dot="<p>text 3</p>">slide 3</li>
</ul>
JS
$(".owl-carousel").owlCarousel({
items: 1,
dots: true,
dotsData: true
});
Credit to this issue comment on GitHub for the answer. I hope that helps :)
If nothing helped to you.
Try to achieve manually.
Here is the example:-
HTML Auto-generated by Owl-carousel
<div class="owl-controls">
<div class="owl-pagination">
<div class="owl-page"><span class=""></span></div>
<div class="owl-page"><span class=""></span></div>
<div class="owl-page active"><span class=""></span></div>
<div class="owl-page"><span class=""></span></div>
<div class="owl-page"><span class=""></span></div>
<div class="owl-page"><span class=""></span></div>
</div>
</div>
It will auto-generated by Owl carousel.
select parent id/class of this and change content using javascript or jquery. It's totally up to you.
here is the example:-
Javascript
var dots = document.querySelectorAll("#testomonial .owl-pagination .owl-page");
let i=1;
dots.forEach((elem)=>{
elem.innerHTML = i;
i++;
})
FIDDLE: http://jsfiddle.net/2patspw2/3429/
I am using featherlight as my modal box and am running lightslider inside of it. It runs fine the first time it is clicked, but them for some reason it seems to bug out and duplicate itself. I had thought it might be duplicate slides so I read light slider documentation and added this:
onSliderLoad: function(el) {
el.lightGallery({
selector: '.gal .lslide'
});
This didn't fix the problem, so then I tried doing an each() of function (index) like so:
$('.inline').each(function(index) {
$(document).on("click", '.modal', function() {
// relevant code
});
});
I bound it to a delegated event since I have to activate via an on:click. However the element still seems to duplicate itself?
HTML:
<a href=".inline" class="modal" data-featherlight>Inline</a>
<div class="inline">
<ul class="gal">
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg"> TEST!!!!
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg"> YEAH!!!
</ul>
</div>
<a href=".inline-two" class="modal" data-featherlight>Inline2</a>
<div class="inline-two">
<ul class="gal">
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-1.jpg"> asfasdf
</li>
<li data-thumb="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg">
<img src="http://sachinchoolur.github.io/lightslider/img/cS-2.jpg"> YEAH!!!
</ul>
</div>
jQuery:
$(document).each(function(index) {
$('.modal').on("click", function() {
$('.gal').lightSlider({
gallery: true,
item: 1,
loop: true,
thumbItem: 9,
slideMargin: 0,
enableDrag: false,
currentPagerPosition: 'left',
onSliderLoad: function(el) {
el.lightGallery({
selector: '.gal .lslide'
});
}
});
})
});
Why is the carousel essentially duplicate the navigation and bugging out?
Note I tried doing loop: false as well, and it didn't change anything.
I currently have one bigSlide menu happily working on my page and are looking to incorporate another. The documentation does not make it clear at to whether this is possible. I've tried a few things to no avail. Has anybody had any success with having two bigSlide menus on the one page?
jQuery code used for the first menu is shown below:
$(document).ready(function() {
$('.menu-link').bigSlide({
menu: ('#menu'),
push: ('.push'),
menuWidth: '30.6em',
side: 'left',
speed: '300',
state: 'closed',
activeBtn: 'active',
easyClose: false,
});
});
With the associated HTML being:
<nav id='menu' class='panel' role='navigation'>
<span>
// stuff for the menu
</span>
</nav>
<div class='wrap'>
</div>
You already have all of the components in your question to make this solution work.
First, add a 2nd anchor tag as per below, and change the href and class to something unique, this lets you target these specifically when they're clicked on.
<div class='wrap'>
</div>
Once done, you can then modify your script to the following; being sure to modify your class and menu as per your 2nd anchor tag above.
$(document).ready(function() {
$('.menu-link').bigSlide({
menu: ('#menu'),
push: ('.push'),
menuWidth: '30.6em',
side: 'left',
speed: '300',
state: 'closed',
activeBtn: 'active',
easyClose: false,
});
$('.menu-link2').bigSlide({
menu: ('#menu2'),
push: ('.push'),
menuWidth: '30.6em',
side: 'left',
speed: '300',
state: 'closed',
activeBtn: 'active',
easyClose: false,
});
});
EDIT: In my haste i forgot some of your form elements. Here you would create the 2nd menu alongside your first, ensuring you reference the right ID.
<nav id='menu' class='panel' role='navigation'>
<span>
// stuff for the menu
</span>
</nav>
<nav id='menu2' class='panel' role='navigation'>
<span>
// stuff for the second menu
</span>
</nav>
Got an annoying bug i can't fix.
I append a div and put the slider markup inside
$(article_box).append('[MARKUP]');
$('#screenshot-carousel').carouFredSel({
responsive: true,
// scroll: { fx: "crossfade", duration: "1500" },
items: {
width: 580
},
auto: false,
prev : {
button : ".event .prevPhoto",
key : "left"
},
next : {
button : ".event .nextPhoto",
key : "right"
}
});
Here markup is:
<div class="photo-block" id="'+id+'">
<i class="icon-red icon-in-nav icon-remove"></i>
<div class="controls">
<p class="slides-counter"><span id="the_num">0</span> из <span id="out_of">0</span></p>
</div>
<ul id="screenshot-carousel" class="fixclear">
<li><a class="prettyPhoto_transparent" href="<?php echo Yii::app()->request->baseUrl; ?>/fileuploader/index.html?iframe=true&height=600"><img src="/images/quotes/addImages600.jpg" alt=""></a></li>
<li id="additional"><a class="prettyPhoto_transparent" href="<?php echo Yii::app()->request->baseUrl; ?>/fileuploader/index.html?iframe=true&height=600"><img src="/images/quotes/addImages600.jpg" alt=""></a></li>
</ul>
</div>
What i get: the code inserts the markup, and i can see it in browser code viewer (images are there and i can open them in separate tab), but i can't see images in slider. Slider doesn't show slides, actually. All i see is control buttons. There is no bug shown in console , so the code seems to be clear, but what's wrong with showing slides/images?