I'm currently writing a website with a friend and I need to create a javascript loop for pulling images out of a database and populating them in xy positions on a grid.The database we're using is built in python and django but for now I'm trying to get it working with one loop and a test image.This is the loop in question:\[code\]function createImages(){ var picture = document.createElement('img');{ for (var pic=0; pic < 100; pic++) { pic.pk = 1; pic.model = 'image'; pic.fields.title = 'Image Test'; pic.fields.timestamp = '2013-01-01T00:00:00.000Z'; pic.fields.image = 'http://i240.photobucket.com/albums/ff301/quyenhiepkhach/CAT.jpg'; pic.fields.height = 30 + 'px'; pic.fields.width = 30 + 'px'; pic.fields.link = '#ImageLink'; pic.fields.board = 1; pic.fields.posx = 100 + 'px'; pic.fields.posy = 50 + 'px'; pic.fields.owner = 1; pic.fields.region = 1; picture.className = 'image-tooltip'; picture.src = http://stackoverflow.com/questions/14538206/pic.fields.image; picture.style.marginTop = pic.fields.posy; picture.style.marginLeft = pic.fields.posx; picture.style.height = pic.fields.height; picture.style.width = pic.fields.width; document.body.appendChild(picture); } }};createimages();\[/code\]What I have working so far:
Grid that is drawn onto my index page with two sections (prime andstandard).
Mouseover script that displays the xy coords and standard or primegridspace. (not working in jsfiddle)
What I have broken so far:
Javascript loop for pulling images out of database and writing them to body of page
Mouseover script to display some of the image data
I've included everything below to make the webpage and also a jsFiddleHTML HEAD:\[code\] <!-- Le random script for mouseover --> <script type="text/javascript" src="http://code.jquery.com/jquery-git.js"></script><!--MOUSEOVER SCRIPT FOR GRID COORDINATES--><script> $(window).load(function(){ var tooltip = $( '<div id="tooltip">' ).appendTo( 'body' )[0]; $( '.coords' ). each(function () { var pos = $( this ).offset(), top = pos.top, left = pos.left, width = $( this ).width(), height = $( this ).height(); $( this ). mousemove(function ( e ) { var x = ( (e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft) - left ) .toFixed( 0 ), y = ( ( (e.clientY + document.body.scrollTop + document.documentElement.scrollTop) - top ) ) .toFixed( 0 ); if ( x > 20 && x < 481 && y > 20 && y < 321) { $( tooltip ).text( 'prime | ' + x + ', ' + y ).css({ left: e.clientX + 20, top: e.clientY + 10 }).show(); } else { $( tooltip ).text( 'standard | ' + x + ', ' + y ).css({ left: e.clientX + 20, top: e.clientY + 10 }).show(); } }). mouseleave(function () { $( tooltip ).hide(); }); }); });</script><!--MOUSEOVER SCRIPT FOR IMAGES--><script> $(window).load(function(){ var imagetooltip = $( '<div id="imagetooltip">' ).appendTo( 'body' )[0]; $( '.image-tooltip' ). each(function () { $( imagetooltip ).text( pic.fields.title + ' , ' + pic.fields.link ).css({ left: e.clientX + 20, top: e.clientY + 10 }).show(); mouseleave(function () { $( tooltip ).hide(); }); }); });</script>\[/code\]CSS:\[code\] /* Style for standard section on grid */ .grid { margin: 0px auto auto; border: 1px solid #000; border-width: 0 1px 1px 0; background-color: #28ACF9; } /* Style for grid div */ .grid div { border: 1px solid #000; border-width: 1px 0 0 1px; float: left; } /* Style for prime section on grid */ .gridprime { margin-top: 50px ; margin-left: 50px; border: 1px solid #000; background-color: #FFFF33; float: left; } /* Style for grid coords tooltip */ #tooltip { text-align:center; background:black; color:white; padding:3px 0; width:150px; position:fixed; display:none; white-space:nowrap; z-index:3; } /* Style for image tooltip */ #imagetooltip { text-align:left; background:#CCC; color:white; padding:3px 0; width:200px; position:fixed; display:none; white-space:nowrap; z-index:4; }\[/code\]HTML BODY:\[code\]<!--SCRIPT TO CREATE THE GRID (WORKING)--><script type="text/javascript">function creategrid(size){ var primeW = Math.floor((460) / size), primeH = Math.floor((300) / size), standardW = Math.floor((500) / size), standardH = Math.floor((500) / size); var standard = document.createElement('div'); standard.className = 'grid coords'; standard.style.width = (standardW * size) + 'px'; standard.style.height = (standardH * size) + 'px'; standard.board = '1'; var prime = document.createElement('div'); prime.className = 'gridprime'; prime.style.width = (primeW * size) + 'px'; prime.style.height = (primeH * size)+ 'px'; prime.style.position = 'absolute' prime.style.zIndex= '1'; standard.appendChild(prime); for (var i = 0; i < standardH; i++) { for (var p = 0; p < standardW; p++) { var cell = document.createElement('div'); cell.style.height = (size - 1) + 'px'; cell.style.width = (size - 1) + 'px'; cell.style.position = 'relative' cell.style.zIndex= '2'; standard.appendChild(cell); } } document.body.appendChild(standard); } creategrid(10);</script><!--SCRIPT TO LOOP IMAGES OUT OF DATABASE (USING 1 TO TEST FOR NOW)--><script type="text/javascript">function createImages(){ var picture = document.createElement('img');{ for (var pic=0; pic < 100; pic++) { pic.pk = 1; pic.model = 'image'; pic.fields.title = 'Image Test'; pic.fields.timestamp = '2013-01-01T00:00:00.000Z'; pic.fields.image = 'http://i240.photobucket.com/albums/ff301/quyenhiepkhach/CAT.jpg'; pic.fields.height = 30 + 'px'; pic.fields.width = 30 + 'px'; pic.fields.link = '#ImageLink'; pic.fields.board = 1; pic.fields.posx = 100 + 'px'; pic.fields.posy = 50 + 'px'; pic.fields.owner = 1; pic.fields.region = 1; picture.className = 'image-tooltip'; picture.src = http://stackoverflow.com/questions/14538206/pic.fields.image; picture.style.marginTop = pic.fields.posy; picture.style.marginLeft = pic.fields.posx; picture.style.height = pic.fields.height; picture.style.width = pic.fields.width; if (pic.fields.board = document.body.id);{ document.body.appendChild(picture); } } } }; createimages();</script>\[/code\]
