Develop Reference

JQuery bxslider wrong calculation after scale container for horizontal mode

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();
});
});
});

Add class to external navigation when slide auto-play happens : anythingSlider

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/

Image Gallery carousel from right to left direction not working when changing css properties

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;
}

Running multiple slideshow loops

I have four slideshows on one page that I want to just run in loops. They're quite simple, based on Jon Raasch's simple JQuery slideshow.
I'm great with mark-up and CSS, but not yet very proficient with javascript. Right now, I can get one slideshow to work, but not four at the same time. I would love some help getting all four to work. Thanks!
JS:
<script type="text/javascript" src="js/jquery.bxslider.min.js"></script>
<script type="text/javascript">
$('#slider1').bxSlider({
auto: true,
autoControls: true,
pause: 3000,
slideMargin: 20
});
$('#slider2').bxSlider({
auto: true,
autoControls: true,
pause: 3000,
slideMargin: 20
});
$('#slider3').bxSlider({
auto: true,
autoControls: true,
pause: 3000,
slideMargin: 20
});
$('#slider4').bxSlider({
auto: true,
autoControls: true,
pause: 3000,
slideMargin: 20
});
</script>
CSS:
.slider {
position: relative;
float: right;
padding-right: 400px;
margin-left: 40px;
height: 350px;
}
.slider img {
position: absolute;
max-width: 350px;
height: auto;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
top: 0;
left: 0;
z-index: 8;
}
Mark-up:
<div>
<div class="slider">
<ul id="slider1">
<li><img src="images/.../art-1.jpg" /></li>
<li><img src="images/.../art-2.jpg" /></li>
<li><img src="images/.../art-3.jpg" /></li>
<li><img src="images/.../art-4.jpg" /></li>
<li><img src="images/.../art-5.jpg" /></li>
</ul>
</div>
</div>
<div>
<div class="slider">
<ul id="slider2">
<li><img src="images/.../bnl-1.jpg" /></li>
<li><img src="images/.../bnl-2.jpg" /></li>
<li><img src="images/.../bnl-3.jpg" /></li>
<li><img src="images/.../bnl-4.jpg" /></li>
<li><img src="images/.../bnl-5.jpg" /></li>
</ul>
</div>
</div>
<div>
<div class="slider">
<ul id="slider3">
<li><img src="images/.../bge-1.jpg" /></li>
<li><img src="images/.../bge-2.jpg" /></li>
<li><img src="images/.../bge-3.jpg" /></li>
<li><img src="images/.../bge-4.jpg" /></li>
<li><img src="images/.../bge-5.jpg" /></li>
</ul>
</div>
</div>
<div>
<div class="slider">
<ul id="slider4">
<li><img src="images/.../rtb-1.jpg" /></li>
<li><img src="images/.../rtb-2.jpg" /></li>
<li><img src="images/.../rtb-3.jpg" /></li>
<li><img src="images/.../rtb-4.jpg" /></li>
<li><img src="images/.../rtb-5.jpg" /></li>
</ul>
</div>
</div>

The problem with a simple slideshow is that it's, well, simple. Consider switching to bxSlider or Bootstrap's slider, both of which accommodate multiple instances out of the box.
If you really want to fight with this one, pass the slideSwitch() function an ID and use that instead of '#slideshow'.
function slideSwitch(id, switchSpeed, activeClass) {
var $active = $(id + ' IMG.' + activeClass);
...
You could also {gag} copy the function 3 times and change the ID in each of those, effectively running the script four times.
function slideSwitch1(switchSpeed,activeClass) {
var $active = $('#slideshow1 IMG.' + activeClass);
function slideSwitch2(switchSpeed,activeClass) {
var $active = $('#slideshow2 IMG.' + activeClass);
...

Popup doesn't show images

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.