I'm new for web developing. I want to display images in grid layout. my images have same width but different height.
To display images without gap between them i used masonry plugin. But it doesn't work for me. Can anyone help me find out the error please..
This is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>FlashTemplatesDesign </title>
<script type="text/javascript" src="lib/jquery.tools.js"></script>
<script type="text/javascript" src="lib/masonry.pkgd.min.js"></script>
<script>
var container = document.querySelector('#test');
var msnry = new Masonry( container, {
// options
columnWidth: 200,
itemSelector: '.imagedisplay'
});
</script>
</head>
<body>
<div id="test">
<?php
// Connects to your Database
mysql_connect("localhost", "root", "") or die(mysql_error()) ;
mysql_select_db("selfie") or die(mysql_error()) ;
//Retrieves data from MySQL
$data = mysql_query("SELECT * FROM image_upload INNER JOIN user_table
ON image_upload.user_id=user_table.user_id ORDER BY timestamp DESC; ") or die(mysql_error());
//Puts it into an array
while($info = mysql_fetch_array($data)){
//Outputs the image and other data
Echo
'<div class="imagedisplay">' .'<img src="uploads/'.$info['image'].'" width="230px" height=auto border="1px solid #"
-webkit-border-radius=" 20px"
-moz-border-radius= "20px"
border-radius="20px"
>'. '</div>';
}
?>
</div>
</body>
</html>
Right off hand it looks like you're trying to reference the images and container in your JavaScript before the document is loaded. Try moving your script tag with code after (or right before) the closing </body> tag.
Because the document hasn't fully loaded, the DOM API in JavaScript can't yet access those elements if your JavaScript is in the head.
You'll need to wait for the images to load before you organize the elements with masonry.
From masonry appendix:
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
msnry = new Masonry( container );
});
Related
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Coupon Page</title>
<script type="text/javascript">
function printCoupon() {
var timeout = 1000;
self.focus();
window.print();
setTimeout("self.close()", timeout);;
self.focus();
}
</script>
</head>
<body onload="printCoupon();">
<p><img src="https://nebula.phx3.secureserver.net/2247f0de910e14f95483f60fdae499a0?
AccessKeyId=8BBF3308EC59517C0B34&disposition=0&alloworigin=1" originalattribute="src" originalpath="coupon.jpg" width="585" height="250">
</p>
</body>
</html>
I've searched for html coding to print webpage image only when image (w585 w250), actual size of image, or a related button is clicked. I found coding that works perfectly yet prints my image really out of focus. The coding you show addresses this by stating focus and such, I've worked on this for near a month without success, Please help
You can try media queries in css to print the image.
Check naturalWidth and naturalHeight and compare with image width and height so if they match then print page.
function printCoupon() {
var timeout = 1000;
var naturalWidth = $('#img')[0].naturalWidth;
var naturalHeight = $('#img')[0].naturalHeight;
var width = $('#img').width()
var height = $('#img').height();
if (naturalWidth == width && naturalHeight == height) {
self.focus();
window.print();
setTimeout("self.close()", timeout);;
self.focus();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<body onload="printCoupon();">
<p><img id="img" src="https://nebula.phx3.secureserver.net/2247f0de910e14f95483f60fdae499a0?
AccessKeyId=8BBF3308EC59517C0B34&disposition=0&alloworigin=1" originalattribute="src" originalpath="coupon.jpg" width="585" height="250">
</p>
I'm trying to load an image asynchronously using jquery javascript framework. The loaded image should be faded in when it's completely downloaded to local page. By now I'm able to asynchronously load an image and fade it in after a constant time not when its completely downloaded. This produces some graphical errors while fading if image is tall and download takes a moment of time because of image size. Also the memory allocated by the browser is increasing step by step when a image is loaded asynchronously. Even the same images shown before allocates new memory.
How can I load an image asynchronously and do some fading when it's completely downloaded. And how do I have to load the image to get no memory leak in my browser.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>jQuery demo</title>
</head>
<body>
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery.timer.js"></script>
//<script src="jquery.center.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<div class="hide">
<img id="bild" height=100% src="logo.jpg" alt="Logo" />
</div>
<script>
var timer = $.timer(function()
{
var img = $('#bild').attr('src','http://localhost/test.php?'+(new Date()).getTime()).load(function()
{
if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
$('#bild').attr('src','logo.jpg'); //Show logo in error case
} else {
$("#div.hide").append(img);
}
}).stop(true,true).fadeIn(1000).delay(3000).fadeOut(1000);
});
$("#bild").error(function()
{
$('#bild').attr('src','logo.jpg');
});
timer.set({ time : 5000, autostart : true });
</script>
</body>
</html>
Try this:
if($('#bild').prop('complete')) // if image is already in cache
{
// your code
$(this).fadeIn(1000).delay(3000).fadeOut(1000);
}
else{
$('#bild').load(function(){ // works when image is loaded and not present in cache
// your code
$(this).fadeIn(1000).delay(3000).fadeOut(1000);
});
}
thanks for your code examples. After some tries with it and some further help from a friend we get it working. Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>jQuery demo</title>
</head>
<body>
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery.timer.js"></script>
//<script src="jquery.center.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<div id="imageWrapper" class="hide">
<img id="bild1" style="height: 100%;" src="logo.jpg" alt="Logo" />
<img id="bild2" style="height: 100%; display: none;" src="logo.jpg" alt="Logo" />
</div>
<script>
setImage($('#bild2'));
var timer = $.timer(function()
{
var visible = $('#imageWrapper img:visible');
var hidden = $('#imageWrapper img:hidden');
if (!hidden[0].complete || typeof hidden[0].naturalWidth == "undefined" || hidden[0].naturalWidth == 0)
hidden.attr('src','logo.jpg'); //Show logo in error case
if(hidden.attr('src')!= visible.attr('src'))
{
visible.fadeOut(1000, function() {
setImage(visible);
hidden.fadeIn(1000);
});
}
else
setImage(hidden); //don't fade if current and next picture are the same (e.g. error pic -> error pic), but try to set new image
});
$("#imageWrapper img").error(function()
{
$(this).attr('src','logo.jpg');
});
timer.set({ time : 5000, autostart : true });
function setImage(img)
{
img.attr('src','http://localhost/test.php?'+(new Date()).getTime());
}
</script>
</body>
</html>
www.farinspace.com/jquery-image-preload-plugin/
That jQuery plugin will do what you're looking for. You have callback functions for each image load event, then another callback for when all images are done loading.
$imgs.imgpreload({
each: function() {
// an image loaded, you could fade in each one
},
all: function(){
// all images loaded, you could do something else here
}
});
alternatively you can preload the images so they start downloading before the browser reaches them in the DOM.
So what I want to do is to replace the main database loaded into a Google Earth GEPlugin instance in a web browser. If I go to the Code Playground: Here http://code.google.com/apis/ajax/playground/#mars/alternate_server_connectivity
Then I get an example of loading a new database. However, if I try to make the CreateInstance calls multiple times, I keep getting the same database (I am guessing this is due to the GEPlugin.exe running in the background still using the first database. If I remove that instance by killing the geplugin.exe process then the load works)
On that code page for an example edit the HTML and I used the following html/script combo
<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Earth API Sample</title>
<script src="http://www.google.com/jsapi?key=ABQIAAAAuPsJpk3MBtDpJ4G8cqBnjRRaGTYH6UMl8mADNa0YKuWNNa8VNxQCzVBXTx2DYyXGsTOxpWhvIG7Djw" type="text/javascript"></script>
<script type="text/javascript">
var ge;
google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCallback, failureCallback,
{ database: 'http://khmdb.google.com/?db=mars' });
}
function initCallback(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
// add a navigation control
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
document.getElementById('installed-plugin-version').innerHTML =
ge.getPluginVersion().toString();
}
function failureCallback(errorCode) {
}
function loadmoon()
{
delete ge;
google.earth.createInstance('map3d', initCallback, failureCallback, { database: 'http://khmdb.google.com/?db=moon' });
//http://khmdb.google.com/?db=moon
}
</script>
</head>
<body onload="init()" style="font-family: arial, sans-serif; font-size: 13px; border: 0;">
<div id="map3d" style="width: 500px; height: 380px;"></div>
<br>
LOAD THE MOON
<div>Installed Plugin Version: <span id="installed-plugin-version" style="font-weight: bold;">Loading...</span></div>
</body>
</html>
This works in that it reloads the instance, BUT it does NOT change the database.
I should say that I am aware of the option of adding a side database, but if I try to load a side database the Terrain is still mapped to the terrain of the first database. For me this is not acceptable.
Set the innerHTML of 'map3d' to an empty string before creating the instance again.
function loadmoon(){
document.getElementById('map3d').innerHTML = '';
google.earth.createInstance('map3d', initCallback, failureCallback, { database: 'http://khmdb.google.com/?db=moon' });
}
Take a look at this example, should be exactly what you need. http://earth-api-samples.googlecode.com/svn/trunk/examples/alternate-spheres.html
I am using HTML object in below manner
<object id="foo" name="foo" type="text/html" data="mypage.aspx">
</object>
Now, I don't want to display complete data in mypage.aspx in HTML object/iframe. I just want to display a DIV layer from mypage.aspx in current page (default.aspx). I tried using data="mypage.aspx#div1" but didn't work.
For testing purpose mypage.aspx consists of
<body>
<div id="div1">This has to be displayed</div>
<div id="div2">This should not be displayed</div>
This portion also should not be displayed
</body>
How can I display only DIV1 part of mypage.aspx in HTML object?
If you can get rid of using object or iframe you can use jQuery load method to just get the required mark up from mypage.aspx. Keep a container in your parent page which will hold the required content from mypage.aspx and try this.
$(function(){
//Here container is a div in which #div1 from mypage.aspx will be loaded.
$('#container').load('mypage.aspx #div1');
});
If you want to read about Loading Page Fragments using jQuery take a look at this link
I don't have an aspx capable server. So I tested using plain html, but the principle is the same really.
I recreated test.html:
<body>
<div id="div1">This has to be displayed</div>
<div id="div2">This should not be displayed</div>
This portion also should not be displayed
</body>
Then I made test2.html and for simplicity I embedded the JavaScript in test2.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Test</title>
<script language="javascript"type="text/javascript">
function init() {
var obj = document.getElementById("foo"); // Grab the frame element
var kids = obj.contentDocument.body.childNodes; // Grab all child nodes of the body node of fram element
for( var i = 0; i < kids.length; i++ ) { // iterate through all child nodes
if( kids[i].id == "div1" ) { // if child node's id is "div1"
alert(kids[i].firstChild.nodeValue); // alert the first child of the div, e.g. text node, value
}
}
}
window.onload = init;
</script>
</head>
<body>
<object id="foo" name="foo" type="text/html" data="test.html"> </object>
</body>
</html>
This approach seemed the most cross-browser compatible naked javascript I could create. I'm not claiming that it's the best possible solution, though.
Here's some additional things you can do, I wrote comments for each. I commented one of the lines out because it makes a dramatic change I'm not sure you'd like. You can try it, though.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Test</title>
<script language="javascript"type="text/javascript">
function init() {
var myDiv = document.createElement("div"); //create a new div
myDiv.innerHTML = "<strong>Testing!</strong>"; // add some HTML to myDiv
var obj = document.getElementById("foo"); // Grab the frame element
var kids = obj.contentDocument.body.childNodes; // Grab all child nodes of the body node of fram element
for( var i = 0; i < kids.length; i++ ) { // iterate through all child nodes
if( kids[i].id == "div1" ) { // if child node's id is "div1"
kids[i].firstChild.nodeValue = "sts"; // change first text node to sts
kids[i].appendChild( myDiv ); //append myDiv to Div1
document.getElementById("container").innerHTML = kids[i].firstChild.nodeValue; // add text to container
//document.getElementById("container").appendChild(kids[i]); // actually append, or insert div1 into container2, this should move the div1 out of the frame and into the document
}
}
}
window.onload = init;
</script>
</head>
<body>
<object id="foo" name="foo" type="text/html" data="test.html"> </object>
<div id="container"></div>
<div id="container2"></div>
</body>
</html>
I'm trying to come up with a script that will have a number of thumbnails across (in width) the browser. I want it to be able to be flush and not have gaps on the sides. The thumbnails should always be the same size, and I'm guessing that the only way is the change the spacing between each image. But can someone help me out? Let me know if my question is unclear.
EDIT: here's an example: http://www.beautyineverything.com/
Thank you!
Something like this?
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<title>sandbox</title>
<meta http-equiv='content-type' content='text/html; charset=UTF-8'/>
<script type='text/javascript' src='js/jquery-1.6.1.min.js'></script>
<script type='text/javascript'>
var MAX_IMAGE_WIDTH = 240;
$(function(){
$(window).resize(resizeImages).resize();
});
function resizeImages() {
var containerWidth = $('.imageContainer').innerWidth();
var numberOfImages = Math.ceil(containerWidth / MAX_IMAGE_WIDTH);
var imageWidth = Math.ceil(containerWidth / numberOfImages);
var imageWidthLast = containerWidth - (numberOfImages - 1) * imageWidth;
$('.imageContainer .image').css('width', imageWidth);
$('.imageContainer .image:nth-child(' + numberOfImages + 'n)').css('width', imageWidthLast);
$('.imageContainer .image').each(function(){
$(this).text($(this).innerWidth());
});
}
</script>
<style type='text/css'>
.imageContainer {
border:1px solid black;
overflow:hidden;
}
.image {
width:160px;
height:160px;
float:left;
}
</style>
</head>
<body>
<div class='imageContainer'>
<?php
for ( $n = 10; $n < 30; ++$n) {
$backgroundColor = '#' . sprintf('%02x%02x%02x', $n * 8, $n * 8, $n * 8);
echo "<div class='image' style='background-color:{$backgroundColor};'></div>";
}
?>
</div>
</body>
</html>
Resizing images could be written in a bit smarter way so that instead of 223+223+223+223+223+223+223+216 they would be 223+222+222+222+222+222+222+222. For this, width of each column should be calculated individually, so that widths of columns vary only by 1px max.
This might sound primitive but tables were designed for something like this only.
one solution is to have a table and put your images as background-image of the cells. (or put it inside and give it a height and width 100%) Its is easy to keep control over the cell size and margins/padding.. that is why they were so popular for structural stuff.
Before ruling the idea out, do note that (apart form the fact that i HATE to use tables for designing and positioning stuff, but do not hesitate to use it for what it was meant to be) making tables will reduce the amount of code to be written. use css to size the cells and table. use inline to put background image. no js functions wat-so-ever.
please drop a comment if you disagree of if i am missing something :)