How to enlarge image while hover over an image? - javascript

I want to show the thumbnail image large when hover over it, similar to the one in
http://www.freelayouts.com/websites/html-templates Plz help. Any help will be appreciated.

What you need is a tooltip plugin. There are plenty of them.
Check out this list: https://cssauthor.com/jquery-css3-hover-effects/

<img class="enlarge-onhover" src="img.jpg">
...
And on the css:
.enlarge-onhover {
width: 30px;
height: 30px;
}
.enlarge-onhover:hover {
width: 70px;
height: 70px;
}

Take a look at http://fancybox.net/blog
Fancybox looks nice, uses JQuery and is highly configurable with various show/hide effects. Tutorial number 3 on this page shows you how to use it OnHover rather than OnClick
The home page http://fancybox.net/home shows some examples of the visual effect

<script>
function bigImg(x) {
x.style.height = "64px";
x.style.width = "64px";
}
function normalImg(x) {
x.style.height = "32px";
x.style.width = "32px";
}
</script>
<img onmouseover="bigImg(this)" onmouseout="normalImg(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">
The function bigImg() is triggered when the user mouse over the image. This function enlarges the image.
The function normalImg() is triggered when the mouse pointer is moved out of the image. That function sets the height and width of the image back to normal.

Related

Creating a button on slide image

So, what i want to do is to create a buttons in a specified place of my image, also these buttons will be another images. I complicated it all a lot and I just have no idea what to do next and how to.
Main concept is:
I have that slider with image 1 and image 2, when it gets pressed the image will be changed to image 3 and slider will be paused. After image 3 is displayed, there will be image buttons to appear on that image 3.
I dont know if i can use position: absolute; and position: relative; or if i am just doing it wrong. My problem is that i cant use css to give that <div id="slider"> the relative effect because i want to put in there images with absolute effect.
Sorry for complicating it all so much but i don't really know how to explain it simplier, also english is not my main language.
All the code in short
So here is my JS
<script>
var numer = Math.floor(Math.random()*2)+1;
function schowaj()
{
$("#slider").fadeOut(500);
}
function zmienslajd()
{
numer++; if (numer>2) numer=1;
var plik = "<img src=\"drzewo" + numer + ".png\" />";
document.getElementById("slider").innerHTML = plik;
$("#slider").fadeIn(500);
setTimeout("zmienslajd()", 5000);
setTimeout("schowaj()", 4500);
}
</script>
And here is HTML
<body onload="zmienslajd()">
<div id="slider">
</div>
</body>
Also CSS
#slider
{
background-color: #b3ffb3;
width: 90%;
height: 800px;
float: left;
}
Thanks for any help in advance.

Enlarge one pic onclick

I'm making a website with images on it, and if you click on one of the images it should enlarge. I did that by using the toggleClass function in jquery
I enlarged the selected image like so:
$(".img1, .img2").on('click',function(){
$(this).toggleClass('enlarged');
});
the used class:
.enlarged{
position:absolute;
z-index:2;
width:500px;
height:600px;
top:-10%;
left:300px;
}
it's hard to explain but right now what happens is, when you click an image it enlarges. when you click another image, it enlarges too but overlaps/stays hidden behind the other image that's enlarged.
What I would like to happen is when img1 is enlarged and the user selects img2, it should "close" img1 and enlarge img2.
Thank you :)
UPDATE
it now works barely, it opens after spamclicking and once enlarged I can minimize it again. but then I can't enlarge it anymore.
Can anybody help me with this?
<script>
$(document).ready(function() {
$("#header").load("header.html .header");
$("#footer").load("footer.html .footer");
$("body").on('click', function(){
if(!$(".img1, .img2").hasClass('enlarged')){
$(".img1, .img2").on('click',function(){
$(this).addClass('enlarged');
});
}else{
$("body").on('click', '.enlarged', function(){
$(this).removeClass('enlarged');
});
}
});
});
</script>
You could do something like the following. This will remove the enlarged class. Then add it to the image that you have clicked on. (See jsfiddle here)
$(".img1, .img2").on('click', function() {
$(".img1, .img2").removeClass("enlarged");
$(this).toggleClass('enlarged');
});
See working example below:
$(".img1, .img2").on('click', function() {
$(".img1, .img2").removeClass("enlarged");
$(this).toggleClass('enlarged');
});
.enlarged {
position: absolute;
z-index: 2;
width: 500px;
height: 600px;
top: -10%;
left: 300px;
}
label {
font-weight: bold;
}
input[type=text] {
width: 20em
}
p {
margin: 1em 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="img1" src="https://placehold.it/350x150" alt="image" />
<img class="img2" src="https://placehold.it/350x150/F2F5A9" alt="image" />
Add a generic class to all clickable images, like 'gallery'
then
$(".gallery").on('click',function(){
//removes enlarged class from all images
$(".gallery.enlarged").removeClass('enlarged');
//adds enlarged class to clicked image
$(this).addClass('enlarged');
});
If you want to have only one "enlarged" class for the img you click on, I think the simpliest is to remove all "enlarged" class then add the class for the right element :
$(".img1, .img2").on('click',function(){
$(".img1, .img2").removeClass('enlarged');
$(this).addClass('enlarged');
});

I did a simple jquery slideshow - I want to toggle to one specific image by clicking thumbnail image

HTML:
<html>
<head>
<script type="text/javascript" src="jscript/jquery.js"></script>
</head>
<body>
<div class="slider_b">
<img src="img/frame_wood_back_460_380.jpg">
<img src="img/01_french_train_480_360.jpg">
<img src="img/05_cherries_480_360.jpg">
<img src="img/06_wheat_480_360.jpg">
<img src="img/10_renault_480_360.jpg">
</div>
<div id="button"><img src="img/06_wheat_480_360.jpg" width="48px" height="auto"></div>
<script>
setInterval("switchit()", 3000);
$('.slider_b img:gt(0)').hide();
function switchit() {
$('.slider_b img:first-child').fadeOut(0).next('img').fadeIn(2000).end().appendTo('.slider_b');
}
</script>
</body>
</html>
CSS:
.slider_box img{
position:relative;
top:0px;
left: 0px; }
.slider_box {
position:absolute;
width: 480px;
height: 360px; }
#button {
position: relative;
top: 10px;
left: 500px;}
The slideshow works - I just could not figure out how to switch the slideshow to one of the images by clicking a thumbnail button (id=button) - the slideshow should continue then in the regular circle order.
You could add a data attribute to your <img> elements, and append the button with the first child <img>element to carry over that data attribute. e.g:
<img src="" data-slide="1">
And for the append
var thumbnail = $("div.slider_b").find("img:first");
$("#button > img").replaceWith(thumbnail);
Once this is done, make it so that
("#button").on(click, function() {
var moveTo = $(this).find("img").data(slide);
var item = $("div.slider_b").find("[data-slide='" + moveTo + "']"
$("div.slider_b).prepend(item);
}
I'm not 100% right with the jQuery, but I believe I'm on the right lines. A bit more exploration down this route will get you to where you need to be.
Try making a relation between the slide and its thumbnail to fetch the respective slide, e.g. by using attibutes pairs, like data-slide="slide1" for the thumbnail and id="slide1" for the actual slide
on thumbnail click, adjust the current slide to the respective one and continue auto animation from this point
Point one is just one solution, it's the creativity part ;) You could come up with something else, like e.g. using thumbnails and slides indexes, etc. Good luck.

Jquery image and background fade onclick

I've been searching around and using bits and pieces I've found (mostly on this site) to help me get as far as I am, but am afraid I kind of painted myself into a corner here by taking a route I shouldn't have early on. Basically I'm trying to create like a light switch. On load, the page background is black with an image with black background around a frame(there is some light glare/glow which is why there is an image). When you click the switch it changes the background color to white and changes that image to something else with a white background. This is working fine but I want to add a fade so it isn't an instant change, kind of like a light fading on/off. Due to the way I got the earlier part working, I'm wondering if this will be more difficult than it should.
I've searched and read that there is no fade of background colors without containers and such. Just unsure of how I would do so with how I have things already. I'm open to suggestions completely, even if it means redoing some of the previous things in different ways. I left some commented things in just to show some things I tried previously. I'm pretty new to jQuery so I expect that some of this may look off completely.
Fiddle added. Images are just mock images but serve their purpose
http://jsfiddle.net/timtim123/7wh4B/
HTML:
<body id="bodyback">
<img id="out" src="rhino.png" width="527" height="376" border="0" />
<img id="frame" src="frame.png" width="589" height="377" border="0" />
<img id="paper" src="paper.png" width="142" height="214" border="0" usemap="#links" />
<img src="background.png" id="backimg"/>
<img src="background2.png" id="backimg" style='display:none;'/>
<div id="lightswitch">
<img src="switchdark.png" width="46" height="275" border="0" alt="Make it light" />
</div>
CSS:
#bodyback {
background-color:black;}
#backimg
{
position:absolute;
top: 0px;
left: 0px;
z-index: 2;
}
#backimg2
{
position:absolute;
top: 0px;
left: 0px;
z-index: 2;
}
#lightswitch
{
top: 0px;
left: 900px;
position:absolute;
z-index: 7;
}
JS:
$("#lightswitch").click(function() {
var src = $('#backimg').attr('src');
//change background image and color to white
if(src == 'background.png') {
// $("#backimg").fadeTo('slow', 0.3, function()
// $(this).attr("src","background2.png"),
$("#backimg").attr("src","background2.png"),
$("#bodyback").css("background-color","white");
//change background image and color back
} else if(src == "background2.png") {
$("#backimg").attr("src","background.png");
$("#bodyback").css("background-color","black");
}
});
Here's a very simple jQuery plug-in option, if you want to go that route
One option is jQuery UI color animation. It's a very simple plug-in with easy to use documentation. Just put the script in your head tag, and you're ready to go.
EXAMPLE (comes from the jQuery docs)
$(function() {
var state = true;
$( "#button" ).click(function() {
if ( state ) {
$( "#effect" ).animate({
backgroundColor: "#aa0000",
color: "#fff",
width: 500
}, 1000 );
} else {
$( "#effect" ).animate({
backgroundColor: "#fff",
color: "#000",
width: 240
}, 1000 );
}
state = !state;
});
});
You'll notice with this, you set a backgroundColor property, and it will animate to whatever background color that is.
From what I've looked at, going back and doing something from scratch, as opposed to using the plug-in, (despite being probably a fantastic exercise in learning to code cool stuff) is a little bit tricky. Depends on your purposes.

JIT Spacetree Save Labels as Image

I am using the JavaScript InfoVis Toolkit (http://thejit.org/) and am trying to print my expanded space-tree visualization using canvas.toDataURL("image/png"). While this works for my ForceDirected graph -- in the SpaceTree we have our labels in a separate DIV so when I print the image I get a blank graph.
Does anyone know how to print the labels? Any help would be greatly appreciated. I have attached a manual screenshot of the graph and the image we get when printing.
Yes - I did see the question here -- but it doesnt answer my question as we cannot use "Native" labels because we do some on the fly styling.
HTML Code:
<div id="infovis" style="height: 412px;">
<div id="infovis-canviswidget" style="position: relative; width: 800px; height: 412px;">
<canvas id="infovis-canvas" width=800" height="412" style="position: absolute; top: 0px; left: 0px; width: 800px; height: 412px;"></canvas>
<div id="infovis-label" style="overflow: visible; position: absolute; top: 0px; left: 0px; width: 800px; height: 0px;">
-- Labels are in here --
</div>
</div>
</div>
Manual Screenshot
Blank Printed Image
I sort of solved this issue by using html2canvas plugin. Basically, html2canvas will create a new canvas of a div element (with its children) which then you convert to a png image file with myCanvas.toDataURL("image/png"). This image will include your HTML labels. (Beware that html2canvas may not handle properly the labels' CSS properties.)
html2canvas(document.getElementById("diagram-container"), {
onrendered: function(canvas) {
var img = canvas.toDataURL();
document.write('<img src="'+img+'"/>');
}
});
I should have posted this back in October when I found it -- but it slipped my mind. I was able to find an answer to my own question.
First check out the post here HTML 5 Canvas Save Image
Here is how I implemented the solution (get CanvasSaver function code from link above):
function SaveCanvas(canvasName) {
var canvas = document.getElementById(canvasName);
var imgUrl = null;
if (canvas.getContext) {
//Get alternative image URL for spacetree only
if (canvasName.indexOf("tag") == -1) {
imgUrl = $jit.ST.prototype.print.call();
}
var cs = new CanvasSaver('http://joeltrost.com/php/functions/saveme.php');
//cs.saveJPEG(canvas, 'image');
cs.savePNG(canvas, 'image', imgUrl);
}
}
Finally -- code your ASP button to call the SaveCanvas function:
<asp:ImageButton ID="ImageButton1" ImageUrl="Images/save_icon.png" ToolTip="Save Visualization" AlternateText="Save Visualization" OnClientClick="SaveCanvas('tagCloudVis-canvas');return false;" Style="left: 2px; top:3px; position:relative;" runat=server />
I know this thread is old. But, in case anyone is looking for this and do not want to use html2canvas. here is a solution for you guys.
Label: {
type: 'Native'
},
Add the above in your javascript code var st = new $jit.ST({ <here> })
To save it as a image, add the following code.
HTML:
<a onclick="getImage(this, 'filename.png', 'tree-id')">download tree</a>
JS:
function getImage(a, filename, id){
a.link = document.getElementById(id).toDataURL();
a.download = filename;
}
Happy Coding :)

Categories