I have three images 1.jpg,2.jpg,3.jpg & <img id="add" src="1.jpg"></img> the width , Height & position of this image is set as required & working fine. I have applied JQUERY fade property to toggle between the above images & its also working fine.
But I want precisely that the images change in sliding fashion, i.e. 1.jpg slides left and vanishes and drags in 2.jpg in its position & so on continues in specific interval.
Hope I am clear...
Regards.
Yhank You everyone for your efforts, But , I configured it myself... Here is how it worked:
index.html:
<html>
<head>
<script src="jquery.js"></script>
<script src="slide.js"></script>
</head>
<body>
<div >
<img id="pic1" src="1.jpg"style="width:0px;height:120px;"/><img id="pic2" src="2.jpg" style="width:160px;height:120px;"/>
</div>
</body>
</html>
slide.js
$("document").ready(function(){
var img_l=$("#pic1");
var img_r=$("#pic2");
setInterval(function(){
img_l.animate({width:'160px'},1000);; //animating the image t colapse
img_r.animate({width:'0px'},1000);; //animating the image t expand
var temp_var=img_l; //swaping values to revert previous action
img_l=img_r;
img_r=temp_var;
},3000); //repeating the effect every 3 seconds
});
This is doing well with my requirements and has exactly same behaviour within all leading browsers...
Thanks.
Related
I want to use the responsive image slider 'bxslider' (bxslider.com) on my site. Unfortunately the slider's images often don't appear on the page and only the controls are visible. However as soon as I refresh the page, the slider's images reappear.
I've looked at similar questions asked here, but he suggestions given - such as "only use jQuery 1.x" - don't seem to work for me.
Would be great if someone had another suggestion! The actual URL is: http://www.lauraniebel.com/casestudy01.htm and http://www.lauraniebel.com/casestudy02.htm And here's my code:
<script src="js/modernizr-2.8.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.bxslider.min.js"></script>
<div class="bxslider3">
<img src="img/cvnewsletters01.jpg" alt="Curtin Volunteers Newsletters">
<img src="img/cvnewsletters02.jpg" alt="Curtin Volunteers Newsletters">
</div>
<div class="bxslider">
<img src="img/cvinfographic01.jpg" alt="Curtin Volunteers Infographic">
<img src="img/cvinfographic02.jpg" alt="Curtin Volunteers Infographic Closeup">
</div>
<div class="bxslider2">
<img src="img/cvposters01.jpg" alt="Curtin Volunteers Posters">
<img src="img/cvposters02.jpg" alt="Curtin Volunteers Posters">
</div>
<script>
$( document ).ready(function(){
$('.bxslider').bxSlider();
});
$( document ).ready(function(){
$('.bxslider2').bxSlider();
});
$( document ).ready(function(){
$('.bxslider3').bxSlider();
});
</script>
Wrap your images inside of a container, and give that container an explicit width and height.
Or set bxslider to load after the images have loaded, possibly using image onload
As it stands, bxslider is initializing before the images have had time to load, calculating 0 width and height for them, thus giving them no appearance.
jsfiddle
I've wrapped your images in a <div class="container"></div>, given that explicit width/height. The issue is inline elements (the images) calculating width/height based on their contents (the images that haven't loaded) and bxslider uses the 0 width/height to initialize itself.
Typical jQuery problem.
JavaScript is all like "You images done yet or what?"
Found this little plugin...
It detects when all the images have been properly rendered before the scr
Github link
CDN:
<script src="https://unpkg.com/imagesloaded#4.1/imagesloaded.pkgd.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/imagesloaded#4.1/imagesloaded.pkgd.js"></script>
Good morning peoples.
I just want to show higher resolutions images on hover of lower resolutions images. I want to make a rule or any type of function that can do this work dynamically, I mean I cannot just put on every image a hover effect and changing the src every where.
I have an idea if it would be useful,
I can put all small resolutions images in a folder called images/small, and all large images in folder called images/large, so can we just make a function that can change just change "images/SMALL" to "images/LARGE"
Any suggestion would be appreciated
Thanks in advance
There are so many plugins are available which is written in JQuery/JavaScript. I can name few of them here which I used on various projects
Cloud Zoom
JQuery HoverPluse Plugin
AJAX-Zoom
I hope this will help you. If you want you can write your own plugin too which could go in similar fashion.
The jQuery Hover Pulse plugin is pretty good, it's done what I've needed in the past and looks like it is what your looking for. Usage is simple too:
Check out this jsFiddle I made as a demo for you
1. Include the jQuery and hover pulse plugin
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://malsup.com/jquery/hoverpulse/jquery.hoverpulse.js"></script>
</head>
2. Add classes or id's to your images to use as selectors
<div id="thumbs">
<div class="thumb"><img src="http://malsup.com/jquery/hoverpulse/images/beach1.jpg" width="64" height="64" /></div>
<div class="thumb"><img src="http://malsup.com/jquery/hoverpulse/images/beach2.jpg" width="64" height="64" /></div>
<div class="thumb"><img src="http://malsup.com/jquery/hoverpulse/images/beach3.jpg" width="64" height="64" /></div>
</div>
3. Add the jQuery code at the bottom of the document just before the clossing tag.
$(document).ready(function() {
$('div.thumb img').hoverpulse({
size: 40, // number of pixels to pulse element (in each direction)
speed: 400 // speed of the animation
});
});
I made a slider with two images and i got it to change after a certain amount of seconds but i want it to return to the original image afterwards and not just stop.
jsfiddle - http://jsfiddle.net/bsu31hso/4/
<article>
<div class="slider">
<img id="pic1" src="images/main-banner.png" alt="main banner" class="main_banner">
<img id="pic2" src="images/nutrition-banner.png" alt="nutrition banner" class="main_banner ">
</div>
</article>
<script type="text/javascript">
$(document).ready(function(){
$("#pic1").show(function(){
$("#pic1").fadeOut(5000);
$("#pic2").fadeIn();
});
});
</script>
Few Points :
1) what you did is not a slider.. doesn't go with the definition
if you want to make a slider user jQuery animate() with horizontal sliding
2) to slide images use setInterval() with desired time interval
3) one basic way is to use circular array to continue traversing in the same values over and over again
4) use is(":visible") check on each array element containing the id of each image which will help in detecting if it is visible and it has been selected time since then then increase the index of array for the next image to show by sliding it using animate()
hope you understood!
Here I have done code for you
DEMO
alright so i have some unique problems; first of all, my jquery is not working; i very well might have not put it in the html right so i am going to toss a good deal of code out to see;
basically i need the rollover class image to change to its hover state when the div class is rolled-over (i have a some css which changes the div class display to block) alright so here is the html
<div id="header">
<div class="home" id="home" ><p><img src="images/home-crown.png" class="rollover" width="100px" /></p></div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" ></script>
<script type="text/javascript" src="js/load-it-up.js"></script>
/so yeah... trying to swap that image stuff out here is jquery
$(document).ready(function(){
$("img.rollover").hover(
function()
{this.src = this.src.replace("images/home-crown.png","images/home-crown-hover.png");},
function()
{this.src = this.src.replace("images/home-crown-hover.png","images/home-crown.png");}
);
});
really frustrated with it because i have tried multiple solutions; any help at all would be appreciated; it is probably something stupid :P
right now i am just trying to get the image to rollover (at least)
i really want the rollover to activate when the div is rolled over (the #home div)
Try this.
$("img.rollover").hover(
function(){
$(this).attr("src","images/home-crown-hover.png");
},
function(){
$(this).attr("src","images/home-crown.png");
}
);
I'm trying to mouse over a few images then the images will resize but somehow let's say I have three images. if my mouse is over the first image then all three will resize if I mouse over the third then second then first then it'll resize one by one instead of resizing all three at once. I just started javascript so don't know too much yet.
Is this how it works unless I know more advanced way of doing it?
Also I want to make it so when my mouse is out the images will go back to default but I'm not sure how I should do that....
This is what I have...
<script>
var div1Images=document.getElementById("div1").getElementsByTagName("img");
for(i=0;i<div1Images.length;i++)
{
div1Images[i].onmouseover=function()
{
this.style.width="100px";
}
}
</script>
<body>
<div id="div1">
<img src="cat.jpg" id="im1"/>
<img src="dog.jpg" id="im2"/>
<img src="fish.jpg" id="im3"/>
</div><!--close div1-->
</body>
Thanks in advance.
You can do this with CSS:
<img class="mypic" src="cat.jpg" id="im1"/>
.myPic:hover {
width:100px;
}