Running multiple slideshow loops - javascript

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);
...

Related

Replace article with div with a button that will stay and can toggle between article and div content

I want with jQuery when I click the button to toggle the content between the article and the div.
jQuery so far, but its not working as intended.
Thats all i have, i will appreciate if you guys could guide me.
$('.gal').on('click',function(){
if($('article').css('display')!='none'){
$('#vnav').html($('#vnav').html()).show().siblings('div').hide();
}else if($('#vnav').css('display')!=='none'){
$('#vnav').show().siblings('div').hide();}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="gal">Gallery</button></div>
<article>some content inside</article>
<div id="vnav" style="display:none;">
<ul id="horizontal">
<li><img src="images/1.jpg" width="782" alt="" height="440" /></li>
<li><img src="images/2.jpg" width="782" alt="" height="440" /></li>
<li><img src="images/3.jpg" width="782" alt="" height="440" /></li>
<li><img src="images/4.jpg" width="782" alt="" height="440" /></li>
<li><img src="images/5.jpg" width="782" alt="" height="440" /></li>
</ul>
</div>
Thanks in advance!

You just need to write this code to toggle between article & div on button click.
$('.gal').on('click',function(){
$('article').toggle();
$('#vnav').toggle();
});

You can try this https://jsfiddle.net/2Lzo9vfc/170/
JS
var show = true;
$('.gal').click(function() {
if(show == true) {
$('article').hide(200);
$('#vnav').show(200);
show = false;
} else {
$('#vnav').hide(200);
$('article').show(200);
show = true;
}
});

jQuery - If left <= 0, set css to X amount

I've created a scrolling script but i need it to loop when a set div gets to so many pixels to the left, here's my script to do it all but there's no such luck in getting it to work.
var scrollerwidth = 0;
$(window).load(function () {
$('.scroller ul li').each(function() {
scrollerwidth += ($(this).width() + 40);
});
$(".scrollerTwo").css({left: scrollerwidth});
ulScrolls();
});
function ulScrolls(){
$(".scroller, .scrollerTwo").animate({'left': '-=10px'}, 100);
ulScrolls();
}
$(document).ready(function() {
var scrollertwoleft = $(".scrollerTwo").offset().left;
scrollertwoleft = parseInt(scrollertwoleft, 10);
scrollerwidth = parseInt(scrollerwidth, 10);
if(scrollertwoleft <= 100){
$(".scroller").css({left: scrollerwidth});
alert("derp");
}else{
alert(scrollertwoleft);
}
});
Also here's the html that it's putting out(note that the jQuery generates the left positions
<div id="homeSponsorsContent">
<div class="scroller" style="left: -990px;">
<ul>
<li><img src="images/abplogo.png"></li>
<li><img src="images/ansellogo.png"></li>
<li><img src="images/balfourlogo.png"></li>
<li><img src="images/beallogo.png"></li>
<li><img src="images/nhslogo.png"></li>
<li><img src="images/consortlogo.png"></li>
<li><img src="images/brocklesbylogo.png"></li>
<li><img src="images/bupalogo.png"></li>
<li><img src="images/greenergylogo.png"></li>
<li><img src="images/hullcitylogo.png"></li>
<li><img src="images/wittlogo.png"></li>
<li><img src="images/outredlogo.png"></li>
<li><img src="images/omglogo.png"></li>
<li><img src="images/manchesterlogo.png"></li>
<li><img src="images/northumbrialogo.png"></li>
<li><img src="images/mimaslogo.png"></li>
</ul>
</div>
<div class="scrollerTwo" style="left: 2164px;">
<ul>
<li><img src="images/abplogo.png"></li>
<li><img src="images/ansellogo.png"></li>
<li><img src="images/balfourlogo.png"></li>
<li><img src="images/beallogo.png"></li>
<li><img src="images/nhslogo.png"></li>
<li><img src="images/consortlogo.png"></li>
<li><img src="images/brocklesbylogo.png"></li>
<li><img src="images/bupalogo.png"></li>
<li><img src="images/greenergylogo.png"></li>
<li><img src="images/hullcitylogo.png"></li>
<li><img src="images/wittlogo.png"></li>
<li><img src="images/outredlogo.png"></li>
<li><img src="images/omglogo.png"></li>
<li><img src="images/manchesterlogo.png"></li>
<li><img src="images/northumbrialogo.png"></li>
<li><img src="images/mimaslogo.png"></li>
</ul>
</div>
</div>
live Demo
I'd appreciate any help on the matter, thank you

repeated call of ulScrolls should something like
setTimeout(function() { ulScrolls() }, 120);
to prevent call stack exceeding and to give time for animation to work.
checking for .scroller and .scrollerTwo CSS left value should be in ulScrolls.
li width set to "45px" for testing.
Fiddle
So in total code should look like:
var scrollerwidth = 0;
$(document).ready(function()
{
$('.scroller ul li').each(function()
{
scrollerwidth += $(this).width() + 40;
});
$(".scrollerTwo").css({left: scrollerwidth});
ulScrolls();
});
function ulScrolls()
{
var scrollertwoleft = parseInt($(".scrollerTwo").css('left'));
if (scrollertwoleft <= -scrollerwidth)
{
$(".scrollerTwo").css({left: scrollerwidth});
}
else
{
var scrolleroneleft = parseInt($(".scroller").css('left'));
if (scrolleroneleft <= -scrollerwidth)
{
$(".scroller").css({left: scrollerwidth});
}
}
$(".scroller, .scrollerTwo").animate({'left': '-=10px'}, 100);
setTimeout(function() { ulScrolls(); }, 120);
}

Window.load works only after browser tab change

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

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

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.

Categories

Resources