Jump to content

Search the Community

Showing results for tags 'Thumbnails'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Calendars

  • Community Calendar

Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 3 results

  1. I'm not very good with programming, still learning HTML5/CSS3, so I apologize if this is a dumb request. I'm doing a web page (online portfolio) and I have the layout done and looking near how I want, however, on pages where I am showing samples of my work, I have imageA1 large and in the centre, and to the right, 3 thumbs (imageA1, imageA2, imageA3) so when you click a thumb the central image loads to that jpg. I want to avoid using flash. As it is now, if I click imageA1, it loads the page ../imageA1.html, if I click the thumbnail for image1B, it loads .../image1B.html etc... I'm hoping someone can point me to where I can find a good copy/paste script so that I load .../imageA.html and when I click the thumbs its a simple image replace for the central image instead of loading another html. That way, if I have 10 pieces in my portfolio with 3 images each, I only have 10 html/pages to load instead of 30. Hopefully that made sense. I've found image replace but, always 1 image and a click or mouseover swaps it to another image. I want 1 image in the centre, and 3 thumbs that when clicked or mouseovered swap the central larger image. Thanks.
  2. Hello all, I'm currently building a simple photo / image gallery using html, javascript and css. The layout is pretty basic, comprising a bigPic, a couple of buttons to go to the next of prev img in the gallery and a line of thumbnails beneath them. I've got an xml file which contains all of the urls for the bigPics and thumbnails. When the body load, I have created a function that looks to see how many images are in the xml file and passes this through a for each loop and dynamically puts each thumbnail into it's own img tag. I've got most of the logic and functionality done, but the one thing I can't get me head around is how to set up the logic so that when someone clicks on a thumbnail, the corresponding bigPic is loaded into the div above. I've tried so many thing but I can't seem to be able to target the correct info that relates to each thumbnail. In trying to find an answer for this, I've read a few forum posts which say that doing this kind of thing might be better using jQuery. Would anyone agree with this? Here's my 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 http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title></title> <script type="text/javascript"> if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); }else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }xmlhttp.open("GET","gallery.xml",false);xmlhttp.send();xmlDoc=xmlhttp.responseXML; x=xmlDoc.getElementsByTagName("image");i=0; function displayBigPic(){ artist=(x.getElementsByTagName("imgURL")[0].childNodes[0].nodeValue); document.getElementById("mainImg").src = artist;} function next() {if (i<x.length-1) { i++; } else { i = 0; } displayBigPic(); } function previous() {if (i == 0) { i = x.length-1; } else { i--; } displayBigPic();} function createThumbs(id, html, width, height, left, top){ for (var i = 0; 1<x.length;i++) { var thumb = document.createElement("img"); thumb.setAttribute("thumb",id); thumbsURL = (x.getElementsByTagName("thumbURL")[0].childNodes[0].nodeValue) thumb.style.width = "62px";thumb.style.height = "42px";thumb.style.background = "#FFF"; thumb.style.border = "2px solid #333";thumb.style.border = "1px solid #FFFF00";thumb.style.marginRight = "14px";thumb.style.float = "left";thumb.style.display = "block";thumb.style.backgroundImage = "url(" + thumbsURL + ")"; thumb.src = thumbsURL; thumb.onclick = function (){ /*Not sure how to correctly target the corresponding URL for the bigPic*/} document.getElementById("thumb_container").appendChild(thumb); } } </script></head> <body onload="displayBigPic(); createThumbs()"> <div id="gallery_wrapper"> <div id="bigPic"><img style="width:100%; height:100%;" id="mainImg" /></div> <button style="margin-top:10px; margin-left:25px;" onclick="previous()">Prev</button> <button style="margin-top:10px; margin-left:15px;" onclick="next()">Next</button> <div id="thumb_container"></div><!-- thumb_container end --> </div><!-- gallery_wrapper end --></body></html>
  3. Thumbnail Image Gallery

    Hello all, I am trying to create a simply image gallery, with a big pic that sits above a line of thumbnails. I have a separate xml file that contains the url for the big pic, the url for the thumbnail and also an image caption. What I'd like to happen is when the page loads the javascript checks to see how many image nodes there are in the xml file and creates that many divs to hold the various thumbnails in. I can get the js to dynamically create the required number of divs to hold the thumbnails, but can't work out how to load the actual images into their holders. I'm sure that it's a simply line of code, but can't work it out! Any suggestions would be welcome. Here is what I've got so far. <!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>Untitled Document</title> <script type="text/javascript"> if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); }else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }xmlhttp.open("GET","gallery.xml",false);xmlhttp.send();xmlDoc=xmlhttp.responseXML; x=xmlDoc.getElementsByTagName("image");i=0; function goDiv(id, html, width, height, left, top) { for (var i = 0; i<x.length;i++) { var newdiv = document.createElement("div"); newdiv.setAttribute("id",id); thumbsURL = (x.getElementsByTagName("thumbURL")[0].childNodes[0].nodeValue) newdiv.style.width = "200px";newdiv.style.height = "100px";newdiv.style.background = "#FFF";newdiv.style.border = "2px solid #333";newdiv.style.margin = "20px";newdiv.style.float = "left";newdiv.style.display = "block";newdiv.style.background-image = "url(" + thumbsURL + ")"; ??I tried to load the img here but with no luck document.body.appendChild(newdiv); } } </script></head> <input type="button" onclick="goDiv();" value="create thumbs" /></body></html>
×