JavaScript - How Can I Make Thumbnails Like This Website Here
Can you tell me a similar way to do this?
Similar TutorialsGreetings! I am currently working on my own company's website I am currently working with the FAQ page and I need to make a simple textbox, where visitors can type and ask a question and submit it, the question the visitor typed needs to be read by javascript from a seperate xml file which should be read with javascript. Now i dont know how to start with this and I would appreciate if someone could give me a lead on what things i should do and etc. Best regards Obs hi everyone! i downloaded a Facebook Page template recently. the template works great, but i wanted to add one thing. here is the demo of the code: http://www.facebooktemplates2u.com/d...best_business/ here is where you can download the template: http://www.schoolofrok.com/facebook/html.zip/ anyhow, the part i want to change is the link that directs it to the content. for example, when you scroll over About Us, the little pop up from the bottom comes out. when you click it, it takes you to the About Us content. what i wanted to do, is make it so that when you click the whole jpg, it can take you to the content also. i noticed that the small link that pops up is too tiny and people get confused on where to click. any suggestions? TIA! I heard that when we put javascript in website, then site takes time to open, is it correct ? If yes then which script is good for website.
Hi! I'm as new as they come when it deals with website development but forums have been useful to me in the past and I'm hoping I can get some kind of direction from all the wonderful people on this forum! I have an idea for a website that I'd like to pursue, and it would need functions such as: -Live news feed -Member logins, profiles, ability to rate/leave feedback for members -Mobile phone friendly -Comment on postings -Create an intro video (maybe even with animated stick figures to explain how the site works) -Accept paypal or other payment method -And basically, need to understand the monthly maintenance cost of all these functions, how to minimize expenses, etc. I know it seems far fetched for a newbie! But I need to know if this is possible.. how would I begin implementing a site like this.. Do I need to find a programmer to code it from scratch? Are there pre-written scripts available for all the functions I listed? What can I expect the costs to be? What's the best way to move forward? Ok, so if you navigate ovr to my website "http://www.mancunianmacca.co.cc" you will notice that a box pops up asking for your name. When you type it in it adds it to the page. Is there a way I can get this to remember the users input and only ask them once then remember. Like cookie or anything. If you need any extra things. Just ask.
Hello, I would like to know how to make a website (in this case, a parent div) viewable only if JavaScript is enabled? I tried to develop a code that can do this, but could not find the solution. Code: <html> <head> <script type="text/javascript"> window.onload=function() var="true" if(JavaScript.enabled) { document.getElementById('true') } OnClick() {document.getElementById('toggle').onclick=function() {document.getElementById('jahava').style.display=(document.getElementById('jahava').style.display!='none')?'none':'';}} </script> </head> <body> <noscript>You must have JavaScript enabled to view the website.</noscript> <div id="jahava">Contents Here</div> </body> </html> Ok so im new to javascript and I have a button in an interface for an app. It's like drag and drop and i want this button to link you to a certain website searching for what the user types in the searchField1 box. The button is button16. Such as you type dogs into the text box and you click the google button among other search engines and it will redirect you to a google search doing a search for dogs. But how do I make this button search google and search for whats in searchField1. I would really appreciate the help. Im looking everywhere to learn this but just cant find it. If you could tell me how or send me a link to a tutorial that would be great. Thanks! Here is the code: I don't know where and what to add to do that. Please help. Please see URL: http://backstageweb.net/2011/web.htm At the bottom of the page, I want to create nav links on these thumbnail images (NOT the large main images above them) so that each portfolio piece can go to its own page that has its own descriptive text in the left sidebar. There is no HTML for the thumbnails; they are generated via .js. Can this be done? .js file attached. Better yet, if it's not too difficult, I would love to switch out the text with some cool .js code so all the functionality could be contained within this single page, instead of linking to individual HTML pages (like when you click another thumbnail, the text slides up and out of sight, and the new text slides up from the bottom to replace the former text) but I fear this may be over my head. I'll settle for the more primitive approach. Also, on a more minor issue, for some reason a thumbnail for the last list item does not display. You'll see my page displays 3, but the code contains 4: Code: <div id="maingallery"> <div id="slides"> <ul> <li><img width="700" height="525" alt="" src="images/WebLgTerraVoce.jpg"></li> <li><img width="700" height="525" alt="" src="images/WebLgSpca2.jpg"></li> <li><img width="700" height="525" alt="" src="images/WebLgSalon.jpg"></li> <li><img width="700" height="525" alt="" src="images/WebLgTerraVoce.jpg"></li> </ul> </div> </div> (I'm not too worried about this second issue, but I'd be happy to fix it if you can tell me how) Thanks for any help. John I have a request for a lightbox that has the image which expands to fit the height or width, and also displays the thumbnails of the previous and next image. They want it to behave similar to this: http://www.karamann.com/#/interiors/...lakeshore/zoom Can someone point me to either a tutorial or an existing script? I've found dozens of lightboxes, but none with the thumbnails. I do have a lightbox that has static prev/next buttons. Is there any way I can have the script replace those buttons with thumbnails? Would this be the way to go? Ive searched everywhere for an image gallery script which shows only thumbnails. -Ive found none =/ What i want is something like this: http://www.dhtmlgoodies.com/scripts/...ideshow-5.html BUT i do want just the small thumbnails thats slideable. The below gallery-link is what I want, but it should be sliding like the thumbnails in the above gallery so that I don't have to place 100 pictures in one page. http://www.gethifi.com/demos/jphotogrid Ive found galleries in flash, but it would be great to not have to use flash.. an1 knows about a script like the one in my description? Im not awsome at scripts. I know a little, and have tried to modify some scripts, but ive given up Hello, I would like to take current page (which has virtualpaginate numbers below the images to advance through them) and instead of having numbers, to have thumbnails which will be across the bottom of the page (in the footer div)... I will have about 35-40 thumbnails and I'd like it so that the thumbnails correspond to the image that is displayed. I also would like to have the thumbnails be a "slider" type of script which allows the user to browse through the thumbnails by moving their mouse left-and-right The image in the center DIV (and its accompanying information) should be replaced OnClick, not on hover over the thumbnails. I haven't been able to find an example of this, but I was wondering if someone could point me in the correct direction to achieve this. Here is my current code: 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>Viviana Santamarina</title> <style type="text/css"> html, body { background-color: #111; width: 1100px; margin-right: auto; margin-left: auto; margin-top: 50px; padding: 0px; border: 0px; } p { color: white; font-family: arial; font-size: 18px; font-weight: bold;} h1 { color: white; font-family: arial; font-size: 24px; font-weight: bold;} h5 { color: white; font-family: arial; font-size: 16px;} h6 { color: white; font-family: arial; font-size: 12px; margin-top: 0px;} a { color: white; font-family: arial; font-size: 14px; font-weight: bold;} #container { width: 1000px; margin: 0 0 0 20px; /* top right bottom left */ padding: 0; background-color: #111; } #container #col1 { background: #000; height: 600px; width: 250px; float: left; } #container #col2outer { width: 750px; float: right; margin: 0; padding: 0; } #col2outer #col2mid { background: #000; height: 600px; width: 500px; float: left; } #col2outer #col2side { background: #000; height: 600px; width: 250px; float: right; } #col2outer #portfolio { background: #000; height: 450px; width: auto; float: center; } #col2outer #pages { background: #000; height: 50px; width: 250px; float: bottom; margin: 20px; } #container #footer { float: left; width: 870px; } </style> <link rel="stylesheet" type="text/css" href="css/tabs-accordion.css"/> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script src="js/jquery.tools.min.js"></script> <script type="text/javascript" src="js/virtualpaginate.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <!-- is the accordian another script file that's missing from this list? --> <!-- do the lightbox and accordian scripts need to be loaded in a certain order? --> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); // Select all links in object with gallery ID $("#accordion").tabs("#accordion div.pane", {tabs: 'h2', effect: 'slide', initialIndex: null}); }); </script> </head> <body> <div id="container"> <h1>Viviana Santamarina - Paper Knitted Sculptures</h1> <div id="col1" align="center"> <div id="accordion"> <h2><strong>ABOUT MY WORK </strong></h2> <div class="pane" style="display:block" align="left"> <h6 align="left"> Turning humble tools like pencils into hooks and paper into strips allows me to leave graphite traces while the paper is being knitted, a deconstructed drawing of sorts.<br><br> While the stitches grow, interdependence grows as well. The tension that both elements generate a structural and narrative balance by circling what it is and giving edge to the void. <br><br> <a href="readmore.html">read more</a> </h6> </div> <h2><strong>RECENT AWARDS</strong></h2> <div class="pane" align="left"> <h6 align="left"> Turning humble tools like pencils into hooks and paper into strips allows me to leave graphite traces while the paper is being knitted, a deconstructed drawing of sorts.<br><br> While the stitches grow, interdependence grows as well. The tension that both elements generate a structural and narrative balance by circling what it is and giving edge to the void. <br><br> <a href="readmore.html">read more</a> </h6> </div> <h2><strong>PREVIOUS EXHIBITIONS</strong></h2> <div class="pane" align="center"> <p> Gertrude Herbert "A Sense of Place 2010" Augusta, GA September 17th - November 5th, 2010 http://www.ghia.org/ </p> </div> <h2><strong>CONTACT INFORMATION</strong></h2> <div class="pane" align="center"> <h6 align="left"> Turning humble tools like pencils into hooks and paper into strips allows me to leave graphite traces while the paper is being knitted, a deconstructed drawing of sorts.<br><br> While the stitches grow, interdependence grows as well. The tension that both elements generate a structural and narrative balance by circling what it is and giving edge to the void. <br><br> <a href="readmore.html">read more</a> </h6> </div> </div> </div> <div id="col2outer"> <div id="col2mid" align="center"> <p>PORTFOLIO</p> <div id="portfolio"> <div class="virtualpage hidepiece"> <div id="gallery"> <a href="images/work/highres/EVA.jpg" title="Sitting Nude, 2010"><img src="images/work/EVA.jpg" class="img" border="0" /></a> <h5>"Sitting Nude" 2010 <p></h5> <h6>Medium: paper crochet<br> Dimensions: 24" x 22" x 32"<br> </h6> </div> </div> <div class="virtualpage hidepiece"> <div id="gallery"> <a href="images/work/highres/Corset.jpg" title="Corset, 2009"><img src="images/work/Corset.jpg" class="img" border="0"/></a> <h5>"Corset" 2009 <p></h5> <h6>Medium: paper crochet<br> Dimensions: 30" x 20" x 3"<br> </h6> </div> </div> <div class="virtualpage hidepiece"> <div id="gallery"> <a href="images/work/highres/Browsing2.jpg" title="Browsing 2, 2010"> <img src="images/work/Browsing2.jpg" class="img" border="0"/></a> <h5>"Browsing 2" 2010 <p></h5> <h6>Medium: paper crochet, book<br> Dimensions: 8" x 11" x 10"<br> </h6> </div> </div> <div class="virtualpage hidepiece"> <div id="gallery"> <a href="images/work/highres/ShapingTheVoid.jpg" title="Shaping The Void, 2010"><img src="images/work/ShapingTheVoid.jpg" class="img" border="0"/></a> <h5>"Shaping The Void" 2009 <p></h5> <h6>Medium: paper crochet, pencils<br> Dimensions: 22" x 14" x 14"<br> </h6> </div> </div> <div class="virtualpage hidepiece"> <a href="images/work/TandemRowingl.jpg" rel="lightbox"><img src="images/work/TandemRowing.jpg"></a> </div> </div> <!-- Pagination DIV --> <div id="pages"> <div id="gallerypaginate" class="paginationstyle"> <a href="#" rel="previous"><<</a>   <span class="flatview"></span>  <a href="#" rel="next" class="imglinks">>></a> </div> </div> <!-- Initialize --> <script type="text/javascript"> var gallery=new virtualpaginate({ piececlass: "virtualpage", //class of container for each piece of content piececontainer: 'div', //container element type (ie: "div", "p" etc) pieces_per_page: 1, //Pieces of content to show per page (1=1 piece, 2=2 pieces etc) defaultpage: 0, //Default page selected (0=1st page, 1=2nd page etc). Persistence if enabled overrides this setting. persist: false //Remember last viewed page and recall it when user returns within a browser session? }) gallery.buildpagination(["gallerypaginate", "gallerypaginate2"]) </script> </div> <div id="col2side" align="center"> <p>UPCOMING SHOWS</p> <h6 align="left"> Cherry Creek Art Festival<br> Denver, CO<br> July 2nd - 4th, 2011<br> <a href="http://www.cherryarts.org" rel="nofollow" target="_blank">http://www.cherryarts.org/</a><br><br> </h6> </div> </div> <div id="footer"> <p>Viviana Santamarina - vivitus@gmail.com - 415-552-3078</p> </div> </div> </body> </html> I'd appreciate any thoughts on how I can have the thumbnails in the footer DIV change the picture in the "portfolio" div just like my virtualpaginate numbers currently do. Thank you in advance!! I'm using the Nivo slider (http://nivo.dev7studios.com/) for a banner with different thumbnails for the controls. After several hours of wrestling with the CSS, I was able to make it so each thumbnail could have its own style and hover. Now the JS doesn't work - meaning, the banner doesn't slide when I click any of the thumbnails. Can anyone help me out with this? I'm very much a beginner with JS. Here's my HTML: Code: <div id="slider" class="nivoSlider"> <img src="images/banner-1.jpg" alt="" /> <img src="images/banner-2.jpg" alt="" /> <img src="images/banner-3.jpg" alt="" /> <img src="images/banner-2.jpg" alt="" /> <span class="nivo-controlNav"> <a class="nivo-control smerch"> </a> <a class="nivo-control gervais"> </a> <a class="nivo-control karl"> </a> <a class="nivo-control insects"> </a> </span> </div> Here's my CSS: Code: /*============================*/ /*=== Custom Slider Styles ===*/ /*============================*/ #slider { position:relative; width:984px; height:501px; background:url(images/loading.gif) no-repeat 50% 50%;} #slider img { position:absolute; top:0px; left:0px; display:none;} #slider a { border:0; display:block;} .nivo-controlNav { position:absolute; left:260px; bottom:-42px;} .nivo-controlNav a { display:block; width:99px; height:67px; border:0; margin-right:3px; float:left;} .nivo-controlNav a.active { background-position:0 -22px;} .nivo-directionNav a { display:block; width:30px; height:30px; background:url(images/arrows.png) no-repeat; text-indent:-9999px; border:0;} a.nivo-nextNav { background-position:-30px 0; right:15px;} a.nivo-prevNav { left:15px;} .nivo-caption { text-shadow:none; font-family: Helvetica, Arial, sans-serif;} .nivo-caption a { color:#efe9d1; text-decoration:underline;} /*====================*/ /*=== Other Styles ===*/ /*====================*/ .clear {clear:both;} #slider .nivo-controlNav { position:absolute; bottom:0; /* Put the nav below the slider */ left: 0; width: 984px;} #slider .nivo-controlNav img { display:inline; /* Unhide the thumbnails */ height: 67px; width: 99px; position: relative;} .nivo-control { cursor:pointer;} .nivo-controlNav a {position: absolute; bottom: -122px;} .smerch {right: 38px; background: url(images/mn-thumb-1.png) top left no-repeat;} .smerch:hover{background: url(images/mn-thumb-1-over.png) top left no-repeat;} .gervais {right: 134px; background: url(images/mn-thumb-2.png) top left no-repeat;} .gervais:hover{background: url(images/mn-thumb-2-over.png) top left no-repeat;} .karl {right: 238px; background: url(images/mn-thumb-3.png) top left no-repeat;} .karl:hover{background: url(images/mn-thumb-3-over.png) top left no-repeat;} .insects {right: 342px; background: url(images/mn-thumb-4.png) top left no-repeat;} .insects:hover{background: url(images/mn-thumb-4-over.png) top left no-repeat;} Not sure if this is needed, but here's the section of the JS for the controls: Code: //Add Control nav if(settings.controlNav){ var nivoControl = $('<div class="nivo-controlNav"></div>'); slider.append(nivoControl); for(var i = 0; i < kids.length; i++){ if(settings.controlNavThumbs){ var child = kids.eq(i); if(!child.is('img')){ child = child.find('img:first'); } if (settings.controlNavThumbsFromRel) { nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('rel') + '" alt="" /></a>'); } else { nivoControl.append('<a class="nivo-control" rel="'+ i +'"><img src="'+ child.attr('src').replace(settings.controlNavThumbsSearch, settings.controlNavThumbsReplace) +'" alt="" /></a>'); } } else { nivoControl.append('<a class="nivo-control" rel="'+ i +'">'+ (i + 1) +'</a>'); } } I'm at a loss. Any help would be great. Thanks. Here's a quick visual of the parts of the slider: http://i.imgur.com/tkE2Y.png So when the page loads the thumbnails cycle through using setInterval. When the user clicks on one of the thumbnails, it is supposed to open a new window and show the enlarged version of that thumbnail stored in bigpics. However it only comes up with a broken image link. Any ideas why this is not working? Here is the code: <html> <head> <title>Untitled</title> </head> <script language="JavaScript" type="text/javascript"> <!-- var pics = new Array() pics[0]="pict1.gif" pics[1]="pict2.gif" pics[2]="pict3.gif" pics[3]="pict4.gif" pics[4]="pict5.gif" pics[5]="pict6.gif" var bigpics = new Array() bigpics[0]="pict12.gif" bigpics[1]="pict22.gif" bigpics[2]="pict32.gif" bigpics[3]="pict42.gif" bigpics[4]="pict52.gif" bigpics[5]="pict62.gif" i=0 setInterval("slide()",500) function slide(){ if (i<pics.length) i++ if (i==pics.length) i=0 document.images[0].src=pics[i] } function enlarge(x){ w=window.open() x=bigpics[i] w.document.write("<img src='x'>") } //--> </script> <body> <img src="pict1.gif" alt="" onclick="enlarge(this)"> </body> </html> Hi, I have a php script that gets all images in my directory and outputs them as gallery[0]=firstimage.jpg, [1], [2], ... The php script is supposed to work with the javascript, so to cover all angles here is the php Code: <? //PHP SCRIPT: getimages.php Header("content-type: application/x-javascript"); //This function gets the file names of all images in the current directory //and ouputs them as a JavaScript array function returnimages($dirname=".") { $pattern="(\.jpg$)|(\.jpeg$"); //valid image extensions $files = array(); $curimage=0; if($handle = opendir($dirname)) { while(false !== ($file = readdir($handle))){ if(eregi($pattern, $file)){ //if this file is a valid image //Output it as a JavaScript array element echo 'gallery['.$curimage.']="'.$file .'";'; $curimage++; } } closedir($handle); } return($files); } echo 'var gallery=new Array();'; //Define array in JavaScript returnimages() //Output the array elements containing the image file names ?> Then this javascript uses the array for a slideshow, only I want to list each image as a small thumbnail. This will allow me to view the images on my webserver much more eye friendly. Code: <script type="text/javascript"> var curimg=0 function rotateimages(){ document.getElementById("slideshow").setAttribute("src", "images/"+gallery[curimg]) curimg=(curimg<gallery.length-1)? curimg+1 : 0 } window.onload=function(){ setInterval("rotateimages()", 2500) } </script> <div style="width: 170px; height: 160px"> <img id="slideshow" src="images/bear.gif" /> </div> I'm not sure how to go about listing all the images. I was thinking about using definition lists and only selecting the last 10 images. I can insert images into the definition description so I thought that was my best shot. I get stuck on choosing the images from the array, I attempt something like the following Code: <img src="gallery[gallery.length-11]" /> </dd> But that looks for a file, not the array. I then modified the script to get me the most recent images (if I were to add/remove images). Does this look correct? Code: <script type="text/javascript"> var curimg=0 function newestimg(){ document.getElementById("largethumb").setAttribute("src", "images/"+gallery[curimg]) curimg=(curimg<gallery.length-1)? gallery.length-1 : curimg } </script> Hard To Explain What I need. Looking for javascript, to do what i've hap-hazardly slapped together he I'd like to do this without having to reload a page or create a new page for each image. http://www.samivesphotography.com/redes/portraits.html Specifically the switching of the main image by the thumbnails. The difference in what i've seen online, is that i'm actually using them as a cell background. -Sam I am looking for tutorials on creating a slideshow with thumbnails, but i need one where i can put the mouse over the thumbnail depending on the direction i am the mouse the thumbnail will move left or right thanks ok i need a bit of advice.. I have a webpage and i want to put a section of another website on to my own website.. The Section i want to put on my website is on this page www.bebo.com/thegaadiscos and i only want to put the section with the comments on it... What i want is a bit like the face book section of this website http://www.alexandraburkeofficial.com/ How would this be done does anyone know.. I want the dynamically add fields can be appear with a contain of php code, but I have not found the way, I wondering there who are willing to help me. my code as fallowing: Code: <!-- // another fields here //--> <div id="new_field"--></div> <script type="text/javascript"> var inputs = { fields: 0, target: "new_field", addInput: function() { if (this.fields != 5) { this.fields++; var newElement = document.createElement('div'); newElement.id = this.target + this.fields; newElement.innerHTML = "<?php if ($emails) { foreach ($emails as $result) { ?><b><?php echo $entry_emails; ?></b><br /><input type='text' name='emails[]' value='<?php echo $result; ?>' size='auto' maxlength='100%' /><?php } } ?>"; document.getElementById(this.target).appendChild(newElement); } else { alert("Only 5 fields allowed."); } }, };</script> i know it does not appear because the php code Quote: newElement.innerHTML = "<?php if ($emails) { foreach ($emails as $result) { ?><b><?php echo $entry_emails; ?></b><br /><input type='text' name='emails[]' value='<?php echo $result; ?' size='auto' maxlength='100%' /><?php } } ?>"; but please let me know is there another idea and pointer to make it work?, I would appreciate it and many thanks. I found this copy and paste java script for slide shows... I can only put 1 on the page then the other don't work... how do i edit it so i can put multiple on 1 page? http://www.javascriptkit.com/script/.../jsslide.shtml Code: <script language="JavaScript1.1"> <!-- /* JavaScript Image slideshow: By JavaScript Kit (www.javascriptkit.com) Over 200+ free JavaScript here! */ var slideimages=new Array() var slidelinks=new Array() function slideshowimages(){ for (i=0;i<slideshowimages.arguments.length;i++){ slideimages[i]=new Image() slideimages[i].src=slideshowimages.arguments[i] } } function slideshowlinks(){ for (i=0;i<slideshowlinks.arguments.length;i++) slidelinks[i]=slideshowlinks.arguments[i] } function gotoshow(){ if (!window.winslide||winslide.closed) winslide=window.open(slidelinks[whichlink]) else winslide.location=slidelinks[whichlink] winslide.focus() } //--> </script> Code: <a href="javascript:gotoshow()"><img src="food1.jpg" name="slide" border=0 width=300 height=375></a> <script> <!-- //configure the paths of the images, plus corresponding target links slideshowimages("food1.jpg","food2.jpg","food3.jpg","food4.jpg","food5.jpg") slideshowlinks("http://food.epicurious.com/run/recipe/view?id=13285","http://food.epicurious.com/run/recipe/view?id=10092","http://food.epicurious.com/run/recipe/view?id=100975","http://food.epicurious.com/run/recipe/view?id=2876","http://food.epicurious.com/run/recipe/view?id=20010") //configure the speed of the slideshow, in miliseconds var slideshowspeed=2000 var whichlink=0 var whichimage=0 function slideit(){ if (!document.images) return document.images.slide.src=slideimages[whichimage].src whichlink=whichimage if (whichimage<slideimages.length-1) whichimage++ else whichimage=0 setTimeout("slideit()",slideshowspeed) } slideit() //--> </script> <p align="center"><font face="arial" size="-2">This free script provided by</font><br> <font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript Kit</a></font></p> |