How can i load the original image when the tumbnail version of the image has been clicked?
Im using ASP.NET in combinaton with javascript.
The original images are big, so they have been scaled on server side. This makes the site load faster. But somehow, both versions (original and tumbnail) of the images are being downloaded.
I'm trying to download only the tumbnail version of the image. And when the user clicks on the image, i want to show the original image.
How can i get this done?
Html such as below for each thumbnail image should do the trick
<a href="[url to original image]" target="_blank" id="thumbnail_link">
<img src="[url to thumbnail image]" alt="Click to see the full image" />
</a>
Edit: Modified to illustrate use of FancyBox.
Use above markup along with below java-script:
$(document).ready(function() {
$("a#thumbnail_link").fancybox();
})'
Don't forget to include jquery and fancybox js files.
I think you have to show thumbnails first and on click you need to open the original images in a new pop up window. You can do this using code as given below -
<SCRIPT LANGUAGE="JavaScript">
function openImage(imageFile){
windowOpen=window.open("",'Open','toolbar=no,location=no,directories=no,menubar=no,scrollbars=no,resizable=1,width=420,height=420');
windowOpen.document.writeln("<head><title>Image</title></head><body>");
windowOpen.document.writeln('<img src=http://www.mysite.com/' + imageFile + 'border=1>');
windowOpen.document.writeln("</body></html>");
}
</SCRIPT>
Then call this openImage() method during onClick of the thumbnail image.
You can pass imageFile as parameter to the function.
It sounds like you have both images referenced in your HTML, even though one is hidden from view, so the browser requests both. What you'd need to do is use JavaScript to create the full size <img> tag from scratch and then add it to the relevant place in the HTML. The browser will then load the full size image once it's added to the DOM.
For fancy box, all you need to do is
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>
Regards,
Andy.
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title> - jsFiddle demo</title>
<script type='text/javascript' src='http://identify.site88.net/showimage.js'></script>
<style type='text/css'>
#test{
display:none
}
#blackout {
width:50%;
position:absolute;
background-color: rgba(0, 0, 0, .5);
display: none;
z-index: 20;
}
.modal {
margin: auto;
}
#close {
color: white;
font-weight: bold;
cursor: pointer;
}
</style>
<script type='text/javascript'>
$(window).load(function(){
$('img').click(function () {
var img = $(this).clone().addClass('modal').appendTo($('#blackout'));
$('#blackout > #close').click(function () {
$('#blackout').fadeOut(function () {
img.remove();
});
});
$('#blackout').fadeIn();
});
});
$(window).load(function(){
$('#close2').hide();
$('span').click(function () {
$('#test').show();
$('#close2').show();
$('#txtsp').hide();
$('#blackout2 > #close2').click(function () {
$('#blackout2').fadeOut(function () {
$('#test').hide();
$('#txtsp').show();
$(this).css({
"text-decoration": ''
});
});
});
$('#blackout2').fadeIn();
});
});
</script>
</head>
<body>
<div id="blackout2"><div id="close2" >Close</div></div><img id="test" src="http://data.vietinfo.eu/News//2012/10/16/179281/1350402084.7404.jpg"/> <span id="txtsp">Click here to show image</span>
<br /><br />
<div id="blackout"><div id="close">Close</div></div><div style="width: 50px; height: 50px;"><img width="100%" src="http://dantri.vcmedia.vn/Uploaded/2009/06/02/hh02066.jpg" /></div>
</body>
</html>
You can replace tag span by your image have been scaled on server side.
Related
I'm using Background Check JS to try and get some text on my website to change based on the background being light or dark. I can't get it to work on my site to made a minimal replica of it and still no dice:
<html>
<head>
<style>
.background--light {
color: black;
}
.background--dark {
color: white;
}
.background--complex {
color: gray;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://www.kennethcachia.com/background-check/scripts/background-check.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
BackgroundCheck.init({
targets: '.target',
});
});
</script>
</head>
<body>
<img src="http://www.kennethcachia.com/background-check/images/6.jpg">
<div style="position: fixed; top: 65%;" class="target">Why not white?</div>
</body>
</html>
Also sometimes an "CanvasRenderingContext2D': The canvas has been tainted by cross-origin data." Error pops up in this demo sometimes?
I may have missed something trivial in this demo but I can't get it to work at all on my "full" version I'm trying to write.
I am new to jquery. I have a simple project. Two pictures stacked on top of each other. I want the page to show the second picture first (so the page needs to start at a certain scroll point) and then the user can scroll up to the first picture. So the code would go something like that
html:
!DOCTYPE html>
<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="mainPage" width="100%">
<img id="top" src="pic1.jpg" width="100%">
<img id="bottom" src="pic2.jpg" width="100%">
</div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
CSS:
body {
margin: 0px;
padding: 0px;
}
#top {
display: block;
}
#bottom {
display: block;
}
JavaScript
window.onload = function() {
scroll(0, 2300);
}
This works when I first load the page, but it doesn't work if I refresh the page (I assume because of something to do with cache?). How can I make the onload function work also when the page is refreshed? Thanks for your time.
If you are using jq why don't you use this type of function on $(document).ready()
$(document).ready(function(){
$(window).scrollTop( 3000 );
});
$(window).unload(function(){
$(window).scrollTop( 3000 );
})
body {
margin: 0px;
padding: 0px;
}
#top {
display: block;
}
#bottom {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mainPage" width="100%">
<img id="top" src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" width="100%">
<img id="bottom" src="http://drkeyurparmar.com/wp-content/uploads/2015/02/dummy-article-img-1.jpg" width="100%">
</div>
load is page load moment and beforeunload is refresh page moment
$(window).on("load",function() {
scroll(0, 2300);
});
$(window).on("beforeunload",function() {
scroll(0, 2300);
});
So if it's working first time, your code is ok. But seems you have to force to delete page cache.
Try this options:
Add this meta tags to your head and give it a try.
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Expires" content="-1">
If you want to control by js the delete of the cache, you can try making a simple js function:
deleteCache(){
window.location = window.location.href+'?eraseCache=true';
}
I'm trying to do screen shot paste in my website using firefox. It can be done easily by giving the div as contenteditable='true'.
html
<Html>
<Head>
<Title>Screen Shot Example</Title>
<style type="text/css">
#apDiv1 {
position:absolute;
width:258px;
height:165px;
z-index:1;
left: 71px;
top: 59px;
}
</style>
</Head>
<Body>
<div id="apDiv1" contenteditable='true'>Paste Test</div>
</Body>
</Html>
I can paste images from clipboard to particular div. Now the issue starts, how do I get the value from the div. For an example my user paste screenshot in the div and i want it to be save in db. If it normal textbox I can get the textbox value. Is there any way I can convert the DIV to image. Any advice and any referral links is highly appreciated.
document.addEventListener('DOMContentLoaded', function(){
var text = document.getElementById('apDiv1').innerText;
}, false);
To replace the div:
document.addEventListener('DOMContentLoaded', function(){
var el = document.getElementById("apDiv1");
var img = document.createElement("img");
img.setAttribute('src', '...');
el.parentNode.replaceChild(el, img);
}, false);
I have anchors on a page that displays a different background image on mouse hover and mouse out. I have preloaded the images to avoid flickering and re-requesting the images from the server on mouse hover/out. The scripts works fine on IE8/FF but Chrome behaves differently. In the latest version of Chrome, the first time I hover on the anchor, the image is re-requested from the server causing a flicker, why is this? Succeeding mouse hover/out works fine and there is no flicker.
Code below:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style type="text/css">
body:after
{
content: url('/images/1.png') url('/images/1a.png')
position: absolute;
top: -9999px;
left: -9999px;
}
.imageHover
{
display:inherit;
width:25px;
height:50px;
background:url('/images/1.png') no-repeat;
}
.imageOut
{
display:inherit;
width:25px;
height:50px;
background:url('/images/1a.png') no-repeat;
}
</style>
<script language="javascript" type="text/javascript">
var oneSelected = new Image();
var oneUnselected = new Image();
oneSelected.src="/images/1.png";
oneUnselected.src="/images/1a.png";
function OnImageMouseOver(target) {
$(target).toggleClass('imageHover', true);
$(target).toggleClass('imageOut', false);
}
function OnImageMouseOut(target) {
$(target).toggleClass('imageHover', false);
$(target).toggleClass('imageOut', true);
}
</script>
</head>
<body>
</body>
</html>
Converted anchor to image, but it still won't work in Chrome:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script language="javascript" type="text/javascript">
if (document.images) {
var oneSelected = new Image();
var oneUnselected = new Image();
oneUnselected.src = '/images/1a.png';
oneSelected.src = '/images/1.png';
}
function OnRatingMouseOver(target, newSrc) {
$(target).attr('src', newSrc);
}
function OnRatingMouseOut(target, newSrc) {
$(target).attr('src', newSrc);
}
</script>
</head>
<body>
<div id="mainDiv" style="width:400px;">
<div id="inputDiv">
<table id="inputTable">
<tr>
<td>Rating</td>
<td>
<img id='rating1Anchor'
src='/images/1a.png'
onmouseover="OnRatingMouseOver(this, '/images/1.png');"
onmouseout="OnRatingMouseOut(this, '/images/1a.png');"
onclick="OnRatingClick(this, '/images/1.png', 1);">
</td>
</tr>
</table>
</div>
</div>
</body>
<html>
It may not be preloading them at all, as it's not displaying them it's just adding to the DOM? Try the following code to preload your images.
var preload = new Array();
function preload_image(){
for (var x = 0; x < preload_image.arguments.length; x++)
{
preload[x] = new Image();
preload[x].src = preload_image.arguments[x];
}
}
I have to say I very much doubt that the pngs are actually being rerequested from the server in Chrome. Can you post a screenshot of the Timeline in dev Tools showing the request going off twice? :) I think it's far more likely that you're just experiencing a slight hesitation during the repaint.
Is there a reason you aren't using image sprites? They are the canonical solution to this problem. The idea is simply that a single image is loaded that contains both the normal and "hover" or "active" states. The portion of the graphic shown gets swapped out using css "background-position". Here's a tutorial, and here's a table of support for "background-position" which goes all the way back to IE4.
Code should look something like this:
<html>
<head>
<style>
#myCoolLink {
background-image:url('img/image.gif');
background-position:0px 0px;
}
#myCoolLink:hover,
#myCoolLink.active {
background-position:0px -72px; //depending of course on the image
}
</style>
</head>
<body>
</body>
</html>
No script required, and it's much terser. The other great advantage of this is that you can still programmatically change the image over to the "hover" anytime you want by toggling the "active" class on the link, if you ever need to.
I am creating a website that has this kind of structure:
Where the red box represents the user's browser window. When the user clicks a button on the home (bottom), it slides up to the new scene (stratosphere for example). Each scene is an entire image. Now the problem is, I need to account for users using different screen sizes and when they resize the window. I've looked up ways to resize backgrounds images using CSS or JavaScript, and that doesn't work well for me. I need to find some way to make them all fit for everyone using different screen sizes. An idea I have - I know this sounds clunky but would it be viable to write a PHP script which resizes an image to the dimension given by the JS? JS finds the browser window's size, hands it to PHP, PHP returns the image JS needs. And have this happen when a user resizes the browser window too...
How can I do this?
Update:
I tried SVG, and it's working beautifully. But now I am wondering how I can get the other elements to be in accordance with the SVG?
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
<meta name="generator" content="TextMate http://macromates.com/">
<!-- Date: 2012-08-01 -->
<style type="text/css" media="screen">
body { margin: 0px; }
.area { border: 3px solid red; background: green; margin-bottom: 0px; background: url(http://www.alistapart.com/d/using-svg-for-flexible-scalable-and-fun-backgrounds-part-ii/beetle.svg) no-repeat; }
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
function scroll_to(id, speed, margin) {
$('html, body').animate({
scrollTop: $('#' + id).offset().top - margin
}, speed);
}
var slide = 'a3'
$(".area").height($(window).height());
$(window).resize(function() {
$(".area").height($(window).height());
$(".area").width($(window).width());
scroll_to(slide, 1, 0);
});
scroll_to('a2', 'slow', 0);
});
</script>
</head>
<body>
<div class="area" id="a3">
<h1>scene 3</h1>
</div>
<div class="area" id="a2">
<h1>scene 2</h1>
<div style="height: 100px; border: 1px solid black;" id="text">
hi
</div>
</div>
<div class="area" id="a1">
<h1>scene 1</h1>
</div>
</body>
</html>
Why don't you use an SVG as background image? Your scene seems fairly simple.
All browser but IE ≤ 8 understand background: url(some.svg): http://caniuse.com/svg-css
Use one large background-image. Set it up with something like this:
html, body {
margin: 0;
padding: 0;
width: 100%
}
body {
position: absolute;
bottom: 0;
height: 2000px;
background-image: url('background.png')
}
Then use JavaScript to set the bottom property of body to move up, like this:
window.addEventListener('keydown', keypressed, false);
function keypressed(e) {
if(String.fromCharCode(e.charCode) == ' ') {
document.body.style.bottom += parseInt(document.body.style.bottom) + 10 + 'px';
}
}
I'm afraid re-sizing the background image is going to be your best bet. Why don't you post the code you've already tried for such a solution and others can help you along from that angle.
You should definitely split the image into multiple images, one for each tab.
This is how I would do it: http://jsfiddle.net/4CwdX/3/
You don't need to resize the image. The browser can automatically stretch it for you with background-size: 100%.