JavaScript - Flickr Api Picture To Iframe
Similar TutorialsHi Everyone, I have created 8 thumbnails of their larger full sized pictures. Next I created a "picdiv" with CSS attributes within a center division. The thumbnails sit just above the "picdiv". I need code to open the full pictures in the "picdiv" when I click on the thumbnail. I've tried an on-click function but can't get this working either. Can anyone help please? Anita Code: window.onload = function() { var vIframeUrl; vIframeUrl= document.getElementById("ifrBDiagram").src; if (vIframeUrl == "#" && document.getElementById("txtBnr").value == "") { document.getElementById("ifrBDiagram").src = "C://eBondingDiagram//Infineon.jpg"; } getIframeSize(); } function getIframeSize() { //Get window width and height var winW = 630, winH = 460; if (document.body && document.body.offsetWidth) { winW = document.body.offsetWidth; winH = document.body.offsetHeight; } if (document.compatMode=='CSS1Compat' && document.documentElement && document.documentElement.offsetWidth ) {//alert("in 2"); winW = document.documentElement.offsetWidth; winH = document.documentElement.offsetHeight; } if (window.innerWidth && window.innerHeight) {//alert("in 3"); winW = window.innerWidth; winH = window.innerHeight; } document.getElementById("ifrBDiagram").width = (winW * 0.95); document.getElementById("ifrBDiagram").height = (winH * 0.88); } Code: <table width="100%" height="100%" bgcolor="#CAD4E3" align="center" valign="center" style="border: 5px solid;"> <tr> <td><b>Bnr No:</b></td> <td><input type="text" id="txtBnr" name="txtBnr" /></td> <td> </td> <td> </td> </tr> <tr> <td><b>Lot No:</b></td> <td><input type="text" id="txtLot" name="txtLot" /></td> <td><INPUT id="btnCopy" TYPE="button" VALUE="Bonding Diagram" ONCLICK="fncCopy()"> <INPUT id="btnUpdate" TYPE="button" VALUE="End Lot" ONCLICK="reloadPage()"></td> <td> </td> </tr> <tr> <td><b>Failure Catalogues:</b></td> <td><select id="myList"> <option></option> <option>DSO</option> <option>Pre-Assembly</option> <option>PO EOL</option> <option>TDSON/TSDSON</option> <option>S308/WISON</option> </select> </td> <td><INPUT id="btnCata" TYPE="button" VALUE="Failure Catalogue" ONCLICK="fcnFailureCatalogue()"></td> <td> </td> </tr> <tr> <td colspan="4"> <iframe name="ifrBDiagram" id="ifrBDiagram" src=# style="border-width:4px; border-style:solid; border-color:blue;"> <span id="sMsg"></span> </iframe> </td> </tr> </table> When I first run the html , the interface just goes like this. After I press F5 to refresh the window, it displays this. The image just wont fit the iframe exactly. Can anyone please help to spot the bug ? I tried to use different resolution picture but still, the problem just doesn't solve. Is it really because of the image resolution ? Or something else gone wrong in my html ? Thanks Hey guys, so i have a site iv created for a client. I have the photo blog page getting the latest images from a flickr account. But the client wants them to be Organized into years. Is there any way to call a specific set or folder inside of flickr, and not just the entire account. ?? You can see the page here . http://wannamakeitfarm.com/mission.html hi I am creating a gallery using my flickr feed. I have the bones of it working the only issue is with the thumbnail pulled from flickr. You get the option of small medium and large whicj Im using meduim. I want to add an image border around the thumbnails using a background image but when I add the styles it wont work. If i add a width to the img tag it will distrit the images because its being pulled from the flickr api anyone any ideas on how to get the background image working? html code is here Code: <body> <!-- Some Content --> <div id="gallery"> <input type='hidden' id='current_page' /> <input type='hidden' id='show_per_page' /> <div id="flickr"> </div> <div id='page_navigation'></div> </div> </body> CSS for the img is Code: [.hidden { display: none; } div#flickr a.lightbox img { border: 5px solid #b3aaa4; margin-left: 5px; margin-right: 5px; margin-bottom:30px } and the java script is here Code: $(function() { $.getJSON('http://api.flickr.com/services/rest/?format=json&method='+ 'flickr.photos.search&api_key=' + apiKey + '&user_id=' + userId + '&tags=' + tag + '&per_page=' + perPage + '&jsoncallback=?', function(data){ var classShown = 'class="lightbox"'; var classHidden = 'class="lightbox hidden"'; $.each(data.photos.photo, function(i, rPhoto){ var basePhotoURL = 'http://farm' + rPhoto.farm + '.static.flickr.com/' + rPhoto.server + '/' + rPhoto.id + '_' + rPhoto.secret; var thumbPhotoURL = basePhotoURL + '_m.jpg'; var mediumPhotoURL = basePhotoURL + '.jpg'; var photoStringStart = '<a '; var photoStringEnd = 'title="' + rPhoto.title + '" href="'+ mediumPhotoURL +'"><img src="' + thumbPhotoURL + '" alt="' + rPhoto.title + '"/></a>;' var photoString = (i < showOnPage) ? photoStringStart + classShown + photoStringEnd : photoStringStart + classHidden + photoStringEnd; $(photoString).appendTo("#flickr"); }); $("a.lightbox").lightBox(); }); }); anyone? Hi there everybody, I've got this problem which I can't solve myself... I've got a website which has 3 colums and is hosted on domain1.com. in the right column I've got an Iframe which loads content from domain2.com . this content are some textboxes and a datepicker tool. if I press the 'search'-button in this Iframe I would like to refresh the mainpage (from domain1.com) so that another Iframe appears in the middle column. in this column i would like to load a new form from domain2.com which contains the values that I've put in in the form from the right Iframe. Unfortunally I can't get this to work... Will somebody please help me? Hi all, I hope you can help I have some code which: 1) Opens a URL (e.g. google.com) in a hidden iframe, then 2) Redirects the visitor to a different URL (e.g. yahoo.com) after it has loaded... This works exactly as I need. What I'd like to do is the following: 1) Open a URL (e.g. google.com) in a hidden iframe, then 2) Redirect the visitor to a different URL (e.g. yahoo.com) in a full-screen iframe 3) The address bar of the full-screen iframe should be my domain (obviously!) Here's what I have so far... Hidden iframe -> New URL Code: Code: <html> <body> <script type="text/javascript"> var page_body = document.getElementsByTagName('body'); var myframe = document.createElement('iframe'); var id = Math.random(); myframe.setAttribute('id', 'myFrame'+id); myframe.src = 'http://google.com'; //First open Google in hidden iframe myframe.setAttribute('frameborder', '0') myframe.setAttribute('width', '0'); myframe.setAttribute('height', '0'); if (myframe.attachEvent) { myframe.attachEvent('onload', function() { top.location = 'http://yahoo.com'; //Once loaded redirect to Yahoo -- but the address bar shows yahoo.com -- I want the address bar to display mydomain.com/page.html }); } else if (myframe.addEventListener) { myframe.addEventListener('load', function() { top.location = ('http://yahoo.com'); }, false); } page_body[0].appendChild(myframe); </script> </body> </html> I have an example of some code which displays the full screen iframe, but my problem is... ...I can't figure out how to redirect to this after the hidden iframe has loaded Here's an example of how I want the redirect to display -- after the initial hidden iframe has loaded: Code: <html> <head> <script type="text/javascript"> function sendParams() { document.body.style.overflow = "hidden"; } </script> </head> <body> <!--Open Yahoo.com in a full screen iframe, and disable extra scrollbar --> <iframe height="100%" width="100%" frameBorder="no" onload="sendParams()" src="http://yahoo.com"></iframe> </body> </html> I've been beating my head against the wall today trying to figure this out, and I'm fresh out of ideas. If you can help, you'll have some serious gratitude and good karma thrown your way! Best wishes, and thanks in advance, Paul Is there a way to resize an iframe dynamically so that you never get the scroll bar and essentially hide that there is an iframe? Better integration really. Basically I want to iframe a forum into my site so that the design down the sides and top which my friend does using iweb are not messed with. We have a central area which can be longer or shorter depending on the forum. I have used iframes for my site and found various javascripts so when a person clicks on say the audio page he http://www.krillmeed.com/index.html it takes them to the audio page but will load it into the index.html page. The problem is, especially with search engines, to point to that page, this is what the URL looks like to send someone to that page: http://www.krillmeed.com/?frame=0&sr...m%2Faudio.html which is not very clean at all, this is the javascript that i found that at least works: Child iframe script: Code: <script type="text/javascript"> (function(){ var qstr = '?frame=0&src=' + encodeURIComponent(location.href), lre = new RegExp('^' + location.protocol + '//' + location.hostname + '(()|(/)|(/index.html)|(/index.php))(()|(\\' + qstr + '))$'); if (!lre.test(parent.location.href)){ top.location.href = '/' + qstr; } })(); </script> Parent iframe Script: Code: <script type="text/javascript"> (function(){ function getQval(n) { if(typeof n !== 'string'){ return null; } var r = new RegExp('[?&;]' + n + '=([^&;#]*)'), m = location.search; return (m = r.exec(m))? unescape(m[1]) : null; } var f = getQval('frame'), s = getQval('src'); if(f && frames[f] && s && s.indexOf(location.protocol + '//' + location.hostname + '/') === 0){ frames[f].location.href = s; } })(); </script> Is there a "cleaner" way of doing this? This was an old code, i have yet to find a more modern one. Thank you in advance. Hi, Not sure if I worded that question right. I have a web page which will display another web page in an iframe. But the content inside the iframe may change while the user interacts with it so I need to be able to resize the iframe height from code on the page inside the iframe. Any tips on how I can do that? I am using php and javascript. Thanks. How can you have a smaller version of a picture and when you click on it a bigger version pops up? Is this easily possible with JS? I have been working on a picture slideshow w/ a caption, and (due to being an extreme amateur) I cannot get it to work just right. I have the slideshow going, but I can't get the caption to stay on the right side of the photo, while keeping the layout fluid. I would also love to add a pause, forward, and back button, and I have tried several free slideshow generators but either they don't work or they don't produce what I'm after. Here is my code so far. Javascript: Code: <script type="text/javascript"> // Modified for: http://codingforums.com/showthread.php?p=949514#post949514 // and: http://www.codingforums.com/showthread.php?t=195033 var ImgPtr = -1; // -1 for first pass only var BaseDirectory = 'http://s200.photobucket.com/albums/aa216/Jilldear/'; ImgArray = [ // format: ['imageName','Comments about image'] ['pinto-1.jpg', '<a href="paintorpinto.html" class="duh">Paint or Pinto?</a><br /><br /><class="duh">A free report from The Horse Resource answering the common questions about Pintos and Paints.<i>Written by Cassidy Deardorff for The Horse Resource.</i></div>'], ['shedding.jpg', '<a class="duh" href="sheddingout.html">Shedding Out Tips</a><br /><br /><class="duh">Six tips to help get the winter hair off your horse faster. <i>Written by Cassidy Deardorff.</i>'], ['dewormer-1.jpg', '<a class="duh" href="sampledchart.html">Sample Deworming Chart</a><br /><br /><class="duh">Use this sample deworming chart to make sure your horses are getting treated for internal parasites properly. <i>Written by Cassidy Deardorff.</i>'] // Note: No comma after last entry ]; var intervalAction; function ShowSlide(slide_num) { document.getElementById('mypic').src = BaseDirectory+ImgArray[slide_num][0]; document.getElementById('mypic').alt = ImgArray[slide_num][1]; document.getElementById('Caption').innerHTML = ImgArray[slide_num][1]; } function slideshow() { ImgPtr++; ImgPtr = ImgPtr % ImgArray.length; // document.getElementById('tst').innerHTML = 'Showing: '+ImgPtr; ShowSlide(ImgPtr); } onload = function() { slideshow(); intervalAction = setInterval("slideshow()",5000); } </script> HTML: Code: <div style="height:300px;width:398px;"> <div id="divCaption"> <div style="position:absolute; z-index:30; left:-999;" id="Caption"> </div> <img src="" alt="" border="1" id="mypic" name="mypic" alt="" height="300" width="398"> </div><br /> </div> I would LOVE for the finished slideshow to look somewhat like the one on this website: http://www.equisearch.com/ but I know this is a lot to ask Thanks so much in advance!!! im noob and suck at javascript but i do make webdesign html+css and i realy liked script from this page: http://acidtests.googletoad.com/ when user hovers over image it zooms, when it moves away it zooms out the code is this: Code: <SCRIPT language="javascript" type="text/javascript"> <!-- function setZoom(img, dir, width, height, margin, zIndex, delay, position) { window.setTimeout(function(){ if (img.dir==dir){ img.style.width = width; img.style.height = height; img.style.margin = margin; img.style.zIndex = zIndex; } }, delay); } function imgLarger(img) { img.dir = "rtl"; img.style.position = "absolute"; var width = 200; var height = 150; var now = parseInt(img.style.zIndex); if (img.style.left=="" && bChrome==false){ img.style.left = img.offsetLeft - 50; img.style.top = img.offsetTop; } if (isNaN(now)) { now=0; } for (i=now+1; i<=10; i++) { var w = (width * (10+i))/20 + "px"; var h = (height* (10+i))/20 + "px"; var m = (-i) + "px 0 0 " + (-width*i/40) + "px"; setZoom(img, "rtl", w, h, m, i, 20*(i-now)); } } function imgSmaller(img) { img.dir = "ltr"; img.style.position = "absolute"; var width = 200; var height = 150; var now = parseInt(img.style.zIndex); if (isNaN(now)) { now=0; } for (i=now-1; i>=0; i--) { var w = (width * (10+i))/20 + "px"; var h = (height* (10+i))/20 + "px"; var m = (-i) + "px 0 0 " + (-width*i/40) + "px"; setZoom(img, "ltr", w, h, m, i, 20*(now-i)); } } function openImage(imagePath){ //Shadow var oFade = getObject("DIV", "lightbox_fade"); oFade.style.display = "block"; oFade.style.height = document.body.scrollHeight; //Embed it var oContent = getObject("DIV", "lightbox_content"); oContent.style.width = 512; oContent.style.height = 384; oContent.style.top = (screen.height-384)/2 + (document.body.scrollTop - 100); oContent.style.left = (screen.width -512)/2; oContent.style.display = "block"; oContent.innerHTML = "<CENTER><IMG src=" + imagePath + "></CENTER>"; } function closeImage(){ //Shadow var oFade = getObject("DIV", "lightbox_fade"); oFade.style.display = "none"; //Embed it var oContent = getObject("DIV", "lightbox_content"); oContent.style.display = "none"; } // --> </SCRIPT> Code: <DIV id="lightbox_fade" class="overlay" onClick="JavaScript:closeImage();"></DIV> <DIV id="lightbox_content" class="content" onClick="JavaScript:closeImage();"></DIV> <a href="JavaScript:openImage('picture/large.png');"> <IMG src="picture/small.png" alt="" width="212" height="157" border="0" onmouseover="JavaScript:imgLarger(this)" onmouseout="JavaScript:imgSmaller(this);"></a> now i dont know if people here help with taken scripts but if you do, i would apreciate alot if someone could explain how to change location of appeared image (if possible not to be fixed to 1 location but to work from place where image is inserted on html page) because obviously it was set to be always on far right cheers I'm trying to disable my record navigation pictures when they get to the end of a calendar (events are posted on days, and navigation goes to the next or previous one). Code: <a onclick="javascript:previousEvent();"> <input type="image" name="previous" src="images/SiteCollectionImages/MiniEvents/btn_Previous.gif" alt="Previous Event" title="Previous Event"/></a> <a onclick="javascript:nextEvent();"> <input type="image" name="next" src="images/SiteCollectionImages/MiniEvents/btn_Next.gif" alt="Next Event" title="Next Event"/></a> This is where I have to disable the pictures. Above in my JS I would like to have a handler that could disable them when they are at the end of the index, or at the beginning. Thanks! edit: I do have the logic already, just not sure how to disable the images. Code: function nextEvent(i) { if (index == maxIndex || index >= maxIndex) { //disable next button tempObj = document.getElementsByName("next"); tempObj.visible = false; } else { index = index + 1; eventSelected(rawDates[index]); } Hey guys/gals, do ya know an efficient way to get the coordinates of a pictures so that I can use them to create a map? It is a rectangle. Here is the code I set up for a page: Code: <HTML> <HEAD> <TITLE>Cyrus</TITLE> </HEAD> <BODY BGCOLOR=black> <div align="center"> <table border="0"; cellspacing="0"; cellpadding="0"> <tr> <td><img src="http://i732.photobucket.com/albums/ww329/Chrishick/pageheadername.png"; width=900px; hieght=160px;></td> </tr> <tr> <td><img src="http://i732.photobucket.com/albums/ww329/Chrishick/navbar.png" width=900px; border="none" usemap="#navbar"></td> </tr> <tr> <td> <br> <br> <table border="0"; width=900px> <tr> <td> <div align="left"><img src="http://i732.photobucket.com/albums/ww329/Chrishick/appearance-2.png"; width=466px; hieght=320px></div> </td> <td> <div align="right"><img src="http://i732.photobucket.com/albums/ww329/Chrishick/equipment.png"> <br><br> <img src="http://i732.photobucket.com/albums/ww329/Chrishick/personality.png"> </div> </td> </tr> </table> </td> </tr> <tr> <td></td> </tr> <tr> <td> <div align="center"><img src="http://i732.photobucket.com/albums/ww329/Chrishick/brought.png"></div></td> </tr> </table> </div> <map name="navbar"> <area shape="rect" coords="247,185,445,220" href="http://www.roleplayandwritinghaven.com/forum.htm" alt="Forum" /> </map> </BODY> </HTML> how can I write on a picture with javascript? sorted.
hello people, can anyone help me with this? i have div element and picture inside it, and that picture is created with php gd (<img src="file.php"). What i need is a function which create new image and place it in that div. I don't know how to create new image with javascript when i call php file with header content type image. something like this?? function newImage(){ document.getElementById("foo").innerHtml = "<img src='file.php'/>"; } but of course this doesn't work so how to do that? thnx So i have this code and when you click on the first set of them (a specific one) it copys it and then when you click on one of the other ones it pastes it but its not working properly. (If you need to you can put an other image in there) Code: <script> var change = new Array change [0] = [0,0,0,0,0]; change [1] = [0,0,0,0,0]; change [2] = ["",0]; change [3] = [0,0,0,0,0]; function equipaa(){ change [0][0] = 1 change [0][4] = 0 change [0][1] = 0 change [0][2] = 0 change [0][3] = 0 changea(); } function equipab(){ change [0][1] = 1 change [0][0] = 0 change [0][4] = 0 change [0][2] = 0 change [0][3] = 0 changea(); } function equipac(){ change [0][2] = 1 change [0][0] = 0 change [0][1] = 0 change [0][4] = 0 change [0][3] = 0 changea(); } function equipad(){ change [0][3] = 1 change [0][0] = 0 change [0][1] = 0 change [0][2] = 0 change [0][4] = 0 changea(); } function equipae(){ change [0][4] = 1 change [0][0] = 0 change [0][1] = 0 change [0][2] = 0 change [0][3] = 0 changea(); } function equipba(){ change [1][0] = 1 change [1][4] = 0 change [1][1] = 0 change [1][2] = 0 change [1][3] = 0 changefinal(); } function equipbb(){ change [1][1] = 1 change [1][0] = 0 change [1][2] = 0 change [1][3] = 0 change [1][4] = 0 changefinal(); } function equipbc(){ change [1][2] = 1 change [1][0] = 0 change [1][1] = 0 change [1][3] = 0 change [1][4] = 0 changefinal(); } function equipbd(){ change [1][3] = 1 change [1][4] = 1 change [1][0] = 0 change [1][1] = 0 change [1][2] = 0 changefinal(); } function equipbe(){ change [1][4] = 1 change [1][0] = 0 change [1][1] = 0 change [1][2] = 0 change [1][3] = 0 changefinal(); } function changea(){ if(change [0] [0] = 1){ change [2] [0] = document.getElementById("is1i").src; change [2] [1] = change [3] [0]; } else if(change [0] [1] = 1){ change [2] [0] = document.getElementById("is2i").src; change [2] [1] = change [3] [1]; } else if(change [0] [2] = 1){ change [2] [0] = document.getElementById("is3i").src; change [2] [1] = change [3] [2]; } else if(change [0] [3] = 1){ change [2] [0] = document.getElementById("is4i").src; change [2] [1] = change [3] [3]; } else if(change [0] [4] = 1){ change [2] [0] = document.getElementById("is5i").src; change [2] [1] = change [3] [4]; } } function changefinal(){ if(change [1] [0] = 1){ document.getElementById("i1").src = change [2] [0]; } else if(change [1] [1] = 1){ document.getElementById("i2").src = change [2] [0]; } else if(change [1] [2] = 1){ document.getElementById("i3").src = change [2] [0]; } else if(change [1] [3] = 1){ document.getElementById("i4").src = change [2] [0]; } else if(change [1] [4] = 1){ document.getElementById("i5").src = change [2] [0]; } clear(); } function clear(){ change [0] [0] = 0; change [0] [1] = 0; change [0] [2] = 0; change [0] [3] = 0; change [0] [4] = 0; change [1] [0] = 0; change [1] [1] = 0; change [1] [2] = 0; change [1] [3] = 0; change [1] [4] = 0; } </script> <html> <body> <table border="0"> <tr> <td><div ><img onclick="equipba()" id="i1" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> <td><div ><img onclick="equipbb()" id="i2" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> <td><div ><img onclick="equipbc()" id="i3" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> <td><div ><img onclick="equipbd()" id="i4" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> <td><div ><img onclick="equipbe()" id="i5" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> </tr> </table> <div id="invent"> <table border="o"> <tr> <td><div ondblclick="dropa();" onclick="equipaa();"><img id="is1i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> <td><div id="is1n"></div></td> <td><div id="is1d"></div></td> <td></td> </tr> <tr> <td><div ondblclick="dropb()" onclick="equipab();"><img id="is2i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> <td><div id="is2n"></div></td> <td><div id="is2d"></div></td> <td></td> </tr> <tr> <td><div ondblclick="dropc()" onclick="equipac();"><img id="is3i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> <td><div id="is3n"></div></td> <td><div id="is3d"></div></td> <td></td> </tr> <tr> <td><div ondblclick="dropd()" onclick="equipad();"><img id="is4i"src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> <td><div id="is4n"></div></td> <td><div id="is4d"></div></td> <td></td> </tr> <tr> <td><div ondblclick="drope()" onclick="equipae();"><img id="is5i" src="http://i1188.photobucket.com/albums/z417/sherlockturtlee/itemblank.png"/></div></td> <td><div id="is5n"></div></td> <td><div id="is5d"></div></td> <td></td> </tr> </table> </body> </html> how to automatic append picture to a list? check text in span,if it match today,a picture append after meeting(4-22) code like this. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <style type="text/css"> .li_title { list-style-type:none; font-size:12px; line-height:24px; } .date {float:right;margin-right:3px;} </style> </HEAD> <BODY> <DIV id=Conttab_p_switch1 style="POSITION: relative"> <UL> <LI class="li_title"><span class="date">2011-04-22</span><A title=meeting(4-22) href="#" rel="nofollow" target=_blank>meeting(4-22)</A></LI> <LI class="li_title"><span class="date">2011-04-11</span><A title=meeting(4-11) href="#" rel="nofollow" target=_blank>meeting(4-11)</A></LI> <LI class="li_title"><span class="date">2011-04-04</span><A title=meeting(4-04) href="#" rel="nofollow" target=_blank>meeting(4-04)</A></LI> </UL> </DIV> </BODY> </HTML> |