JavaScript - How Do I Remove The Black Border Around The Thumbnails???
Similar TutorialsHello ppl, I am trying to make a Black Jack game and need some help. In my code, I want the dealer cards which are the bottom cards to be face down and when I click "stand" to make them appear. In the beginning I want to get the players name and have it appear before the score variable. In my current code, the score variable is not displaying on the page. Also, when I click the "New Game" button, the page refreshes, instead of refreshing, I only want it to reset the cards and the dealer and player total. I also want help in preloading the card images. I have attached the image files and the html file. Any help you can give will be appreciated, I have to finish this in 24 hours. hi I want to do this work but I don't know how to do this: when sb click on the image , a new windows will open and show the picture but all around it becomes dark . I have attached an example in which sb clicked on the image and the new windows opened and showed the image bigger . i have attached the image how can I do so? thanks Can you tell me a similar way to do this? 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? 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 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> 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 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!! 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 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 Hello, I'm currently using this code: I want it so that there isnt a box around the countdown, and the countdown is the same text as "you will be redirected in" here is it in action: http://www.playelite.org/redirect.html Code: <form name="redirect"> <center> <font face="Arial"><b>You will be redirected in: <form> <input type="text" size="3" border="0" name="redirect2"> </form> seconds</b></font> </center> <script> <!-- var targetURL="http://google.com" var countdownfrom=10 var currentsecond=document.redirect.redirect2.value=countdownfrom+1 function countredirect(){ if (currentsecond!=1){ currentsecond-=1 document.redirect.redirect2.value=currentsecond } else{ window.location=targetURL return } setTimeout("countredirect()",1000) } countredirect() //--> </script> Thanks I'm using jQuerys' $.ajax to load a div with some details in it and i want to use the esc key to close the div. Heres the code so far Code: $('.username span').click(function(){ $('.MiniPro').remove(); ID = $(this).parent().attr('ID'); This = $(this).parent(); miniPro(); }); function miniPro() { $(This).append('<div class="MiniPro">Loading...</div>'); $.ajax({ type: 'POST', data: 'userID='+ID, url: 'processing/miniPro.php', success: function(msg) { $('.MiniPro').remove(); $(This).append('<div class="MiniPro"'+msg+'<div class="MiniProClose">X</div></div>'); } }); } Is it even possible to do that? Hi all, here i got a problem, i want to remove all the Li tag that with a classname"test" . Code: <html> <head> <title>Introduction to the DOM</title> <script> window.onload = function(){ var li = document.getElementsByTagName("li"); for ( var j = 0; j < li.length; j++ ) { if(li[j].getAttribute('class')=='test'){ li[j].parentNode.removeChild( li[j] ); } } }; </script> </head> <body> <h1>Introduction to the DOM</h1> <p class="test">There are a number of reasons why the DOM is awesome, here are some:</p> <ul> <li class="ppp">ppp.</li> <li class="test">It's easy to use.</li> <li class="test">It can help you to find what you want, really quickly.</li> <li class="test">It's easy to use.</li> <li class="test">It can help you to find what you want, really quickly.</li> <li class="test">It's easy to use.</li> <li class="test">It can help you to find what you want, really quickly.</li> <li class="test">It's easy to use.</li> <li class="test">It can help you to find what you want, really quickly.</li> <li class="test">It's easy to use.</li> <li class="test">It can help you to find what you want, really quickly.</li> <li class="test">It's easy to use.</li> <li class="test">It can help you to find what you want, really quickly.</li> <li class="test">It's easy to use.</li> <li class="test">It can help you to find what you want, really quickly.</li> <li class="test">It's easy to use.</li> <li class="test">It can help you to find what you want, really quickly.</li> </ul> </body> </html> Hi Guys, I'm new at JS. I need to remove TR elements from parent table but the problem is there are no table ID/Name Is it possible to perform it? Please see attach - i need remove red marked block... what scrip i have to use if i will put it to the green block? Thank you. i am doing an edit operation in my web page by changing a image, but when i am revisiting the page it is showing older image rather than new one. So can any one say how to refresh the page without using any button like window.location.reload(). Is there any way to use math.random in url?? I am using this script that gets messed up when you resize the window. I figured out that I could use this other script to do stuff just after the window gets resized. Code: (function($,sr){ // debouncing function from John Hann // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ var debounce = function (func, threshold, execAsap) { var timeout; return function debounced () { var obj = this, args = arguments; function delayed () { if (!execAsap) func.apply(obj, args); timeout = null; }; if (timeout) clearTimeout(timeout); else if (execAsap) func.apply(obj, args); timeout = setTimeout(delayed, threshold || 100); }; } // smartresize jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; })(jQuery,'smartresize'); // usage: $(window).smartresize(function(){ // code that takes it easy... }); So I re-instantiate the misbehaving script in there so it fires whenever the window is resized (I changed it to 500 so it really only fires once after you are done resizing). This fixes it. The new instance doesn't have a problem but the old instance is still there and messed up. so I use. $($.misbehaving-script).remove(); just before instantiating after window resize, which gets rid of broken instance. Problem solved.. Except that messes up a different script! It's driving me crazy. Any advice would of course be very welcome. Is it possible to convert "xyz123456xyz789" into "123456xyz789"? What I'm trying to say is, remove the first occurence of "xyz" from the string, so that all the other occurrences of "xyz" that aren't the first one, remain. Help is appreciated. Thanks, Jazzo Hi I have javascript which calls a load of Java applet functions, there are many of these, and the parameters are all the same. The only thing that changes is the name of the function to call. So here is an example of the Javascript: Code: function answercall() { try { document.frm.response.value = document.Telepop.Answercall(document.telepopfrm.extension.value); } catch(err) { alert(err.description); } } function clearcall() { try { document.telepopfrm.response.value = document.Telepop.Clearcall(document.telepopfrm.extension.value); } catch(err) { alert(err.description); } } function holdcall() { try { document.telepopfrm.response.value = document.Telepop.Holdcall(document.telepopfrm.extension.value); } catch(err) { alert(err.description); } } etc, etc.... and the html like this: <input type="button" value="Answer" onclick="answercall()" /> <input type="button" value="Hangup" onclick="clearcall()" /> <input type="button" value="Hold" onclick="holdcall()" /> There does seem to be a lot of duplication here, so I was wondering of ways to reduce or eliminate the duplication. any ideas? AC |