I have a big grid of images. When a user mouseovers an image I want the image to tint blue 0000FF. Is there a way to do this in JS or jquery? Ideally, I wouldn't have to apply a class to each image. This treatment should affect all images on the screen.
After searching the forums here and elsewhere I learned that some folks use a div over the image that has a color and opacity, but how would I apply that to all img?
Another thing I keep seeing is paintbrushJS and pixastic but I don't know how to make those work for this purpose.
Here's the page I'm working on:
http://www.rollinleonard.com/elements/
EDIT: the images need to be be clickable so the div can't obstruct the linked img. Is there a way to click through the div or put the div below or something? Some solutions offered don't use a div but I can't figure them out.
Thanks!
Rollin
This is how you're gonna want to do it: http://jsfiddle.net/ztKJB/1/
Javascript / jQuery:
$overlay = $('#overlay');
$('img').bind('mouseenter', function () {
$this = $(this);
if ($this.not('.over')) {
$this.addClass('over');
$overlay.css({
width : $this.css('width'),
height : $this.css('height'),
top : $this.offset().top + 'px',
left : $this.offset().left + 'px',
}).show();
}
}).bind('mouseout', function () {
$(this).removeClass('over');
});
CSS:
#overlay {
display: block;
position: absolute;
background-color: rgba(0, 0, 255, 0.5);
top: 0px;
left: 0px;
width: 0px;
height: 0px;
}
HTML:
<div id="overlay"></div>
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/rgb-dots-olan3.jpg" width="150" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/rgb-dots-olan2.jpg" width="150" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/IMG_3291.jpg" width="225" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/1153-1188.jpg" width="200" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/P1010036.jpg" width="200" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/dressRehearsal.jpg" width="267" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/sinWave.jpg" width="225" height="150"
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/mockUp2.jpg" width="225" height="150">
<img src="http://www.rollinleonard.com/elements/zzzthumbs/JPEG/PICT0453.jpg" width="113" height="150">
The idea of using a div over the image would work. You can generate the div on-the-fly as needed (or generate a hidden div to reuse throughout the page), and position it over the image during the onmouseover event:
$('img').mouseover(function() {
// generate a div
// position over current image
});
Append a span inside each anchor, and adjust it's opacity on hover:
<script>
$(function() {
$('a').each(function() {
$(this).appendChild('<span class="overlay" />');
});
});
</script>
<style>
a {
position: relative;
}
a .overlay {
background-color: #00f;
height: 100%;
left: 0px;
opacity: 0;
position: absolute;
top: 0px;
width: 100%;
}
a:hover .overlay {
opacity: 0.4; /* adjust to suit */
}
</style>
Note: you'll need to adjust your styles so the anchors are being floated rather than the images.
If you wanted a fade in/out, you could either use CSS3 transitions or hide the span initially and use a jQuery mouseover event to fade it in:
$('a').each(function() {
$(this).appendChild($('<span class="overlay" />').hide()).hover(function() {
$(this).find('.overlay').fadeIn(500);
}, function() {
$(this).find('.overlay').fadeOut(1000);
});
});
This jquery plugin should do the thing you asked pretty well. (tancolor.js)
$("#myImageID").tancolor({mode: "blue"});
There's an interactive demo. You can play around with it.
Check out the documentation on the usage, it is pretty simple. docs
Related
I needed to create a function that changes and animates the background image, to give it a cool fade-in effect when triggered. However I have run into a weird issue. So as for my function below, it works, in the sense that it changes the background image when run. But it does not animate. It just instantly changes the background image. I have tried messing with the "transition" property, using background, background-image, and others, but to no avail. Can someone help me understand why the animation part is failing to trigger?
function postBackgroundImage(url){
var bg = dom.el("topLayer");
bg.src = url;
bg.style.backgroundImage = "url("+bg.src+")";
bg.style.transition = "all 2s linear 1s";
}
You can use a Jquery Plugin
http://jquery.malsup.com/cycle/
include library
<script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
For fade effect use
$('.pics').cycle({
fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
});
html
<div class="pics">
<img src="images/beach1.jpg" width="200" height="200" />
<img src="images/beach2.jpg" width="200" height="200" />
<img src="images/beach3.jpg" width="200" height="200" />
</div>
css
.pics {
height: 232px;
width: 232px;
padding: 0;
margin: 0;
}
.pics img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
width: 200px;
height: 200px;
top: 0;
left: 0
}
New to Javascript here,
I've been trying to change the size of an image (width/height) in an HTML page whenever a mouseover occurs, however it doesn't seem to work if the styles are set in the CSS page, which is a huge problem for me since I need to use the position property to set the image location.
Here's the code.
HTML:
<a href="#" onMouseOver="big()" onMouseOut="small()">
<img src="img1.png" name="image1" id="mw">
</a>
CSS:
#mw
{
position:absolute;
left:15%;
top:35%;
width:146px;
height:97px;
}
jS:
function big()
{
document.getElementsByName("image1").style.width=183;
document.getElementsByName("image1").style.height=121;
}
function small()
{
document.getElementsByName("image1").style.width=146;
document.getElementsByName("image1").style.height=97;
}
Simple javascript version, style not required
var element = document.getElementsByName("image1")[0];
element.setAttribute('width', 146);
element.setAttribute('height', 97);
function big() {
element.setAttribute('width', 183);
element.setAttribute('height', 121);
}
function small() {
element.setAttribute('width', 146);
element.setAttribute('height', 97);
}
<a href="#" onMouseOver="big()" onMouseOut="small()">
<img src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" name="image1" id="mw">
</a>
You can solve it by CSS only. There is a :hover-pseudo class which gets activated once you hover a specific element. For your request, there is no need to use JavaScript.
#mw:hover {
width: 183px;
height: 121px;
}
What the above CSS snippet does is: "change width and height to respectively 183px and 121px if you hover an element with id mw".
Here below is an example of it. click on "Run code snippet" and try to hover the rubic image.
#mw {
position: absolute;
left: 15%;
top: 35%;
width: 146px;
height: 97px;
}
#mw:hover {
width: 183px;
height: 121px;
}
<a href="#">
<img src="http://zoarchurch.co.uk/content/pages/uploaded_images/91.png" name="image1" id="mw">
</a>
Just do this:
a:hover {transform:scale(1.5,1.5);} <here you can set the x and y scaling
with JS you can:
document.getElement etc.addEventListener("your event", function(event){
event.target.style.transform = "scale(1.5,1.5)";
});
I would like to ask you about the way to reuse the code below for multiple images:
http://jsfiddle.net/a8c9P/
How to avoid redundancy in the CSS code?
An updated example: http://jsfiddle.net/a8c9P/156
$("#imgSmall").click(function() {
$("#imgBig").attr("src", "http://www.freeimageslive.com/galleries/sports/music/pics/musical_notes.jpg");
$("#overlay").show();
$("#overlayContent").show();
});
$("#imgBig").click(function(){
$("#imgBig").attr("src", "");
$("#overlay").hide();
$("#overlayContent").hide();
});
http://jsfiddle.net/a8c9P/157/
HTML
<div id="overlay"></div>
<div id="overlayContent">
<img id="imgBig" src="" alt="" width="400" />
</div>
<img class="imgSmall" width="200" src="http://www.freeimageslive.com/galleries/space/earth/pics/a17_h_148_22718.gif" alt="" />
<img class="imgSmall" width="200" src="http://www.freeimageslive.com/galleries/space/earth/pics/a17_h_148_22718.gif" alt="" />
<img class="imgSmall" width="200" src="http://www.freeimageslive.com/galleries/space/earth/pics/a17_h_148_22718.gif" alt="" />
JS
$(".imgSmall").click(function(){
$("#imgBig").attr("src",$(this).attr('src'));
$("#overlay").show();
$("#overlayContent").show();
});
$("#imgBig").click(function(){
$("#imgBig").attr("src", "");
$("#overlay").hide();
$("#overlayContent").hide();
});
CSS
#overlay{
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: #000;
opacity: 0.7;
filter: alpha(opacity = 70) !important;
display: none;
z-index: 100;
}
#overlayContent{
position: fixed;
width: 100%;
top: 100px;
text-align: center;
display: none;
overflow: hidden;
z-index: 100;
}
#contentGallery{
margin: 0px auto;
}
#imgBig, .imgSmall{
cursor: pointer;
}
First - if you are going to use an id it should always be unique. That in mind, any time you want particular behavior that you want to apply to many elements in a "jQuery" manner - this is a perfect case to use a class instead of an id. An example of this:
$(".myClass").click(function(){
$("#imgBig").attr("src", $(this).attr("src"));
$("#overlay").show();
$("#overlayContent").show();
});
You'll note that I use this which is a reference to the exact item that was clicked! Now you don't have to worry about having many elements of the same type!
SEE THE FIDDLE
What you need is multiple IDs and an HTML Class to handle the CSS. Each element can only have one ID, but it can inherit multiple classes. Define .imgSmall and .imgBig classes, use those to handle your CSS, and then use whatever ID scheme suits you for the click detection.
I would recommend something like img1, img1, img2 and bigimg1, bigimg2, bigimg3, because that would let you generate all of your html in a loop.
I got an image gallery organized as an <ul>. all images are in <li> elements and when I move my mouse over one of those pictures, it should grow to give the user a visual feedback. thing is, when I just change the size of the image using animate(), the other pictures will be pushed to the side as the resized image uses more space.
therefore I went with cloning the image element, float it right over the original image and then calling animate. this comes with the problem that onMouseOut() is called as soon as the cloned images pops up. so I need a nested hover() function and this is where things got complicated.
I got two errors and I can't find out whats causing them. the first one is, that animate() won't let the cloned image grow beyond the right border of its original, the second is, that I get weird grow/shrink behavior, when moving my mouse quickly over the gallery.
html:
<ul id="gallery1" class="gallery_container">
<li class="frame">
<img src="pic1.jpg" class="picture" /></li><li class="frame">
<img src="pic2.jpg" class="picture" /></li><li class="frame">
<img src="pic3.jpg" class="picture" /></li>
</ul>
css:
.picture
{
height: 200px;
border: 0px;
margin: 0px;
padding: 0px;
}
.frame
{
display: inline-block;
position: relative;
margin: 0px;
margin-right:8px;
padding: 0px;
}
.frame a
{
padding: 0px;
margin: 0px;
}
.gallery_container
{
height: 200px;
width: 150%;
position: relative;
top: 4px;
padding: 0px;
margin: 0px;
}
and finally the code that is giving me those headaches:
$(document).ready(function()
{
var zooming = false;
var zoom = 4;
var speed_zoom = 100;
$('.gallery_container li a').hover(function(element)
{
// disable zooming to prevent unwanted behavior
if(zooming) return;
zooming = true;
$(this).after( $(this).clone(false) );
$(this).next().attr('id', 'focus_frame');
},
function(element) // when the new element pops up, onmouseout is triggered, since the focus_frame is in front of the image
{
$(this).next().hover(function(element)
{
// we need to re-position the element in the dom-tree, since it needs to grow out of a container with overflow: hidden
$('#focus_frame img').animate({'left' : zoom * -1, 'top' : zoom * -1, 'height' : 200+(zoom*2), 'width' : $('#focus_frame img').outerWidth() + (zoom*2)}, speed_zoom);
},
function(element)
{
$(this).remove();
zooming = false;
});
});
});
var $doc=$(document.body)
$doc.on({
"mouseenter" : function (e) {
$doc.find("> .gallery_clone").remove();
var $i=$(this).parent();
$i.pos = $i.offset();
$i.clone()
.addClass("gallery_clone "+$i.parent().parent().attr("class"))
.css({
top:(Math.round($i.pos.top)-3)+"px"
,left:(Math.round($i.pos.left)-3)+"px"
,width:$i.width()
}).appendTo($doc);
}
},
" ul > li > img"
).on ({
"mouseleave" : function (e) {
$(this).remove();
},"> .gallery_clone");
in css .gallery_clone is position:absolute
then i animate .gallery_clone:hover through css but you can do it in the jquery as well i guess, adding a mouseenter event on .gallery_clone
edit : i've literally copy/pasted from my script so you'll have to adapt this code to your html
nb: give css anim a go, it's worth it even if older ie will not animate; (i also made lightbox effect almost pure css for that same gallery - will publish later, not ready for plugin release just now sorry)
nb2: that part "+$i.parent().parent().attr("class") is because in the cms they can chose gallery background color so adding that class forward the background color & other gallery style to the clone (ie you should not need it)
I want to enable drag-and-drop behaviour on my Web application. I have an image I want to drag. The image is behind another one that has transparent sections so that you can see the image beneath it. I do not want to change the order of the images. My thinking is I should use another layer on top of both images that is transparent and use it as a proxy to transfer events to the image I want to drag. jQuery UI's draggable function will not allow me to transfer the events in real-time i.e. I cannot hook into what it is doing while the drag is taking place, only when it is completed.
Is there a JavaScript library or jQuery plugin that will allow me to enable drag-and-drop on an element and have it transfer those events to another element in real-time?
Maybe I don't understand what you are trying to accomplish, but you should be able to drag and drop overlapping images without any trouble (demo).
Just wrap both images in a div and then make the div draggable:
CSS (no need to make .dragme position relative, because it is done in the draggable script)
.dragme img {
position: absolute;
top: 0;
left: 0;
}
HTML
<div class="dragme">
<img src="image1.gif">
<img src="image2.gif">
</div>
Script
$(".dragme").draggable();
I updated the demo, this isn't pretty and there might be a better way, but basically this puts an invisible overlay over the frame, then positions the image while the overlay is being dragged.
CSS
#draggable, #droppable {
width: 450px;
height: 250px;
padding: 0.5em;
margin: 10px;
background: #ddd;
color:#000;
}
.dragme {
position: relative;
width: 100px;
padding: 5px;
}
.dragme img {
position: absolute;
top: 55px;
left: 30px;
}
.demo {
width: 500px;
}
.border {
position: absolute;
top: 75px;
left: 30px;
z-index: 1;
}
HTML
<div class="demo">
<div class="border">
<img src="http://www.imageuploading.net/image/thumbs/large/border-564.png">
</div>
<div id="draggable" class="ui-widget-content">
<p>Drag from here</p>
<div class="dragme">
<img src="http://i142.photobucket.com/albums/r117/SaltyDonut/Icons/evilpuppy.gif">
</div>
</div>
<div id="droppable">
<p>Drop here</p>
</div>
</div>
Script (The demo uses $(document).ready because jsFiddle doesn't like $(window).load)
$(window).load(function(){
// cycle through draggable divs (in case there are more than one)
$(".dragme").each(function(){
var img = $(this).find('img');
var pos = img.position();
// create div overlay on image
$('<div/>', {
class : 'overlay',
css: {
position: 'relative',
top: pos.top,
left: pos.left,
width: img.outerWidth(),
height: img.outerHeight(),
zIndex: 100
}
})
// save original image position
.data('pos', [pos.left, pos.top])
.appendTo($(this));
// make overlay draggable
$(this).find('.overlay').draggable({
containment : '.demo',
revert: true,
revertDuration: 0,
handle: 'div',
// drag overlay and image
drag: function(e,ui){
img = $(this).parent().find('img');
img.css({
top: ui.position.top,
left: ui.position.left
});
},
// make image revert
stop: function(e,ui){
pos = $(this).data('pos');
$(this).parent().find('img').animate({left: pos[0], top: pos[1] },500);
}
});
});
$("#droppable").droppable({
drop : function(e,ui) {
// append entire div wrapper (.dragme)
ui.helper.parent().appendTo($(this));
}
});
});