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
});
});
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>
I'm new to programming unfortunately and so to help me I have been following some simple tutorials on youtube (in addition to following Treehouse lessons). The one I have been struggling with and can't seem to find a solution to is building a simple lightbox, well getting the click event to bring up the lightbox. I have checked all lines, syntax, whether I've omitted a ; or {}, thought maybe I had the javascript src incorrect, tried downloading, creating a js folder and linking to that, referencing google hosted javascript, checked firebug, tried different browsers, checked that the CSS is correct (which it seems to be as when setting the display to block it appears OK), thought maybe there is updated syntax rules (tried jQuery instead of $ but just can't see where I'm making an error. Probably I have omitted something really simple, so please forgive me in advance. The youtube link I'm following is: https://www.youtube.com/watch?v=k-uonF7Gdgw Have also checked the comments to the video to see if anyone else is having same problem, some are, but mostly everyone else seems ok, and no solutions posted for those not getting it to work!
Please see below code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.lightbox').click(function(){
jQuery('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear'); //fades in the backdrop and the lightbox - speed of 300, and displayed in a linear fashion. Only want the backdrop displayed with 50% opacity, and the box at 100% (see below line)
jQuery('.box').animate({'opacity':'1.00'}, 300, 'linear');
jQuery('.backdrop, .box').css('dispaly', 'block'); //sets the appearance of the box
});
});
</script>
Many thanks in advance, and thanks for great resource!
Nic
Lightbox is a JavaScript technique used to display images and other web content using modal dialogs where the image is shown up center filling most of the screen, and the rest of the window is dimmed out. Lightbox was originally the name of a specific JavaScript plugin. However, common usage of the term has evolved to encompass Lightbox-style JavaScript plugins and effects in general.
First we take some images (when we click on the images the LightBox will be shown). We will place this image in a
HTML code:
<section id="examples" class="examples-section">
<div class="container">
<h3 style="clear: both;">Four image set</h3>
<div class="image-row">
<div class="image-set">
<a class="example-image-link" href="img/demopage/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="img/demopage/thumb-3.jpg" alt=""/></a>
<a class="example-image-link" href="img/demopage/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="img/demopage/thumb-4.jpg" alt="" /></a>
<a class="example-image-link" href="img/demopage/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="img/demopage/thumb-5.jpg" alt="" /></a>
<a class="example-image-link" href="img/demopage/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="img/demopage/thumb-6.jpg" alt="" /></a>
</div>
</div>
</div>
</section>
Now add css code files for screen and lightbox. Also download lightbox.js and jquery library java-script files.
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.
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");
}
);
So I'm designing a website (using WordPress), and I want to use JQuery to hide/show a certain element when another element is moused over. The HTML looks roughly like this
<div class="post" style="clear:both;">
<a href="...">
<img src="..." />
</a>
<div class="autohide">
<h3>
...
</h3>
<p>....</p>
</div>
</div>
...
<div class="spacer" />
and the JQuery looks like this:
jQuery(document).ready(function(){
jQuery(".post .autohide").hide();`
jQuery(".post").hover(function() {
jQuery(this).nextAll(".spacer").first().stop().html(jQuery(this).children(".autohide")
.html()).fadeIn();
},function() {
jQuery(this).nextAll(".spacer").stop().show().fadeOut().html("").hide();
});
});
What's supposed to happen is, when the user mouses over the image, the contents of the associated autohide <div> get transplanted into the next spacer <div> and then faded in; when they mouse out, the autohide <div> fades out and clears.
However, if the pointer is not over the image for the full fade-in time, then the max opacity of the spacer div seems to decrease until a mouse-over creates no effect at all.
I would be much obliged if anyone who knows more JQuery than I could shed some light on this subject; I assume it's a basic problem (I've never used JQuery before this project).
Thanks in advance.
I took the .stop() calls out, and it seems to work fine, but I am still trying to parse everything that is going on.
http://jsfiddle.net/f3EJ3/