Setting Bxslider to load different images? - javascript

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>

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.

Image sliding hover effect

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

Magnific popup not working properly

Magnific popup is working, but not the way I want it to.
Here is Plnkr.
Why is it not working? Here is the jQuery code:
$('.view').click(function() {
$('.image-popup').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});
});
Why don't you change your html to :
<div class="pic">
<a class="image-popup-fit-width" href="http://farm4.staticflickr.cm/3721/9207329484_ba28755ec4_o.jpg" title="This image fits only horizontally.">
<img src="pictureLink" width="75" height="75">
</a>
<p>Click to view</p>
</div>
The anchor tag needs to have image-popup-fit-width class rather image-popup.
<a class="image-popup-fit-width" href="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg" title="This image fits only horizontally.">
<img src="http://farm4.staticflickr.com/3721/9207329484_ba28755ec4_o.jpg" width="75" height="75">
</a>

Jquery slider in HTML5

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?

Hide a div and show another div in place of it functionality not working for popup

My project files can be downloaded here: https://rapidshare.com/files/1601614875/projectFiles.zip [if needed:" only 2mb]
I have a webpage and a popup inside the webpage. In the popup there are two images and a heading inside a div, and I want the div when hovered to hide and show another div inside which are the same images larger and a paragraph. I have the very same functionality for the same content in the main webpage and it works perfectly, but in the popup it does not work at all.
my HTML code:
<div class="thumb-list" id="popup-thumb-list">
<div class="actor">
<div class="small-thumb-holder">
<img src="images/actor-01.jpg" width="65" height="50" />
<h3>Lucas Allen</h3>as FIRST MATE KARL-CAPTAIN CARRIBEAN
</div>
<div class="big-thumb-holder" id="big-thumb-holder">
<img src="images/029 Derek_Jeremiah_Reid-ID29597.jpg" width="150" />
<p>Derek Jeremiah Reid as Home Buyer<br>Click to see profile.</p>
</div>
</div>
<div class="actor">
<div class="small-thumb-holder">
<img src="images/actor-02.jpg" width="65" height="50" />
<h3>Lucas Allen</h3>as FIRST MATE KARL-CAPTAIN CARRIBEAN
</div>
<div class="big-thumb-holder" id="big-thumb-holder">
<img src="images/030Rachel_O_meara-ID15405.jpg" width="150" />
<p>Rachel O'Meara as Agent<br>Click to see profile.</p>
</div>
</div>
</div>
Javascript code:
$('.small-thumb-holder').mouseover(function(){
$(this).parent(".actor").css({width:150},100);
$(this).hide();
$(this).next('.big-thumb-holder').show();
});
$('.big-thumb-holder').mouseout(function(){
$(this).parent(".actor").css({width:80},100);
$(this).hide();
$('.small-thumb-holder').show();
})
My attempt which does not work:
<div class="small-thumb-holder" onmouseover="(function(){
$(this).parent(".actor").css({width:150},100);
$(this).hide();
$(this).next('.big-thumb-holder').show();
};">
<a href="" class="actor_thumb">
<img src="images/actor-01.jpg" width="65" height="50" />
</a>
<h3>Lucas Allen</h3>
as FIRST MATE KARL-CAPTAIN CARRIBEAN
</div>
<div class="big-thumb-holder" onmouseout="(function(){
$(this).parent(".actor").css({width:80},100);
$(this).hide();
$('.small-thumb-holder').show();
}">
You need to execute the jQuery code after the popup has been loaded so that the mouseover and mouseout events will bind to the divs. To do so you could wrap the jQuery lines in a function and call if after loading the popup.

Categories