jquery - JavaScript code for my Image Gallery -

-

i making simple gallery page using html , css. coded onto html viewer , working fine when opened in google chrome , ie onmouseover not working. when go on selected thumbnail, supposed display larger image in bottom box not work.

i posted question before , got replies. ask if can please give me plain javascript code need put in make work. have code kindly gave works java script code if possible.

$(function(){     $('.thumbnails img').hover(function(){         $('#preview').attr('src',$(this).attr('src'));     },null); });

thank all! 

<!doctype html>  <head> <title>gallery</title>  <style type="text/css"> body { background: #222; margin-top: 100px; }  h3 { color: #eee; font-family: verdana; }  .thumbnails img { height: 100px; border: 4px solid #555; padding: 1px; margin: 0 10px 10px 0; }  .thumbnails img:hover { border: 4px solid #00ccff; cursor:pointer; }  .preview img { border: 4px solid #444; padding: 1px; width: 800px; }  </style>  </head> <body>   <div class="gallery" align="center">   <div class="thumbnails">     <img onmouseover="preview.src=img1.src" id="img1" src="http://i60.tinypic.com/2qjj62b.jpg" alt="image not loaded"/>     <img onmouseover="preview.src=img2.src" id="img2" src="http://i60.tinypic.com/mb4c21.jpg" alt="image not loaded"/>     <img onmouseover="preview.src=img3.src" id="img3" src="http://i61.tinypic.com/35avvpw.jpg" alt="image not loaded"/>     <img onmouseover="preview.src=img4.src" id="img4" src="http://i60.tinypic.com/29qnjme.jpg" alt="image not loaded"/>     <img onmouseover="preview.src=img5.src" id="img5" src="http://i62.tinypic.com/zkmvd2.jpg" alt="image not loaded"/>     <img onmouseover="preview.src=img6.src" id="img6" src="http://i61.tinypic.com/oqezus.jpg" alt="image not loaded"/>     <img onmouseover="preview.src=img7.src" id="img7" src="http://i57.tinypic.com/1tx6oj.jpg" alt="image not loaded"/>       <img onmouseover="preview.src=img8.src" id="img8" src="http://i58.tinypic.com/143onsj.jpg" alt="image not loaded"/>     <img onmouseover="preview.src=img9.src" id="img9" src="http://i61.tinypic.com/2l16qf.jpg"  alt="image not loaded"/>     <img onmouseover="preview.src=img0.src" id="img0" src="http://i61.tinypic.com/21l0own.jpg"  alt="image not loaded"/>  </div></br>  <div class="preview" align="center">     <img id="preview" src="http://i60.tinypic.com/2qjj62b.jpg" alt="no image loaded"/> </div>  </br>    </div> </body> </html>

here vanilla js version of gallery: 

var images = document.getelementsbyclassname('thumbnails')[0].getelementsbytagname('img'); (var = 0; < images.length; i++) {     images[i].onmouseover = function () {         document.getelementbyid('preview').src = this.src;     } }

see working here: http://jsfiddle.net/2am2n/5/

update

here's how use descriptions alt attributes: 

document.getelementbyid('desc').innerhtml = this.alt; // goes inside our loop

here live example: http://jsfiddle.net/2am2n/6/


Comments

Post a Comment

Popular posts from this blog

java - WrongTypeOfReturnValue exception thrown when unit testing using mockito -

-
my test list<person> mylist; @test public void testisvalidperson() { mylist = new arraylist<person>(); mylist.add(new person("tom")); when(persondao.get(person)).thenreturn(mylist); when((persondao.get(person)).isempty()).thenreturn(false);//------exception thrown boolean result = service.isvalid("tom"); assertfalse(result); } method tested: public boolean isvalid(string person){ persondao = new persondao(); person personobj = new person(person); return (persondao.get(person).isempty())?false : true; } exception thrown: org.mockito.exceptions.misusing.wrongtypeofreturnvalue: boolean cannot returned get() get() should return list *** if you're unsure why you're getting above error read on. due nature of syntax above problem might occur because: 1. exception *might* occur in wrongly written multi-threaded tests. please refer mockito faq on limitations of concurrency testing. 2. sp
Read more

php - Magento - Deleted Base url key -

-
i working on cleaning url: http://mydomain.com/shop/shop/deals i going through settings in configuration tab in admin panel on magento , change secure , unsecure base urls remove first base url "shop" web page read: http://mydomain.com/shop/deals so changed unsecure base urls mydomain.com/shop mydomain.com , secure 12.345.67.89/shop 12.345.67.89. wrong thing do. i cannot reload page or admin console. how access these files through ftp , change correctly there?? when make changes in admin panel changes made in database not in file. have make changes in database. 1.go database , select core_config_data table under table find web/unsecure/base_url , web/secure/base_url . make changes here. don't forget clear cache in var/cache folder
Read more

android - How to disable Button if EditText is empty ? -

-
i have edittext , button in application. when button clicked,the text entered in edittext added listview. i want disable button if edittext empty.how ? this code button click imagebutton imb=(imagebutton)findviewbyid(r.id.btn_send); imb.setonclicklistener(new onclicklistener() { @override public void onclick(view arg0) { edittext et = (edittext)findviewbyid(r.id.edittext1); string str = et.gettext().tostring(); web1.add(str); toast.maketext(shoutsingleprogram.this, "you entered...."+str, toast.length_short).show(); adapter1.notifydatasetchanged(); et.settext(""); } }); } how can ? edittext1.addtextchangedlistener(new textwatcher() { @override public void ontextchanged(charsequence s, int start, int before, in
Read more