Jquery slider in HTML5 - javascript

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?

Related

Image slider with random effect

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.

How to add animation on owlCarousel slider contents

How to animate each content layer with selected css animation with owlCarousel slide?
Here what I did, but I can't make it work properly.
HTML
<div class="owl-carousel owl-theme">
<div class="slide-item-1">
<div class="layer layer1">
<div data-animate="animated fadeInLeft">
<h1>I'm layer 1</h1>
</div>
</div>
<div class="layer layer2">
<div data-animate="animated fadeInLeft">
<h2>I'm layer 2</h2>
</div>
</div>
</div>
<div class="slide-item-2">
<div class="layer layer1">
<div data-animate="animated fadeInLeft">
<h1>I'm layer 1</h1>
</div>
</div>
<div class="layer layer2">
<div data-animate="animated fadeInLeft">
<h2>I'm layer 2</h2>
</div>
</div>
<div class="layer layer3">
<div data-animate="animated fadeInLeft">
<h2>I'm layer 3</h2>
</div>
</div>
</div>
</div>
JavaScript
jQuery(document).ready(function($) {
$('.owl-carousel').owlCarousel({
items:1,
dots: true,
nav: false,
animateOut: 'fadeOutLeft',
animateIn: 'fadeInRight',
autoplay:true,
onTranslated: animateSlide,
onTranslate: removeAnimation
});
function removeAnimation() {
var item = $(".owl-item .layer");
item.removeClass(item.children().data('animate'));
}
function animateSlide() {
var item = $(".owl-item.active .layer");
item.addClass(item.children().data('animate'));
}
});
Now I have this issues,
It shows content first and then animate, I mean contents don't come with animated, it comes first then animate.
First slide 'layer' DIV content don't animate content in first view but good after come back from other slides..
Last slide 'layer' DIV content animation works on first time view but next time don't work. What I can see is it add double animation or don't remove animation class after slide to another.
Middle slides are working fine without any problem.
There are different events of the owl-carousel where you can bind animate.css animations to.
In the example I used the change.owl.carousel event:
change.owl.carousel
Type: attachable
Callback: onChange
Parameter: property
When a property is going to change its value.
The function itself adds the animation class (addClass()) and removes it again after the animation end is triggered (one(...) followed by removeClass()).
var owl = $('.custom1').owlCarousel({
animateOut: 'slideOutDown',
animateIn: 'flipInX',
items:1,
margin:30,
stagePadding:30,
smartSpeed:450,
loop: true,
dots: true,
autoplay: true,
});
owl.on('change.owl.carousel', function (event) {
var el = event.target;
$('h4', el).addClass('slideInRight animated')
.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
$('h4', el).removeClass('slideInRight animated');
});
});
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.theme.default.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/docs.theme.min.css" rel="stylesheet"/>
<link href="https://owlcarousel2.github.io/OwlCarousel2/assets/css/animate.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
<section id="demos">
<div class="custom1 owl-carousel owl-theme">
<div class="item"><h4>1</h4>
</div><div class="item"><h4>2</h4>
</div><div class="item"><h4>3</h4>
</div><div class="item"><h4>4</h4>
</div><div class="item"><h4>5</h4>
</div><div class="item"><h4>6</h4>
</div>
</div>
</section>

How to get an image draggable AND resizable and the div only resizable?

I want to hava a resizable div, in which every image is resizable and draggable.
I used the jquery-ui to handle that, but it is not working. I cannot resize the div and I can only drag or resize it.
This is my code:
<div draggable="true" class="div" id="content" contenteditable="true" >
<img src = "test.jpg" id = "img" class="img">
</div><br>
<script type="text/javascript">
$('#content').resizable();
$('#img').resizable(
animate: true
ghost: true
).parent().draggable({
scroll: true
});
your code must be like:
<div class="div" id="content" contenteditable="true" >
<img src="http://store.valvesoftware.com/images/sizing_chart_shirt.png" id = "img" class="img"/>
</div>
<script type="text/javascript">
$('#content').draggable();
$('#img').resizable({
animate: true,
ghost: true
});
</script>
Demo

Setting Bxslider to load different images?

Hello everyone and thank you for your time.
I made a Menu with 2 images.
I want Bxslider to change and show different images each time someone clicks 1 of the 2 "Menu images"
So the idea i had is to hide 1 of the 2 bxsliders and swap when i click menu any ideas how i can do that?
Here is what i managed to make so far
Here is the 2 images menu:
<div class="Menu1">
<div class="Menu1_1"> <a href="a"class="reload-slider1" ><img src="images/menu2/Landing_Campaign_Smartwatch_menu2_2_1.jpg" width="593" height="100" onClick="changeImage4()" id="toChange4" ></a>
</div>
<div class="Menu1_1" >
<img src="images/menu2/Landing_Campaign_Smartwatch_menu2_1_2.jpg" width="596" height="100" onClick="changeImage5()" id="toChange5">
</div>
Here are the scripts for the Bxslider:
<---BxSlider----->
<script>
var slider = $('.bxslider1').bxSlider({
mode: 'horizontal'
});
$(document).ready(function(){
$('.bxslider2').bxSlider({
infiniteLoop: false,
hideControlOnEnd: true
});
});
$(document).ready(function(){
$('.bxslider3').bxSlider({
infiniteLoop: false,
hideControlOnEnd: true
});
});
</script>
<script>
$('.reload-slider1').click(function(e){
e.preventDefault();
$('.bxslider1').append('<li><img src="images/slider/Landing_Campaign_Smartwatch_v1_1.jpg"></li>');
$('.bxslider1').append('<li><img src="images/slider/Landing_Campaign_Smartwatch_v1_2.jpg"></li>');
slider.reloadSlider();
});
$('.reload-slider2').click(function(e){
e.preventDefault();
$('.bxslider2').append('<li><img src="images/slider/Landing_Campaign_Smartwatch_v2_1.jpg"></li>');
$('.bxslider2').append('<li><img src="images/slider/Landing_Campaign_Smartwatch_v2_2.jpg"></li>');
$('.bxslider2').prepend('<li><img src="images/slider/Landing_Campaign_Smartwatch_v1_1.jpg"></li>');
$('.bxslider2').prepend('<li><img src="images/slider/Landing_Campaign_Smartwatch_v1_2.jpg"></li>');
slider.reloadSlider();
});
</script>
Your HTML appears invalid:
<div class="Menu1">
<div class="Menu1_1">
<img src="images/menu2/Landing_Campaign_Smartwatch_menu2_2_1.jpg" width="593" height="100" onClick="changeImage4()" id="toChange4 ; reload-slider">
</div>
<div class="Menu1_1">
<img src="images/menu2/Landing_Campaign_Smartwatch_menu2_1_2.jpg" width="596" height="100" onClick="changeImage5()" id="toChange5 ; reload-slider2">
</div>
It contains invalid ID, and probably that is why document.getElementById() is not working for you. Change the id of the img tags:
<div class="Menu1">
<div class="Menu1_1">
<img src="images/menu2/Landing_Campaign_Smartwatch_menu2_2_1.jpg" width="593" height="100" onClick="changeImage4()" id="toChange4">
</div>
<div class="Menu1_1">
<img src="images/menu2/Landing_Campaign_Smartwatch_menu2_1_2.jpg" width="596" height="100" onClick="changeImage5()" id="toChange5">
</div>

ios Slider defaults to the last slide

On the initial page load my iosSlider has the first tab displayed on the first slide, however when I click any other tab it goes to the last slide within that group. Any ideas how to make it go to the first slide?
My HTML code (on jsfiddle as its kinda long for this page)
http://jsfiddle.net/Ky8am/
My JS code
/* main carousel */
$( "#mainCarousel .iosslider" ).iosSlider( {
autoSlide: true,
autoSlideTimer: 10000,
desktopClickDrag: true,
navSlideSelector: $( "#mainCarousel .iosslider-indicators > ul > li" ),
onSlideChange: mainCarouselSlideChange,
onSliderLoaded: mainCarouselSliderLoaded,
snapToChildren: true,
startAtSlide: 1,
} );
Depends on your mark up. So if you have something like
<div class='fluidHeight'>
<div class='sliderContainer'>
<div class='iosSlider'>
<div class='slider'>
<div class='item' id="s_1" number="1"><img src = 'http://lorempixel.com/800/500/sports/1/' /></div>
<div class='item' id="s_2" number="2"><img src = 'http://lorempixel.com/800/500/sports/2/' /></div>
<div class='item' id="s_3" number="3"><img src = 'http://lorempixel.com/800/500/sports/3/' /></div>
<div class='item' id="s_4" number="4"><img src = 'http://lorempixel.com/800/500/sports/4/' /></div>
<div class='item' id="s_5" number="5"><img src = 'http://lorempixel.com/800/500/sports/5/' /></div>
<div class='item' id="s_6" number="6"><img src = 'http://lorempixel.com/800/500/sports/6/' /></div>
</div>
</div>
</div>
</div>
You may try to use this code:
$( ".item" ).click(function() {
$('.iosSlider').iosSlider('goToSlide', 1)
});

Categories