I want to effect any images of slider randomly, but none of two consecutive images get the same effects at the same time. How can I do that?
$(window).load(function() {
$('#slider').nivoSlider();
});
$('#slider').nivoSlider({
effect: 'random',
slices: 4,
boxCols: 8,
boxRows: 4,
startSlide: 0,
manualAdvance: false,
randomStart: false,
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nivoslider/3.2/jquery.nivo.slider.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-nivoslider/3.2/nivo-slider.css" />
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="https://www.gettyimages.ie/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" data-thumb="images/toystory.jpg" alt="" />
<img src="http://wowslider.com/sliders/demo-81/data1/images/redkite50498.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" />
<img src="http://ec.europa.eu/research/headlines/news/images/11_12_17_small.jpg" data-thumb="images/walle.jpg" alt="" />
<img src="https://secure.i.telegraph.co.uk/multimedia/archive/03597/POTD_chick_3597497k.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with a link.
</div>
</div>
</div>
<div id="wrapper">
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with a link.
</div>
</div>
</div>
From the documentation, the following animations are available for use:
sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse
You are able to set the animation for each transition by using the data-transition, as shown here. With all of this in mind, you could override the beforeChange: function(){} function to set the new value for the data-transition property, excluding the animation names listed above which are referenced by the slide that is currently being shown.
Related
I am using this fiddle but i want more than one images sliding with hover effect,this link only shows one image slide i want more than one image to slide on it.
HTML:
<div id="container">
<div class="fimg"><img height="130px" width="100%" src="a.jpg" alt="" />
</div> <div class="simg">
<img height="130px" width="100%" src="A.jpg" alt="" /><p class="text_over_image" style="font-size:36px;">TEXT</p>
</div>
Javascript:
$(function(){
$("#container").hover(function(){
$("img", this).stop().animate({top:"-130px"},{queue:false,duration:200});
}, function() {
$("img", this).stop().animate({top:"0px"},{queue:false,duration:200});
});
});
Parallax content slider works once, but then fails to work, without any error. here is the example http://vilamihu.didacticmedia.ro/ , and here are the important bits of code:
<script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
<!--end slider -->
<!---strat-date-piker---->
<link rel="stylesheet" href="css/jquery-ui.css"/>
<script src="js/jquery-ui.js"></script>
<script>
$(function () {
$("#datepicker,#datepicker1").datepicker();
});
</script>
<!---/End-date-piker---->
<!--<link type="text/css" rel="stylesheet" href="css/JFGrid.css" />-->
<link type="text/css" rel="stylesheet" href="css/JFFormStyle-1.css"/>
<script type="text/javascript" src="js/JFCore.js"></script>
<script type="text/javascript" src="js/JFForms.js"></script>
<script type="text/javascript" src="js/jquery.cslider.js"></script>
Those are in <head>. Here is the body:
<div id="da-slider" class="da-slider">
<div class="da-slide">
<div class="da-img">
<img src="images/slideprimu.jpg" alt="" class="class1" />
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide1.jpg" alt="" class="class1"/>
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide2.jpg" alt="" class="class1"/>
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide3.jpg" alt="" class="class1"/>
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide4.jpg" alt="" class="class1"/>
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide5.jpg" alt="" class="class1"/>
</div>
</div>
<div class="da-slide">
<div class="da-img">
<img src="images/slide6.jpg" alt="" class="class1"/></div>
</div>
<!--/slide -->
</div>
and here is the jquery:
$(document).ready(function () {
$('#da-slider').cslider({
current: 4,
// index of current slide
bgincrement: 50,
// increment the background position
// (parallax effect) when sliding
circular: true,
autoplay: true,
// slideshow on / off
interval: 500
// time between transitions
});
});
Note: the links to photos are good. if I change the "current" setting, then it will start at that photo, go once, and stop. Any ideas will be greatly appreciated! Thanks!
Try this
$(document).ready(function () {
$('#da-slider').cslider({
current: 4,
// index of current slide
bgincrement: 50,
// increment the background position
// (parallax effect) when sliding
circular: true,
autoplay: true,
// slideshow on / off
intervalSec: 500
// time between transitions
});
});
I have just changed name of value interval to intervalSec
as per the documentation other things should be okay
Also in the provided link of website you are using older version of jQuery v1.8.3
If possible update it to latest version CDN, as for CSS3 newer version works better(Note: which does not support some old browsers)
Update: In the given website Link there are two JQuery UI of different versions used
jQuery-UI 1.9.2
jQuery-UI 1.9.1
Please remove the older version(the js/jquery-ui.min.js) to avoid any conflict..
today I was trying to solve exactly the same problem.
Even though this answer is probably not required anymore, I will add it for further coders that will encounter the same problem.
The root cause is in bgincrement value. If there is no background that it can "move" it will stop responding without any error. And its total mess.
Setting bgincrement to zero made the slider work again:
$(document).ready(function () {
$('#da-slider').cslider({
autoplay : true,
bgincrement : 0
});
});
I had the same problem... please deactivate all other jquery plugins, let only the slider at place. Do not forget to delete the initiation codes in your custom js file or in your html file as well ! Normally your slider works online after all.
Then you can re-add your plugins step by step and you will recognize with which plugin your slider has incompatibility. I had jQuery Timelinr 0.9.54 plugin which blocked my slider.
I'm using Owl Carousel and have been trying to add animated captions (just a simple fadein on slide display) but can't seem to figure out how to do it.
I have the opacity of all the captions set to 0 and then add a class named "animate-me" (with jQuery) to the captions. The first one fades in and then all the others are constantly displayed.
Here's what I have so far on jsbin... http://jsbin.com/OGehUKEh/3/edit
You need to use Owl Carousel callbacks. I found the callbacks you need.
$("#owl-example").owlCarousel({
beforeMove: function(){
// BEFORE going to the next slide (hide captions)
},
afterMove: function(){
// AFTER going to next slide (show captions)
}
})
I've successfully done this using jCapSlide (http://tympanus.net/codrops/2009/11/23/jcapslide-a-jquery-image-caption-plugin/).
Here's the HTML:
<div class="owl-carousel">
<div class="item" id="id_a"> <!-- The ID is for jCapSlide -->
<img alt="text" src="imagelocation"><!-- This is my image -->
<div class="overlay" style="display:none;"></div> <!-- this is the jCapSlide code -->
<div class="ic_caption">
<h3>TITLE To display</h3>
<p class="ic_text">Caption</p>
</div>
</div>
<div class="item" id="id_b">
<img alt="text" src="another image">
<div class="overlay" style="display:none;"></div>
<div class="ic_caption">
<h3>Title 2</h3>
<p class="ic_text">More Text</p>
</div>
</div>
<!-- More pictures in the same fashion as above -->
</div>
Include the CSS in the HEAD
<link rel="stylesheet" href="/css/owl.carousel.css">
<link rel="stylesheet" href="/css/caption/style.css">
Include the JScript just before the
<script src="/js/jquery-1.11.1.js"></script>
<script src="/js/jquery.capSlide.js"></script>
<script src="/js/owl.carousel.js"></script>
<script type="text/javascript">
$(window).load(function(){
$(".owl-carousel").owlCarousel({responsiveClass:true, autoplay:true, autoplayTimeout: 1000, autoplayHoverPause:true, autoWidth:true, loop:true});
$("#id_a").capslide({caption_color : '#FFFFFF', caption_bgcolor : '#002296', overlay_bgcolor : '#002296', border : '', showcaption : true});
$("#id_b").capslide({caption_color : '#FFFFFF', caption_bgcolor : '#002296', overlay_bgcolor : '#002296', border : '', showcaption : true});
</script>
jCapSlide is very flexible, and you can mess with the CSS and JS to get the exact colours/animation you want.
Debbie
I have 3 images-myimage1,myimage2 and myimage3. When i click on each image i get a set of slides-slider,slider2 and slider3 which in turn is in container1,container2 and container2 respectively.This is my HTML:
<div id="right">
<img id="myimage1" onclick="changeimage1()" src="images/build_i.png" />
<img id="myimage2" onclick="changeimage2()" src="images/apply_i.png" />
<img id="myimage3" onclick="changeimage3()" src="images/learn_i.png" />
</div>
<div id="PicInRight"> <div id="container1" > <div id="slider" > <ul><li><img id="Img" src='slide_intro.png'/></li></ul> </div></div> <div id="container2"> <div id="slider2" > <ul><li><img id="Img" src='slide1.png' /></li></ul> </div></div> <div id="container3"> <div id="slider3" > <ul><li><img id="Img" src='slide1.png' /></li></ul> </div> </div></div>
In the head section, i have hidden the containers which have the slides in them.
<script type="text/javascript">
$(document).ready(function(){
$("#container1").hide();
$("#container2").hide();
$("#container3").hide();
});
</script>
In my Javascript the on click function goes like this:
function changeimage1()
{
$("#container2").hide();
$("#container3").hide();
$("#container1").show();
$("#slider").easySlider({
auto: false,
continuous: true
});
}
and so on for myimage1 and myimage2.
function changeimage2()
{ $("#container1").hide();
$("#container3").hide();
$("#container2").show();
$("#slider2").easySlider({
auto: false,
continuous: true
});
}
function changeimage3()
{
$("#container1").hide();
$("#container2").hide();
$("#container3").show();
$("#slider3").easySlider({
auto: false,
continuous: true
});
}
Now, this works fine only if i click on myimage3 first. The sliders show and work fine.When i click on image1 and image2 later they work too.
But if i click on myimage1 first , only the first slider work.when i click on myimage2 and myimage3 later, the sliders in container2 and 3 only show but do not change over on click of next and previous!
Similar case if i click on myimage2 first.
Why is this happening and what should i do to correct it?
Please can anyone tell me the coding in terms of Js, css for displaying image effect like one in http://dalailama.com/ ie changing of images one after another. If possible let me know about adding video link in the sidebar with the minor screen.
This should do the trick:
HTML:
<div id="testers">
<div class="tester">
<img src="http://regmedia.co.uk/2008/03/18/google_adwords_machine.png" alt="" />
</div>
</div>
<div id="morework">
<div class="holderdiv">
<div class="tester">
<img src="http://www.swwebs.co.uk/images/google-pagerank.jpg" alt="" />
</div>
</div>
<div class="holderdiv">
<div class="tester">
<img src="http://regmedia.co.uk/2008/03/18/google_adwords_machine.png" alt="" />
</div>
</div>
</div>
CSS:
#morework{display:none;}
jQuery:
$(document).ready(function(){
function runIt(){
$('#morework').find('.holderdiv').each(function(i, elem) {
$("#testers").delay(5000).fadeOut(1000, function() {
$(this).html($(elem).html());
}).fadeIn(1000, runIt);
});
};
runIt()
});
Check it out in action here - http://jsfiddle.net/sfsPx/