I have been trying to figure out how to go about having a 2x2 grid on the side that showcases the thumbnails using the TN3 image gallery.I've tried taking out the ordered list and when i do that, the thumbs no longer work.So visually i want it to look like this:\[code\]
![url]The CSS is too long to post here but i will post what i think is the major code that effects the thumbnail viewer.\[code\].tn3-thumbs ul, .tn3-thumbs li { margin: 0; padding: 0;}.tn3-thumbs { position: absolute; width: 240px; height: 480px; bottom: 0; left: -290px; padding: 4px 28px 4px 28px;}.tn3-thumb { border: 1px solid](http://[img][img][img][img][img]etc..etc..\[/code\]right now it just looks like this:\[code\][img][img][img]etc..\[/code\]I have posted the code here on jsfiddle: [url=http://jsfiddle.net/VggTC/]JSFIDDLE[/url]The CSS is too long to post here but i will post what i think is the major code that effects the thumbnail viewer.\[code\].tn3-thumbs ul, .tn3-thumbs li { margin: 0; padding: 0;}.tn3-thumbs { position: absolute; width: 240px; height: 480px; bottom: 0; left: -290px; padding: 4px 28px 4px 28px;}.tn3-thumb { border: 1px solid #000; width: 120px; height: 120px; margin-right: 0; cursor: pointer;}.tn3-thumb img { width: 120px; height: 120px;} .tn3-thumb-over { border: 1px solid #000;}.tn3-thumb-selected { border: 1px solid #000; cursor: default;}\[/code\]And the JS for the TN# is:\[code\]$(document).ready(function() { var tn1 = $('.mygallery').tn3({ skinDir:"skins", autoplay:true, delay:5000, random:true, image:{ random:true, width:1000, transitions:[{ type:"fade", duration:800, easing:"swing" }] }, });});?\[/code\]The HTML is:\[code\] <div class="tn3 album"> <div class="tn3 description">Large Images, good for fullscreen view</div> <div class="tn3 thumb">http://www.zzz.com/PFV/images/gallery/114x72/3.jpg</div> <ol> <li> <a href="http://www.zzz.com/PFV/images/test1.jpg"> <img src="http://www.zzz.com/PFV/images/test1.jpg" /> </a> </li> <li> <a href="http://www.zzz.com/PFV/images/test2.jpg"> <img src="http://www.zzz.com/PFV/images/test2.jpg" /> </a> </li> <li> <a href="http://www.zzz.com/PFV/images/test3.jpg"> <img src="http://www.zzz.com/PFV/images/test3.jpg" /> </a> </li> <li> <a href="http://www.zzz.com/PFV/images/test4.jpg"> <img src="http://www.zzz.com/PFV/images/test4.jpg" /> </a> </li> <li> <a href="http://www.zzz.com/PFV/images/test5.jpg"> <img src="http://www.zzz.com/PFV/images/test5.jpg" /> </a> </li> </ol></div>\[/code\])