Hi I have a bxslider which is in a transformed/scaled container. How can I correct the calculation of the slide position. It seems like a normal reload doesn't affect the calculation when its container is scaled.
//EDIT: I found out that this problem effects not the fade mode of the bxslider, so this could be a workaround...
How can the horizontal mode of the bxslider be fix, when the whole container got scaled down?
See my example: http://jsfiddle.net/wittich/umgwrh3b/
HTML
<div class="container">
<ul class="bxslider">
<li><img src="http://bxslider.com/images/730_200/hill_road.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
</ul>
<ul class="bxslider">
<li><img src="http://bxslider.com/images/730_200/tree_root.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/hill_road.jpg" /></li>
<li><img src="http://bxslider.com/images/730_200/trees.jpg" /></li>
</ul>
</div>
<p>Click to reload slider</p>
JS
jQuery(document).ready(function(){
var sliders = [];
jQuery('.bxslider').each(function(i,item){
var slider = $(this);
slider.bxSlider({
auto: true,
mode: 'horizontal'
});
sliders[i] = slider;
});
$('.container').css('transform', 'scale(0.8)');
$(sliders).each(function(){
this.reloadSlider();
});
$('#reload-slider').click(function(e){
e.preventDefault();
$(sliders).each(function(){
this.reloadSlider();
});
});
});
Related
My anythingSlider looks like this
<link rel="stylesheet" href="http://css-tricks.github.com/AnythingSlider/css/theme-metallic.css">
<div id="externalNav">
Goto One |
Two |
Three |
Four
</div>
<br><br>
<ul id="slider">
<li><img src="http://placekitten.com/300/200" alt="" /></li>
<li><img src="http://placehold.it/300x200" alt="" /></li>
<li><img src="http://placebear.com/300/200" alt="" /></li>
<li><img src="http://lorempixel.com/300/200" alt="" /></li>
<li><img src="http://placedog.com/300/200" alt="" /></li>
</ul>
$('#slider').anythingSlider({
// If true, builds a list of anchor links to link to each panel
buildNavigation: false,
autoPlay: true
});
When autoplay happens and first slide is active I want to add a class to One (and so on for next slides) so that I can show it as selected. Can any one point out what is the correct approach to make this?
JsFiddle
The AnythingSlider Wiki has just the example you wanted:
Custom, external navigation controls (with updating "cur" class)
var nav = $('#externalNav a'),
updateNav = function(page){
nav
.removeClass('cur')
.eq(page).addClass('cur');
}
$('#slider').anythingSlider({
// If true, builds a list of anchor links to link to each panel
buildNavigation: false,
onInitialized: function(e, slider) {
updateNav(slider.currentPage-1);
},
// Callback before slide animates
onSlideBegin: function(e, slider) {
updateNav(slider.targetPage-1);
}
});
// set up external links
nav.click(function(){
var slide = $(this).attr('href').substring(1);
$('#slider').anythingSlider(slide);
return false;
});
Demo: http://jsfiddle.net/Mottie/ycUB6/76/
Can anyone recommend any good product auto slider with buttons. I am new to jquery so any good easy jquery slider would be fine. I am looking to build this kind of slider
.And when click on the image then it should open the clicked image with description like this . Any help of how can i make this slider would be appreciated thanks in the advance.
popup: colorbox
slider: elastislide-responsive-carousel
http://jsfiddle.net/ckraoftt/1/
HTML:
<div class="column">
<ul id="carousel" class="elastislide-list">
<li><img src="img44" alt="image04" /></li>
<li><img src="img33" alt="image03" /></li>
<li><img src="img22" alt="image02" /></li>
<li><img src="img11" alt="image01" /></li>
</ul>
</div>
JQ:
$( '#carousel' ).elastislide( {
orientation : 'vertical'
} );
$('#carousel a').colorbox({photo :true});
EDIT2:
http://jsfiddle.net/ckraoftt/7/
for all a tag add 2 attr:
data-txt="image 4 4000$" //text after image
data-button-url="http://test.com/shop/4" //url for button Shop
JQ
$( '#carousel' ).elastislide( {
orientation : 'vertical'
} );
$('#carousel a').colorbox({
html:function(){
var src=$(this).attr('href');
var txt=$(this).attr('data-txt');
var url=$(this).attr('data-button-url');
var img='<img src="'+src+'">';
var text= '<div class="pp_txt">'+txt+'</div>';
var btn='<a class="pp_btn" href="'+url+'">SHOP</a>';
var html='<div class="popup">'+img+text+btn+'</div>';
return html;
}
I am using flex slider with multiple instance, the first slider works fine, but other slides are only showing correctly after changed browser tab and get back, but second slide's thumbnails show after only changed browser tab again.
How can I make them work same time, I mean they should be working when page loads first time.
Here is my code
<script>
$(window).load(function() {
// The slider being synced must be initialized first
$('#carousel').flexslider({
animation : "slide",
controlNav : false,
animationLoop : false,
slideshow : false,
itemWidth : 220,
itemMargin : 5,
asNavFor : '#slider'
});
$('#slider').flexslider({
animation : "slide",
controlNav : false,
animationLoop : false,
slideshow : false,
sync : "#carousel"
});
$('#slider2').flexslider({
animation : "slide",
controlNav : false,
animationLoop : false,
slideshow : false
});
$('#carousel2').flexslider({
animation : "slide",
controlNav : false,
animationLoop : false,
slideshow : false,
itemWidth : 220,
itemMargin : 5,
asNavFor : '#slider2'
});
</script>
<html>
<div id="slider" class="flexslider">
<ul class="slides">
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_caramel.jpg"
style="height: 580px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_cheesecake_brownie.jpg"
style="height: 580px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_donut.jpg"
style="height: 580px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_lemon.jpg"
style="height: 580px;" /></li>
<!-- items mirrored twice, total of 12 -->
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_caramel.jpg"
style="height: 580px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_cheesecake_brownie.jpg"
style="height: 580px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_donut.jpg"
style="height: 580px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_lemon.jpg"
style="height: 580px;" /></li>
</ul>
</div>
<div id="carousel" class="flexslider flex_carousel">
<div class="carousel_icon"></div>
<ul class="slides pull-left">
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_caramel.jpg"
style="height: 80px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_cheesecake_brownie.jpg"
style="height: 80px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_donut.jpg"
style="height: 80px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_lemon.jpg"
style="height: 80px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_caramel.jpg"
style="height: 80px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_cheesecake_brownie.jpg"
style="height: 80px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_donut.jpg"
style="height: 80px;" /></li>
<li><img
src="assets/FlexSlider/demo/images/kitchen_adventurer_lemon.jpg"
style="height: 80px;" /></li>
<!-- items mirrored twice, total of 12 -->
</ul>
</div>
</html>
********* EDITED **********
You can see it online here http://goo.gl/cHMaBq
First tab (one star) works perfect.
There is no image on second tab, please go to another browser tab and return , you will see the slider works, but no thumbnail. Please go to another browser tab again and return, thumbnails will be shown.
Thanks
I've fixed it, pictures were rendered, but don't show until I resize browser.
So , this problem has been fixed this issue.
$('a[data-toggle="tab"]').click(function() {
setTimeout(function() {
$(window).trigger('resize');
}, 0);
setTimeout(function() {
$(window).trigger('resize');
}, 2)
});
I am working on an image gallery and it works fine for the English version but i need to replicate same for the other version of the website and need to make it work in RTL direction. When i css 'direction:rtl' it breaks the thumbnail script and next | prev navigation doesn't work anymore.
I tried to change many a thing but none seems to work i even made some minor changes to the gallery.js but that didn't even fix the issue.
I am not sure how to create a make everything work for thumbnail carousel when direction:rtl.
I need this for Arbic version of website and Arabic is RTL not like English which is LTR.
Fiddle Link http://jsfiddle.net/f4XDj/
Updated Link http://jsfiddle.net/f4XDj/1/
Actual gallery sample link http://tympanus.net/Tutorials/ResponsiveImageGallery/
Partial HTML Code
<div id="rg-gallery" class="rg-gallery">
<div class="rg-thumbs">
<!-- Elastislide Carousel Thumbnail Viewer -->
<div class="es-carousel-wrapper">
<div class="es-nav">
<span class="es-nav-prev">Previous</span>
<span class="es-nav-next">Next</span>
</div>
<div class="es-carousel">
<ul>
<li><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded" /></li>
<li><img src="images/thumbs/2.jpg" data-large="images/2.jpg" alt="image02" data-description="A plaintful story from a sistering vale" /></li>
<li><img src="images/thumbs/3.jpg" data-large="images/3.jpg" alt="image03" data-description="A plaintful story from a sistering vale" /></li>
<li><img src="images/thumbs/4.jpg" data-large="images/4.jpg" alt="image04" data-description="My spirits to attend this double voice accorded" /></li>
<li><img src="images/thumbs/5.jpg" data-large="images/5.jpg" alt="image05" data-description="And down I laid to list the sad-tuned tale" /></li>
<li><img src="images/thumbs/6.jpg" data-large="images/6.jpg" alt="image06" data-description="Ere long espied a fickle maid full pale" /></li>
<li><img src="images/thumbs/7.jpg" data-large="images/7.jpg" alt="image07" data-description="Tearing of papers, breaking rings a-twain" /></li>
<li><img src="images/thumbs/8.jpg" data-large="images/8.jpg" alt="image08" data-description="Storming her world with sorrow's wind and rain" /></li>
<li><img src="images/thumbs/9.jpg" data-large="images/9.jpg" alt="image09" data-description="Upon her head a platted hive of straw" /></li>
<li><img src="images/thumbs/10.jpg" data-large="images/10.jpg" alt="image10" data-description="Which fortified her visage from the sun" /></li>
<li><img src="images/thumbs/11.jpg" data-large="images/11.jpg" alt="image11" data-description="Whereon the thought might think sometime it saw" /></li>
<li><img src="images/thumbs/12.jpg" data-large="images/12.jpg" alt="image12" data-description="The carcass of beauty spent and done" /></li>
<li><img src="images/thumbs/13.jpg" data-large="images/13.jpg" alt="image13" data-description="Time had not scythed all that youth begun" /></li>
<li><img src="images/thumbs/14.jpg" data-large="images/14.jpg" alt="image14" data-description="Nor youth all quit; but, spite of heaven's fell rage" /></li>
<li><img src="images/thumbs/15.jpg" data-large="images/15.jpg" alt="image15" data-description="Some beauty peep'd through lattice of sear'd age" /></li>
<li><img src="images/thumbs/16.jpg" data-large="images/16.jpg" alt="image16" data-description="Oft did she heave her napkin to her eyne" /></li>
<li><img src="images/thumbs/17.jpg" data-large="images/17.jpg" alt="image17" data-description="Which on it had conceited characters" /></li>
<li><img src="images/thumbs/18.jpg" data-large="images/18.jpg" alt="image18" data-description="Laundering the silken figures in the brine" /></li>
<li><img src="images/thumbs/19.jpg" data-large="images/19.jpg" alt="image19" data-description="That season'd woe had pelleted in tears" /></li>
<li><img src="images/thumbs/20.jpg" data-large="images/20.jpg" alt="image20" data-description="And often reading what contents it bears" /></li>
<li><img src="images/thumbs/21.jpg" data-large="images/21.jpg" alt="image21" data-description="As often shrieking undistinguish'd woe" /></li>
<li><img src="images/thumbs/22.jpg" data-large="images/22.jpg" alt="image22" data-description="In clamours of all size, both high and low" /></li>
<li><img src="images/thumbs/23.jpg" data-large="images/23.jpg" alt="image23" data-description="Sometimes her levell'd eyes their carriage ride" /></li>
<li><img src="images/thumbs/24.jpg" data-large="images/24.jpg" alt="image24" data-description="As they did battery to the spheres intend" /></li>
</ul>
</div>
</div>
<!-- End Elastislide Carousel Thumbnail Viewer -->
</div><!-- rg-thumbs -->
</div><!-- rg-gallery -->
I write new rule for a your example from tympanus and for me working:
.rg-caption p {
direction: rtl;
}
and I delete this rule:
.rg-caption{
text-align: center;
}
so if you would change a direction in carousel you must change this part:
$navPrev.bind('click.rgGallery', function( event ) {
_navigate( 'left' );
return false;
});
$navNext.bind('click.rgGallery', function( event ) {
_navigate( 'right' );
return false;
});
// add touchwipe events on the large image wrapper
$imgWrapper.touchwipe({
wipeLeft : function() {
_navigate( 'right' );
},
wipeRight : function() {
_navigate( 'left' );
},
preventDefaultEvents: false
});
$(document).bind('keyup.rgGallery', function( event ) {
if (event.keyCode == 39)
_navigate( 'right' );
else if (event.keyCode == 37)
_navigate( 'left' );
});
}
},
_navigate = function( dir ) {
// navigate through the large images
if( anim ) return false;
anim = true;
if( dir === 'right' ) {
if( current + 1 >= itemsCount )
current = 0;
else
++current;
}
else if( dir === 'left' ) {
if( current - 1 < 0 )
current = itemsCount - 1;
else
--current;
}
I have in my project a popup into my body tag and have a several data-role pages.
On each page have a button when the user click open this popup.
My problem is that I can open the popup window, but this popup contains a bxslider gallery for images and this images don't show.
Here is my code:
Paginas
Script:
$(document).on('pagebeforeshow', '#p36', function () {
$('#Paginasnocentro1234').hide();
});
$(document).on('click', '#blabla', function () {
$('#Paginasnocentro1234').toggle();
Popup:
<div data-role="popup" id="Paginasnocentro1234" data-theme="a" style="top:45px;position:absolute">
<div class="slider">
<ul class="bxslider" id="paginacao">
<li><img src="imagens/paginas/1.jpg" /></li>
<li><img src="imagens/paginas/2.jpg" /></li>
<li><img src="imagens/paginas/3.jpg" /></li>
<li><img src="imagens/paginas/4.jpg" /></li>
<li><img src="imagens/paginas/5.jpg" /></li>
<li><img src="imagens/paginas/6.jpg" /></li>
<li><img src="imagens/paginas/7.jpg" /></li>
<li><img src="imagens/paginas/8.jpg" /></li>
<li><img src="imagens/paginas/9.jpg" /></li>
</ul></div>
</div>
In Chrome, right click and inspect element in pop-up where the images "should" be. Find out what rule is being over-written. From there you'll see how to fix it.