We Keep Coding

Add jQuery Mobile Swipe functionality to slideshow

I am working with a JS slideshow. My problem is that I don't know very well how to add the swipe functionality for mobiles. I'm trying with the next code with no success, I can not make it work:
HTML
<div class="gallery" id="gallery-001">
<div class="gallery-frame">
<div class="gallery-slide">
<img class="gallery-picture" src="https://images.unsplash.com/photo-1465935343323-d742334bcbda?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
<p class="gallery-caption">Slide 01</p>
</div>
<div class="gallery-slide">
<img class="gallery-picture" src="https://images.unsplash.com/photo-1443890923422-7819ed4101c0?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
<p class="gallery-caption">Slide 02</p>
</div>
<div class="gallery-slide">
<img class="gallery-picture" src="https://images.unsplash.com/photo-1474861644511-0f2775ae97cc?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1925">
<p class="gallery-caption">Slide 03</p>
</div>
</div>
</div>
JS
(function() {
//on page load - show first slide, hide the rest
init();
function init() {
parents = document.getElementsByClassName('gallery');
for (j = 0; j < parents.length; j++) {
var slides = parents[j].getElementsByClassName("gallery-slide");
slides[0].classList.add('active-gallery-slide');
}
}
//mobile swipe right functionality
jQuery( ".gallery-frame" ).on( "swiperight", function( event ) {
current = this;
var slides = current.getElementsByClassName("gallery-slide");
curr_slide = current.getElementsByClassName('active-gallery-slide')[0];
curr_slide.classList.remove('active-gallery-slide');
if (curr_slide.nextElementSibling) {
curr_slide.nextElementSibling.classList.add('active-gallery-slide');
} else {
slides[0].classList.add('active-gallery-slide');
}
})
//mobile swipe left functionality
jQuery( ".gallery-frame" ).on( "swipeleft", function( event ) {
current = this;
var slides = current.getElementsByClassName("gallery-slide");
curr_slide = current.getElementsByClassName('active-gallery-slide')[0];
curr_slide.classList.remove('active-gallery-slide');
if (curr_slide.previousElementSibling) {
curr_slide.previousElementSibling.classList.add('active-gallery-slide');
} else {
slides[0].classList.add('active-gallery-slide');
}
})
})();
Please check codepen for my code: CODEPEN

Content slider with dynamic height

I'm using a slider from below website
http://callmenick.com/post/responsive-content-slider
This slider is responsive but i would like to know how to make the slider main div height auto adjust depending on the content.
This is the slider code
JS:
(function($) {
$.fn.cslide = function() {
this.each(function() {
var slidesContainerId = "#"+($(this).attr("id"));
var len = $(slidesContainerId+" .cslide-slide").size(); // get number of slides
var slidesContainerWidth = len*100+"%"; // get width of the slide container
var slideWidth = (100/len)+"%"; // get width of the slides
// set slide container width
$(slidesContainerId+" .cslide-slides-container").css({
width : slidesContainerWidth,
visibility : "visible"
});
// set slide width
$(".cslide-slide").css({
width : slideWidth
});
// add correct classes to first and last slide
$(slidesContainerId+" .cslide-slides-container .cslide-slide").last().addClass("cslide-last");
$(slidesContainerId+" .cslide-slides-container .cslide-slide").first().addClass("cslide-first cslide-active");
// initially disable the previous arrow cuz we start on the first slide
$(slidesContainerId+" .cslide-prev").addClass("cslide-disabled");
// if first slide is last slide, hide the prev-next navigation
if (!$(slidesContainerId+" .cslide-slide.cslide-active.cslide-first").hasClass("cslide-last")) {
$(slidesContainerId+" .cslide-prev-next").css({
display : "block"
});
}
// handle the next clicking functionality
$(slidesContainerId+" .cslide-next").click(function(){
var i = $(slidesContainerId+" .cslide-slide.cslide-active").index();
var n = i+1;
var slideLeft = "-"+n*100+"%";
if (!$(slidesContainerId+" .cslide-slide.cslide-active").hasClass("cslide-last")) {
$(slidesContainerId+" .cslide-slide.cslide-active").removeClass("cslide-active").next(".cslide-slide").addClass("cslide-active");
$(slidesContainerId+" .cslide-slides-container").animate({
marginLeft : slideLeft
},250);
if ($(slidesContainerId+" .cslide-slide.cslide-active").hasClass("cslide-last")) {
$(slidesContainerId+" .cslide-next").addClass("cslide-disabled");
}
}
if ((!$(slidesContainerId+" .cslide-slide.cslide-active").hasClass("cslide-first")) && $(".cslide-prev").hasClass("cslide-disabled")) {
$(slidesContainerId+" .cslide-prev").removeClass("cslide-disabled");
}
});
// handle the prev clicking functionality
$(slidesContainerId+" .cslide-prev").click(function(){
var i = $(slidesContainerId+" .cslide-slide.cslide-active").index();
var n = i-1;
var slideRight = "-"+n*100+"%";
if (!$(slidesContainerId+" .cslide-slide.cslide-active").hasClass("cslide-first")) {
$(slidesContainerId+" .cslide-slide.cslide-active").removeClass("cslide-active").prev(".cslide-slide").addClass("cslide-active");
$(slidesContainerId+" .cslide-slides-container").animate({
marginLeft : slideRight
},250);
if ($(slidesContainerId+" .cslide-slide.cslide-active").hasClass("cslide-first")) {
$(slidesContainerId+" .cslide-prev").addClass("cslide-disabled");
}
}
if ((!$(slidesContainerId+" .cslide-slide.cslide-active").hasClass("cslide-last")) && $(".cslide-next").hasClass("cslide-disabled")) {
$(slidesContainerId+" .cslide-next").removeClass("cslide-disabled");
}
});
});
// return this for chainability
return this;
}
}(jQuery));
HTML
<section id="cslide-slides" class="cslide-slides-master clearfix">
<div class="cslide-prev-next clearfix">
<span class="cslide-prev">prev slide</span>
<span class="cslide-next">next slide</span>
</div>
<div class="cslide-slides-container clearfix">
<div class="cslide-slide">
<h2>This is slide 1</h2>
<p>Slide 1 Content.</p>
</div>
<div class="cslide-slide">
<h2>This is slide 2</h2>
<p>Slide 2 Content.</p>
</div>
<div class="cslide-slide">
<h2>This is slide 3</h2>
<p>Slide 3 Content.</p>
</div>
<div class="cslide-slide">
<h2>This is slide 4</h2>
<p>Slide 4 Content.</p>
</div>
<div class="cslide-slide">
<h2>This is slide 5</h2>
<p>Slide 5 Content.</p>
</div>
</div>
</section><!-- /sliding content section -->
if the content is long in next or previous slides it will adjust fine. issue is cslide-slide parent div which is cslide-slides-master is not adjusting if the next slide content is shorter then the previous content.
I tried below code with no luck at all
$('.cslide-next').on('click', function(e){
e.preventDefault();
var parent = $('.cslide-slides-master'),
child = parent.children('.cslide-slide');
if (child.height() > parent.height()) {
parent.height(child.height());
}
});
Can anyone point me how to fix this issue?

How to get a jquery rotator to fade from one image to the next?

I am using jquery to create an image rotator. I found the code below here: How to fade loop gallery background images
but I was wondering if there is a way it can fade from one image to the next instead of to white in between?
$(window).load(function(){
var initialBg = $('#mydiv').css("background-image"); // added
var firstTime = true;
var arr = [initialBg, "url(HP_jQuery2.jpg)", "url(HP_jQuery3.jpg)"]; // changed
(function recurse(counter) {
var bgImage = arr[counter];
if (firstTime == false) {
$("#mydiv").fadeOut("slow", function(){
$('#mydiv').css('background-image', bgImage); // fixed
});
$("#mydiv").fadeIn("slow");
} else {
firstTime = false;
}
delete arr[counter];
arr.push(bgImage);
setTimeout(function() {
recurse(counter + 1);
}, 3600);
})(0);
});

Give this a try: http://www.simonbattersby.com/blog/simple-jquery-image-crossfade/
JSFiddle demo
HTML:
<div id="cycler">
<img class="active" src="image1.jpg" alt="My image" />
<img src="image2.jpg" alt="My image" />
<img src="image3.jpg" alt="My image" />
<img src="image4.jpg" alt="My image" />
</div>
CSS:
#cycler { position:relative; }
#cycler img { position:absolute; z-index:1 }
#cycler img.active { z-index:3 }
JavaScript:
function cycleImages() {
var $active = $('#cycler .active');
var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
$next.css('z-index', 2); //move the next image up the pile
$active.fadeOut(1500, function() { //fade out the top image
$active.css('z-index', 1).show().removeClass('active'); //reset the z-index and unhide the image
$next.css('z-index', 3).addClass('active'); //make the next image the top one
});
}
$(document).ready(function() {
// run every 3s
setInterval(cycleImages, 3000);
});

How do I stop clicking next too many times from breaking my image rotator?

Im new to jquery and have been trying to code a simple image rotator, it works well at the moment except for the fact that if you click the "next" of "prev" buttons too many times very quickly it will break the image rotator.
Here is the html:
<div id="viewport">
<div id="imageContainer">
<div class="image" style="background-color:red;">
<div class="title"><p>This is the title of the post</p></div>
</div>
<div class="image" style="background-color:green;">
<div class="title"><p>This is the title of the post</p></div>
</div>
<div class="image" style="background-color:yellow;">
<div class="title"><p>This is the title of the post</p></div>
</div>
<div class="image" style="background-color:brown;">
<div class="title"><p>This is the title of the post</p></div>
</div>
<div class="image" style="background-color:purple;">
<div class="title"><p>This is the title of the post</p></div>
</div>
</div>
</div>
<input type="button" name="prev" id="prev" value="prev" />
<input type="button" name="next" id="next" value="next" />
and jquery:
var ic = $('#imageContainer');
var numItems = $('.image').size();
var position = 0;
ic.css('left', '0px');
var inter;
var rotateTimeout;
function rotate(){
inter = setInterval(function(){
if (position == (numItems - 1)) {
console.log(position);
$('.image').first().insertAfter($('.image').last());
ic.css('left', '+=400px');
position--;
}
ic.animate({opacity: 0.2, left: "-=400px"}, 1500, function(){
ic.animate({opacity: 1.0}, 1000);
});
position += 1;
}, 6000);
}
rotate();
$('#prev').click(function () {
console.log(position);
if (position == 0) {
$('.image').last().insertBefore($('.image').first());
ic.css('left', '-=400px');
position++;
}
ic.animate({
left: "+=400px"
});
position -= 1;
clearInterval(inter);
clearTimeout(rotateTimeout);
rotateTimeout = setTimeout(rotate, 10000);
});
$('#next').click(function () {
if (position == (numItems - 1)) {
console.log(position);
$('.image').first().insertAfter($('.image').last());
ic.css('left', '-400px');
position--;
}
ic.animate({
left: "-=400px"
});
position += 1;
clearInterval(inter);
clearTimeout(rotateTimeout);
rotateTimeout = setTimeout(rotate, 10000);
});
Here is a demo of the rotator.
So how can I either stop the user from clicking the button too quickly, or perhaps only account for a click per two seconds to allow the rotator to do what it needs?

To limit function call frequency you can use some "Throttle" function. For example _.throttle from Underscore.js or any other implementation. It is not necessary to use whole library, only required function could be copied from there.
The event handler attachment will look like this:
$('#prev').click( _.throttle(function () { yours code... }, 2000) );

Keyboard events for viewing the next and previous for a larger images

I need Keyboard events for viewing the next and previous for a larger images. Please help me out. As I am viewing the images if am clicking on the mouse, like this I have to view the images If am clicking on left and right arrow keys too.
HTML
<div id="gallery">
<div id="overlay"></div>
<div class="slidePanel">
<div id="panel">
<img id="largeImage" src="" />
</div>
<div class="slideBtn">
<a href="#" id="next">
<img src="images/left_arrow.png" /></a>
<img src="images/right_arrow.png" />
</div>
<div id="close">Close</div>
</div>
<div id="thumbs" align="center">
<img src="images/image_01_thumb.jpg" alt="1st image description" />
<img src="images/image_02_thumb.jpg" alt="2nd image description" />
<img src="images/image_03_thumb.jpg" alt="3rd image description" />
<img src="images/image_04_thumb.jpg" alt="4th image description" />
</div>
</div>
JS
function loadSlide(nSlide)
{
$('#thumbs img.current').removeClass('current');
$(nSlide).addClass('current');
var src = $(nSlide).attr('src').replace('thumb', 'large');
$("#largeImage").fadeOut(function()
{
this.src = src;
$(this).fadeIn();
}).center();
$("#overlay").css({"opacity" : "0.7"})
.fadeIn("slow");
$('#close a, #close').fadeIn();
$('#prev, #next').css('display', 'block');
}
$('#next').click(function()
{
var cSlide = $('#thumbs img.current');
if($(cSlide).next('img').length > 0)
var nSlide = $(cSlide).next('img');
else
var nSlide = $('#thumbs img:first');
loadSlide(nSlide);
});
$('#prev').click(function()
{
var cSlide = $('#thumbs img.current');
if($(cSlide).prev('img').length > 0)
var nSlide = $(cSlide).prev('img');
else
var nSlide = $('#thumbs img:last');
loadSlide(nSlide);
});
$('#thumbs img').click(function(){
loadSlide(this);
});
$("#panel").click(function(){
$(this).fadeOut("slow");
$("#overlay").fadeOut("slow");
});
$('#close a').click(function(){
$(this).fadeOut('slow');
$('#overlay, #panel, #prev, #next, #largeImage').fadeOut('slow');
$("#thumbs").css('display', 'block');
});
$('#thumbs img').click(function(){
$("#thumbs").css('display', 'none');
});
});

This should suit your needs, just slot it in, or if you need to use the left and right arrow keys elsewhere use $('#gallery') instead of $(document)
$(document).keydown(function (e) {
if (event.keyCode == 37) {
$('#next').click(); //on left arrow, click next (since your next is on the left)
} else if (event.keyCode == 39) {
$('#prev').click(); //on right arrow, click prev
}
});
EDIT: if you need any other keyCodes use this site: http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes