jQUery/JavaScriptHow --> to convert image SlideShow into Words Slideshow - javascript

How to convert THIS image slideshow --> https://jsfiddle.net/ukrkw4nb/19/ into TEXT slideshow so that list itemst (li's) show in loop the following 3 words: 1.Users, 2.Leads 3. Sales This is my attempt https://jsfiddle.net/ukrkw4nb/90/
Code below:
$(function() {
var slides = $('.slideShow>li');
var slideCount = 0;
var totalSlides = slides.length;
var slideCache = [];
(function preloader() {
if (slideCount < totalSlides){
slideCache[slideCount] = new Image();
slideCache[slideCount].src = slides.eq(slideCount).find('img').attr('src');
slideCache[slideCount].onload = function() {
slideCount++;
preloader();
}
} else {
// Run the slideshow
slideCount = 0;
SlideShow();
}
}());
function SlideShow() {
slides.eq(slideCount).fadeIn(1000).delay(2000).fadeOut(1000, function() {
slideCount < totalSlides - 1 ? slideCount ++ : slideCount = 0;
SlideShow();
});
}
});

I think I have it working the way you'd like.
I edited this a bit: my grasp of jQuery could be better and it threw me: the preloader function was to deal with using images, and is unnecessary for a text slideshow. Just write the html you want, remove the preloader function, and then call the SlideShow function.
$(function() {
var slides = $('.slideShow>li');
var slideCount = 0;
var totalSlides = slides.length;
var slideCache = [];
function SlideShow() {
slides.eq(slideCount).fadeIn(1000).delay(2000).fadeOut(1000, function() {
slideCount < totalSlides - 1 ? slideCount ++ : slideCount = 0;
SlideShow();
});
}
SlideShow();
});
* {
margin:0;
padding:0;
}
li {
display:none;
}
li:first-of-type {
display:block;
}
div {
position:absolute;
width:200px;
height:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slideShowContainer">
<ul class="slideShow">
<li>Users</li>
<li>Leads</li>
<li>Sales</li>
</ul>
</div>

Related

Jquery slider with autoplay doesn't pause on final slide

I'm trying to make a simple slider which stays 5 secondes on each slide (4 elements per slide), then goes back to the first slide and run again.
The number of elements may vary from 1 to 16.
Right now, my slider doesn't pause on last slide. It goes straight back to the first one.
Any ideas ? Thanks
Here is a fiddle.
var width = $(window).width();
var currentSlide = 1;
var $slides = $('ul li');
var itemNbr = document.getElementsByTagName("li").length;
$(function() {
if ( itemNbr > 4) {
setInterval(function () {
$('ul').animate({
'margin-left' : '-='+width}, 700, function () {
currentSlide++;
if (currentSlide >= itemNbr/4) {
currentSlide = 1;
$('ul').animate({
'margin-left' : '0px'},700
);
};
});
},5000);
};
});
You can modify your setInterval function this way :
var width = $(window).width();
var currentSlide = 1;
var $slides = $('ul li');
var itemNbr = document.getElementsByTagName("li").length;
$(function() {
if ( itemNbr > 4) {
setInterval(function () {
if (currentSlide >= itemNbr/4) {
$('ul').animate({'margin-left' : '0px'}, 700);
currentSlide = 1; // Edit
}
else {
$('ul').animate({'margin-left' : '-='+width}, 700);
currentSlide++;
}
},5000);
};
});
wrapper {
width:100%;
overflow:hidden;
}
ul {
width:300vw; height:320px;
list-style:none;
padding:0; margin:0;
overflow:hidden;
}
ul li {
width:80vw;
height:60px;
display:inline-block;
margin:10px 10vw;
background-color:red;
padding:0;
text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<wrapper>
<ul>
<li>ITEM</li><!--
--><li>ITEM</li><!--
--><li>ITEM</li><!--
--><li>ITEM</li><!--
--><li>ITEM</li><!--
--><li>ITEM</li><!--
--><li>ITEM</li><!--
--><li>ITEM</li><!--
--><li>ITEM</li><!--
--><li>ITEM</li><!--
--><li>ITEM</li>
</ul>
</wrapper>

I would like to load images in a "wave"..

<html>
<section>
<style>
img{
width: 150px;
height:150px;
float:left;
}
</style>
</section>
<script>
var img = undefined,
section = document.querySelector('section'),
images=[
"http://www.psdgraphics.com/file/red-number-0.jpg",
"http://www.psdgraphics.com/file/red-number-1.jpg",
"http://www.psdgraphics.com/file/red-number-2.jpg",
"http://www.psdgraphics.com/file/red-number-3.jpg",
"http://www.psdgraphics.com/file/red-number-4.jpg",
"http://www.psdgraphics.com/file/red-number-5.jpg",
"http://www.psdgraphics.com/file/red-number-6.jpg"
];
function loadImage( i ){
img = document.createElement('img');
section.appendChild(img);
img.dataset['index'] = i;
img.src=images[i];
}
for(var i=0;i<images.length;i++){
loadImage(i)
}
</script>
</html>
This is my code, at the moment I receive all the images at the same time...
I would like to load each image only when the previous one has been load..
Any help will be gratitude
Simply assign a pseudorecursive callback to the onload handler:
function loadImage( i ){
if(i >= images.length) return;
var img = document.createElement('img');
section.appendChild(img);
img.dataset['index'] = i;
img.src=images[i];
img.onload = () => loadImage(i+1);
}
loadImage(0);
Or use some new ES 7 stuff:
(async function(){
for(var i = 0; i < images.length; i++){
var img = document.createElement('img');
section.appendChild(img);
img.dataset['index'] = i;
img.src=images[i];
await new Promise(r => image.onload = r );
}
})()
Probably some setTimeout along with recursion can give a nice effect:
var img = undefined,
section = document.querySelector('section'),
images = [
"http://www.psdgraphics.com/file/red-number-0.jpg",
"http://www.psdgraphics.com/file/red-number-1.jpg",
"http://www.psdgraphics.com/file/red-number-2.jpg",
"http://www.psdgraphics.com/file/red-number-3.jpg",
"http://www.psdgraphics.com/file/red-number-4.jpg",
"http://www.psdgraphics.com/file/red-number-5.jpg",
"http://www.psdgraphics.com/file/red-number-6.jpg"
];
function loadImage(i) {
img = document.createElement('img');
section.appendChild(img);
img.dataset['index'] = i;
img.src = images[i];
}
var index = 0;
function loadNext() {
if(index < images.length) {
loadImage(index);
setTimeout(function(idx){
loadNext();
},200, index++);
}
}
loadNext();
img {
width: 150px;
height: 150px;
float: left;
}
<html>
<section>
</section>
</html>

How to add prev and next button in a JQuery slideshow code

I have jQuery code for a slideshow below. It works perfectly in the project I am working on right now. Although, I would like to implement a previous and next button in the same code if it's possible. Any help would be really appreciated.
<script type="text/javascript">
function() {
$(".slider #1").show("fade",500);
$(".slider #1").delay(5500).hide("slide",{direction:"left"},500);
var sc = $(".slider img").size();
var count = 2;
setInterval(function(){
$(".slider #"+count).show("slide",{direction:"right"},500);
$(".slider #"+count).delay(5500).hide("slide",{direction:"left"},500);
if(count == sc){
count = 1;
}
else
{
count=count+1;
}
},6500);
}
</script>
<div class="slider">
<img id="1" src="images/slider/slide1.jpg" border="0" alt="primeira" />
<img id="2" src="images/slider/slide2.jpg" border="0" alt="segunda" />
<img id="3" src="images/slider/slide3.jpg" border="0" alt="terceira" />
</div>
<style>
.slider {
width: 800px;
height: 349px;
overflow:hidden;
margin: 30px auto;
background-image: url(images/slider/load.GIF);
background-repeat: no-repeat;
background-position: center;
}
.slider img {
width: 800px;
height: 349px;
display: none;
}
</stile>
You can do the following:
var sc;
var count = 1;
$(document).ready(function() {
sc = $(".slider img").size();
$(".slider #1").show("fade",500);
setInterval(function(){
switchPanel(1);
},5500);
$("#prev").click(function(){switchPanel(-1)});
$("#next").click(function(){switchPanel(1)});
});
function switchPanel(direction)
{
var hide, show;
if (direction == 1)
{
show = "right";
hide = "left";
}
else if (direction == -1)
{
show = "left";
hide = "right";
}
$(".slider #"+count).hide("slide",{direction:hide},500);
count = count + direction;
if(count == sc + 1) count = 1;
else if(count == 0) count = sc;
$(".slider #"+count).show("slide",{direction:show},500);
}
What's left for you is to add the previous (#prev) and next (#next) buttons.
This should be works.
$(".slider #1").show("fade",500);
$(".slider #1").delay(5500).hide("slide",{direction:"left"},500);
var sc = $(".slider img").size();
var count = 2;
var hideImage;
var slideshow;
var slideImage = function(isNext) {
var showDirection;
if (isNext){
showDirection = "right";
} else {
showDirection = "left";
}
$(".slider #"+count).show("slide",{direction:showDirection},500);
hideImage = setTimeout(function(){
$(".slider #"+count).hide("slide",{direction:"left"},500);
count = (count+1) > sc ? 1 : count+1;
}, 5500);
}
// Start the slideshow
slideshow = setInterval(function(){
slideImage(true);
},6500);
var manualSlide = function(isNext) {
// Stop the slideshow
clearTimeout(hideImage);
clearInterval(slideshow);
// Force hide current image
var hideDirection = isNext ? "left" : "right";
$(".slider #"+count).hide("slide",{direction:hideDirection},500);
if(isNext) {
count = (count+1) > sc ? 1 : count+1;
} else {
count = (count-1) == 0 ? sc : count-1;
}
setTimeout(function(){
slideImage(isNext);
// Start the slideshow again
slideshow = setInterval(function(){
slideImage(true);
},6500);
}, 1000);
}
$("#prev").on("click", function() { manualSlide(false); });
$("#next").on("click", function() { manualSlide(true); });
This is the result: FIDDLE
Note: I have to change delay into setTimeout because we can't cancel delay.

Multiple sliders sliding at the same time when only the active one should be sliding

I have multiple sliders, each in its own section->article. My problem is this: When I hit the next or previous button on one of the sliders all sliders start sliding at the same time.
html:
<section id="section01">
<article class="article01">
<div class="wrapper">
<ul class="slider">
<li class="slide"></li>
<li class="slide"></li>
<li class="slide"></li>
</ul>
</div>
<img class="previous" src="images/arrow-transparent.png">
<img class="next" src="images/arrow-transparent.png">
</article>
</section>
css
.wrapper{
height: 342px;
margin: 0 auto;
overflow: hidden;
width: 918px;
}
.slider{
height: 342px;
position: relative;
width: 5000px;
}
.slide{
float: left;
height: 342px;
position: relative;
width: 306px;
}
js
/* slider */
$(function(){
var i = 0;
$('.previous').click(function(){
var currentSlides = $(this).parent().find('.slide'),
parent = $(this).parent().find('.wrapper ul li');
i = --i -2 % currentSlides.length;
if(i - 3 >= -3) {
$('.slider').animate({'left' : -(parent.eq(i).position().left)}, 600);
} else {
i = 0;
}
});
$('.next').click(function(){
var currentSlides = $(this).parent().find('.slide'),
parent = $(this).parent().find('.wrapper ul li'),
current = i;
i = ++i + 2 % currentSlides.length;
if(i + 3 < currentSlides.length) {
$('.slider').animate({'left' : -(parent.eq(i).position().left)}, 600);
} else {
i = current;
}
});
});
How do I fix this?
This is because you are selecting all slider class elements so this will animate them all.
What if you select slide instead?
$(function(){
var i = 0;
$('.previous').click(function(){
var currentSlides = $(this).parent().find('.slide'),
parent = $(this).parent().find('.wrapper ul li');
i = --i -2 % currentSlides.length;
if(i - 3 >= -3) {
$('.slide').animate({'left' : -(parent.eq(i).position().left)}, 600);
} else {
i = 0;
}
});
I decided to completely ditch the javascript code from my original post and ended up using this instead:
$(function() {
$('article .wrapper').each(function(){
var slider = $(this).find('.slider'),
parent = $(this),
step =855,
left = parseInt(slider.css('left'), 10),
max = parent.width() - slider.width(),
min = 0;
parent.find(".previous").click(function() {
if (left < 0) {
var newLeft = left + step;
left = (newLeft<min) ? newLeft : min;
slider.animate({
"left": left + 'px'
}, "slow");
}
});
parent.find(".next").click(function() {
if (left > max) {
var newLeft = left - step;
left = (newLeft>max) ? newLeft : max;
slider.animate({
"left": left + 'px'
}, "slow");
}
});
});
});
I also slightly modified widths of several elements in css and now it all works like a charm.

How to add javascript to AdSanity Wordpress plugin to rotate images with a fade

I am working on a wordpress website who's client would like me to adjust our AdSanity plugin to display groups of ads in a rotating image gallery fashion like the ones on this page. The leaderboard ads for sure are AdSanity run. I was able to stem from viewing the source that this is the script I need:
$(function() {
var adsLists = $('.adsanity-group'),
i = 0;
var divs = new Array();
adsLists.each(function() {
divs[i] = $("#" + $(this).attr('id') + " div").not(".clearfix").hide();
i++;
});
var cycle_delay = 12000;
var num_groups = $('.adsanity-group').length;
function cycle(divsList, i) {
divsList.eq(i).fadeIn(400).delay(cycle_delay).fadeOut(400, function() {
cycle(divsList, ++i % divsList.length); // increment i, and reset to 0 when it equals divs.length
});
};
for (var j = divs.length - 1; j >= 0; j--) {
if (divs[0].eq(0).attr('num_ads') > 1)
cycle(divs[j], 0);
else
divs[j].show();
};
//////////
$('#slides').slidesjs({
width: 552,
height: 426,
navigation: false,
play: {
auto: true
}
});
//////////
$('.three_lines_fixed').each(function() {
$clamp(this, {
clamp: 3
});
});
var top_divs = $("#adspace div").not(".clearfix").hide(),
top_i = 0;
var top_num_ads = $('#adspace > div').attr("num_ads");
var top_cycle_delay = 12000;
function top_cycle() {
top_divs.eq(top_i).fadeIn(400).delay(top_cycle_delay).fadeOut(400, top_cycle);
top_i = ++top_i % top_divs.length; // increment i,
// and reset to 0 when it equals divs.length
};
if (top_num_ads > 1) {
top_cycle();
} else {
top_divs.show();
}
var site_url = $("body").attr("site_url");
$("#brpwp_wrapper-2 ul").append("<li style='text-align: center;'><a class='widgetized_read_more' href='" + site_url + "/2013'>Read More</a></li>")
/**/
And some of that I don't believe I need, like the three_lines_fixed or the slides. I also have the CSS used for #adspace:
div.header div#adspace {
float: right;
max-width: 728px;
max-height: 90px; }
div.header div#adspace img {
float: right; }
There is also this CSS:
div#page .main_content ul.widgets li.adspace {
display: none; }
On my site http://dsnamerica.com/eisn/ I want the 300px width ads on the right sidebar to rotate like those on the Vype site. These ads though are not listed with ul and li, they are divs.
So far I've added this to my header.php theme file right before the closing tag:
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/fading-ads.js"></script>
And in that file (js/fading-ads.js), I have this:
function adsanitygroup() {
var adsLists = $('.adsanity-group'),
i = 0;
var divs = new Array();
adsLists.each(function() {
divs[i] = $("#" + $(this).attr('id') + " div").not(".clearfix").hide();
i++;
});
var cycle_delay = 12000;
var num_groups = $('.adsanity-group').length;
function cycle(divsList, i) {
divsList.eq(i).fadeIn(400).delay(cycle_delay).fadeOut(400, function() {
cycle(divsList, ++i % divsList.length); // increment i, and reset to 0 when it equals divs.length
});
};
for (var j = divs.length - 1; j >= 0; j--) {
if (divs[0].eq(0).attr('num_ads') > 1)
cycle(divs[j], 0);
else
divs[j].show();
var top_divs = $("#adspace div").not(".clearfix").hide(),
top_i = 0;
var top_num_ads = $('#adspace > div').attr("num_ads");
var top_cycle_delay = 12000;
function top_cycle() {
top_divs.eq(top_i).fadeIn(400).delay(top_cycle_delay).fadeOut(400, top_cycle);
top_i = ++top_i % top_divs.length; // increment i,
// and reset to 0 when it equals divs.length
};
if (top_num_ads > 1) {
top_cycle();
} else {
top_divs.show();
};
};
}
That is my attempt to define the function and clean out what I didn't need. I don't think, no, I know it's not right. So I'll put my questions in a list, since this post is already wordy.
1) Did I link the js file correctly in the theme's header.php file? It's right before the closing </head> tag.
2) Do I need the second CSS part that says "display: none" and if so, how do I change the CSS to work with divs instead of ul and li? Do I just change div#page .main_content ul.widgets li.adspace {
display: none;}
to
div#page .main_content .widgets .adspace {
display: none; }
then add the class .adspace to the widget?
See, I have been trying to get this to work for a couple days now and I've thought so much on it I'm not making cohesive theories anymore, just shots in the dark. How to solve this?

Categories

Resources