I have a group of images on which I have used slick lightbox.
https://github.com/mreq/slick-lightbox
I am currently working for an arabic site and that is why I want the carousel to work in Right-to-left direction.When I put the dir="html" attribute in the html tag,it breaks the carousel.It works with the rtl tag strictly on the parent of slick lightbox.
Codepen : https://codepen.io/shivanit2/pen/jQBrwB
HTML markup
<html dir="rtl">
<body>
<div class="content">
<h1 class="content-title">Gallery</h1>
<div class="gallery js-gallery">
<div class="gallery-item">
<div class="gallery-img-holder js-gallery-popup">
<img src="https://picsum.photos/600/500" alt="" class="gallery-img">
</div>
</div>
<div class="gallery-item">
<div class="gallery-img-holder js-gallery-popup">
<img src="https://picsum.photos/700/500" alt="" class="gallery-img">
</div>
</div>
<div class="gallery-item">
<div class="gallery-img-holder js-gallery-popup">
<img src="https://picsum.photos/800/500" alt="" class="gallery-img">
</div>
</div>
</div>
</div>
</body>
</html>
JS
$('.js-gallery').slickLightbox({
src: 'src',
itemSelector: '.js-gallery-popup img',
background: 'rgba(0, 0, 0, .7)'
});
What modifications can I do to make the plugin to support RTL?
You can add the following style rule to reset the direction.
.lg-outer {
direction: ltr;
}
Related
I am using AOS library for animations. When I use the animation slide-left and slide-right, the width of the page becames wider that the body width, making the whole page look weird. I couldnt find any solution online and the only solution I figured out is if I give the elements which I apply the animation on a width in px (it cannot be bigger than 400px for whatever reason). However, that solution doesnt really work as it destroys up my css too. I have provided a js fiddle so you can see what I mean. Ive been spending hours on that so if anyone can help, I would be truly happy! Thanks!!
https://jsfiddle.net/Lca8n0ue/
code:
<div style="background-color:red; height:300px;"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="container-fluid">
<div class="row center-block wrapper">
<div class="col-sm-6 test" data-aos="slide-right">
<h2 class="text-center">title</h2>
<p class="text-center">app</p>
<div>
<img class="img-fluid center-block" width="350" height="320" src="http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="">
</div>
</div>
<div class="col-sm-6 test2" data-aos="slide-left">
<h2 class="text-center">title</h2>
<p class="text-center">appp</p>
<div>
<img class="img-fluid center-block" width="350" height="320" src="http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="">
</div>
</div>
<div class="col-sm-6 test" data-aos="slide-right">
<h2 class="text-center">title</h2>
<p class="text-center">app</p>
<div>
<img class="img-fluid center-block" width="350" height="320" src="http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="">
</div>
</div>
<div class="col-sm-6 test2" data-aos="slide-left">
<h2 class="text-center">title</h2>
<p class="text-center">appp</p>
<div>
<img class="img-fluid center-block" width="350" height="320" src="http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="">
</div>
</div>
</div>
</div>
js:
AOS.init();
ONLY THING THAT HELPS BUT RUINS CSS IS:
.test{
width: 400px;
}
.test2{
width: 400px;
}
Although I'm not completely sure WHY is it so (I had the same problem a lot of time) there is another way to fix this.
Just set overflow-x: hidden on the parent element.
In your case this would be .container-fluid.
I have two owl carousel. And one is over the other. One is image with some content and other is only content. And the both slider needs to change together.
This the code below for content slider
<div id="owkey-content-slider" class="owl-carousel">
<div class="item">
<div class="slider-content">
<h4>WE CREATE</h4>
</div>
</div>
<div class="item">
<div class="slider-content">
<h4>WE BUILD</h4>
</div>
</div>
<div class="item">
<div class="slider-content">
<h4>WE OFFER</h4>
</div>
</div>
<div class="item">
<div class="slider-content">
<h4>WE DELIVER</h4>
</div>
</div>
</div>
This is the codes for image slider
<div class="header-bg-image-slide">
<div id="owkey-bg-slider" class="owl-carousel">
<div class="item">
<img src="img/owkey-slider-2.jpg">
<div class="number-item">01</div>
</div>
<div class="item">
<img src="img/owkey-slider.jpg">
<div class="number-item">02</div>
</div>
<div class="item">
<img src="img/shutterstock_327808505.jpg">
<div class="number-item">03</div>
</div>
<div class="item">
<img src="img/owkey-head.png">
<div class="number-item">04</div>
</div>
</div>
And they are initialized in the same conditions/parameters. They are changing together. But, when button was clicked those buttons are for the image slider and that doesn't change the other slider's contents certainly.
<script type="text/javascript">
$(document).ready(function() {
var owl = $("#owkey-bg-slider, #owkey-content-slider");
owl.owlCarousel({
navigation : true,
navigationText: ["<i class=\"fa fa-angle-up\">","<i class=\"fa fa-angle-down\">"],
singleItem : true,
transitionStyle : "fade",
autoPlay: true,
touchDrag: false,
mouseDrag: false
});
})
</script>
And I think experienced owl carousel user can help me in this.
There are solution for this problem in here that is for any other kind of slider but not for owl carousel.
Use Flickity Slider, it's a much better slider plugin.
So I'm creating a image marquee for a mobile site that uses iDangerous Swiper plugin and have run into a issue when trying to use it. Following the set up based on the site, found here, I built my demo page to the exact spec of their demo. But for some reason, the function isn't running and I cant swipe to the next div. Being a mobile site, I'm using Jquery and Jquery Mobile. Any ideas?
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<!--First Slide-->
<div class="swiper-slide">
<img src="img/1.png" width="200" height="118">
</div>
<!--Second Slide-->
<div class="swiper-slide">
<img src="img/2.png" width="200" height="118">
</div>
<!--Third Slide-->
<div class="swiper-slide">
<img src="img/3.png" width="200" height="118">
</div>
<!--Fourth Slide-->
<div class="swiper-slide">
<img src="img/4.png" width="200" height="118">
</div>
<!--Fifth Slide-->
<div class="swiper-slide">
<img src="img/5.png" width="200" height="118">
</div>
</div>
</div>
<script>
$(function(){
var mySwiper = $('.swiper-container').swiper(options);
})
</script>
</body>
To use buttons for Swiper you need to use .swipeNext() and .swipePrev() methods on mySwiper object like:
<!-- Add somewhere in HTML your buttons:-->
<span class="button-next">Next button</span>
<span class="button-prev">Previous button</span>
<script>
$(function(){
var mySwiper = $('.swiper-container').swiper();
//"Next" button - some HTML element with "button-next" class
$('.button-next').click(function(){mySwiper.swipeNext()})
//"Prev" button - some HTML element with "button-prev" class
$('.button-prev').click(function(){mySwiper.swipePrev()})
})
</script>
iDangero.us here!:) Your HTML is correct. But what is "options" in your example? this should be an object with parameters or if you want to use default options then just remove "options" word from your example like: var mySwiper=$('.swiper-container').swiper()
I am trying to cycle my image and blur the background image but the problem is it only blurs the first image but not the next image.
<div id="banner_images">
<div id="banner_cycle_wrapper">
<div id="banner_bg_cycle">
<img src="source.png" class="blur">
</div>
<div id="banner_cycle_container">
<img src="source.png">
</div>
</div>
<div id="banner_cycle_wrapper" >
<div id="banner_bg_cycle">
<img alt="" src="source.png" class="blur">
</div>
<div id="banner_cycle_container">
<img src="source.png">
</div>
</div>
</div>
$('#banner_images').cycle({
fx: 'fade',
timeout: 2000
});
$(".blur").pixastic("blurfast", {amount:0.5});
I think you are missing CLASS to add in that
class="blur"
this should be added to each image you want to have the same effect.
Updated Code:
<div id="banner_images">
<div id="banner_cycle_wrapper">
<div id="banner_bg_cycle">
<img alt="" src="source.png"/>
</div>
<div id="banner_cycle_container">
<img alt="" src="img1.png" class="blur" />
<img alt="" src="img2.png" class="blur" />
</div>
</div>
</div>
I hope this will help :)
I have a strange problem with Twitter Bootstrap Carousel. Please have a look at http://www.bettondesignwork.co.uk/cheapbeds4u/
At the moment there are three identical images. The first image loads OK but when the second image slides in the height of the containing div animates to 0px. As well as this an extra div is generated around the carousel .
Actual html:
<section id="top" class="container">
<div id="TopCarousel" class="moduletable carousel slide">
<div class="carousel-inner">
<div class="item">
<img src="images/slideshow/homepage/01.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/02.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/03.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
</div>
</div>
</section>
Rendered HTML:
<section id="top" class="container">
<div style="margin: 0px 0px 20px; position: relative; overflow: hidden; height: 0px;">
<div id="TopCarousel" class="moduletable carousel slide" style="margin: -340px 0px 0px; overflow: hidden;">
<div class="carousel-inner">
<div class="item active">
<img src="images/slideshow/homepage/01.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/02.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
<div class="item">
<img src="images/slideshow/homepage/03.jpg" alt="" />
<div class="carousel-caption"></div>
</div>
</div>
</div>
</div>
</section>
Any help would be greatly appreciated. Thank you.
This is a problem with Joomla 3.0 and the Bootstrap carousel function. As pointed out in the comment above Mootools and jQuery run together by default on a J3 install.
The fix for me was to install and activate this plugin - http://extensions.joomla.org/extensions/core-enhancements/performance/mootools/15748
This fixes the problem for me as can be seen here:
http://www.littledonkey.net
Beware though that this disables mootools completely so somethings may stop working as expected...
Cheers,
Adam