Hi, I bought this gallery, but does not work in my single html page ... who can help me? this is a piece of my singlepage and the part of the gallery is in blu color : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Cais Airbrush - Frongia Daniela - book illustrator</title> <meta name="keywords" content="illustrator-illustration-children's book illustrator-book-freelance-worldwide-child-children-cartoonist-cartoon-manga-anime-airbrush-airbrush artist-watercolour" /> <meta name="description" content="" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <!-- [template css] begin --> <link rel="stylesheet" href="/css/screen.css" type="text/css" media="screen, projection" /> <link rel="stylesheet" href="/css/960.css" type="text/css" media="screen, projection" /> <link rel="stylesheet" href="/css/print.css" type="text/css" media="print" /> <!--[if IE]> <link rel="stylesheet" href="/css/ie.css" type="text/css" media="screen, projection" /> <![endif]--> <!-- [template css] end --> <!-- [favicon] begin --> <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" /> <link rel="icon" type="image/x-icon" href="/favicon.ico" /> <!-- [favicon] end --> <!-- Some hacks for the dreaded IE6 --> <!--[if lt IE 7]> <link rel="stylesheet" href="/css/ie6.css" type="text/css" media="screen" /> <script type="text/javascript"> var clear="images/clear.gif"; </script> <script type="text/javascript" src="/js/unitpngfix.js"></script> <![endif]--> <script type="text/javascript" src="/js/mootools-yui-compressed.js"></script> <script type="text/javascript" src="/js/jquery.js"></script> <script type="text/javascript" charset="utf-8">jQuery.noConflict();</script> <!-- START FANCYZOOM --> <script type="text/javascript" src="/js/fancyzoom.js"></script> <script type="text/javascript" charset="utf-8"> document.addEvent('domready', function() { $$("div.photo a").each(function(el) { new FancyZoom(el, { scaleImg:true, onShow: function(e) { var fancy = this var a = fancy.content_div.getElement('a') if(a && a.getElement('.loading')) { var loaded = function() { fancy.loaded = true fancy.options.width = this.width fancy.options.height = this.height a.empty().adopt(this) FancyZoom.show(e) } var image = new Image() image.onload = loaded image.src = a.href } }, max: 700 }) }) }); </script> <!-- END FANCYZOOM --> <!-- START SCROLL --> <script src="/js/scroll.js" type="text/javascript"></script> <!-- END SCROLL --> <!-- START CUFON --> <script type="text/javascript" src="/js/cufon-yui.js"></script> <script type="text/javascript" src="/js/dustismo_400.font.js"></script> <script type="text/javascript"> Cufon.replace('h1,ul#nav,h2,h4', { hover: true, fontFamily: 'dustismo' }); </script> <!-- END CUFON --> <!-- START VALIDATE FORM CONTACT --> <script type="text/javascript" src="/js/form-contact-validate.js"></script> <!-- END VALIDATE FORM CONTACT --> </head> <body id="home-page"> <!-- START TOP FADE --> <div class="top-bg"> </div> <!-- END TOP FADE --> <!-- START BOTTOM FADE --> <div class="bottom-bg"> </div> <!-- END BOTTOM FADE --> <!-- START HEADER --> <div class="container_12"> <!-- START NAVIGATION SECTION --> <div class="grid_3 alpha"> <div class="fixed-column"> <!-- START LOGO --> <a href="index.htm" title="home page"> <img src="images/logo.png" alt="logo" class="logo" /> </a> <!-- END LOGO --> <!-- START NAV --> <ul id="nav"> <li><a href="#home-page" title="Home page"> home</a></li> <li><a href="#about-page" title="about"> about</a></li> <li><a href="#publications-page" title="publications"> publications</a></li> <li><a href="#contact-page" title="contatti"> contact</a></li> </ul> <!-- END NAV --> <!-- START FOLLOW ME --> <a href="http://www.facebook.com/pages/Cais-Airbrush/197946496908175" title="follow me on facebook"> <img src="images/follow-me.gif" alt="follow-me" class="follow-me" /> </a> <!-- END FOLLOW ME --> <!-- START FOLLOW ME --> <a href="http://uk.linkedin.com/pub/daniela-frongia/32/b20/151 " title="follow me on Linkedin"> <img src="images/linkedin.png" alt="follow-me" class="follow-me" /> </a> <!-- END FOLLOW ME --> <!-- Begin ShinyStat Free code --> <script type="text/javascript" language="JavaScript" src="http://codice.shinystat.com/cgi-bin/getcod.cgi?USER=caisairbrush"></script> <noscript> <a href="http://www.shinystat.com" target="_top"> <img src="http://www.shinystat.com/cgi-bin/shinystat.cgi?USER=caisairbrush" alt="Free web page counter" border="0" /></a> </noscript> <!-- End ShinyStat Free code --> <p> </div> </div> <!-- END NAVIGATION SECTION --> <div class="grid_9 omega right-column"> <!-- START HOME PAGE --> <a id="home-page"></a> <div class="home"> <div class="grid_9 omega"> <div class="container-home"> <h2>My illustrations</h2> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script> <script src="lib/dc.thumbgallery.ycomp.js" type="text/javascript"></script> <link rel="stylesheet" href="css/dc.thumbgallery.ycomp.css" type="text/css" media="screen" /> <script type="text/javascript"> <div id="gallery_3" style="width:400px;height:300px;"> </ div> $(document).ready(function() { /******************************************* * Code to init the gallery */ // Create a gallery with array source var mediaPath = 'images/'; $('#gallery_3').dcThumbnailGallery({ 'source':[ {'source':mediaPath+'large/1.jpg','thumbnail':mediaPath+'thumb/1p.jpg','category':'A'}, {'source':mediaPath+'large/2.jpg','thumbnail':mediaPath+'thumb/2p.jpg','category':'A'}, {'source':mediaPath+'large/4.jpg','thumbnail':mediaPath+'thumb/4p.jpg','category':'A'}, {'source':mediaPath+'large/5.jpg','thumbnail':mediaPath+'thumb/5p.jpg','category':'B'}, {'source':mediaPath+'large/6.jpg','thumbnail':mediaPath+'thumb/6p.jpg','category':'B'}, {'source':mediaPath+'large/7.jpg','thumbnail':mediaPath+'thumb/7p.jpg','category':'B'} ] }); }); </script> </div> </body> </div> <div class="clear"></div> </div> <div class="home-bottom-bg"></div> <!-- END HOME PAGE --> <!-- START ABOUT PAGE --> <a id="about-page"></a> <div class="about"> <div class="grid_5 alpha"> <div class="container-about"> <h2>About</h2> <p> Daniela Frongia is a self employed, experienced Italian book illustrator and airbrush artist. She does all types of illustrations with different styles and uses amazing colouring techniques. Daniela enjoys her career with a passion, as she likes to get lost in her drawing imagination in order to satisfy her clients requests. Her skills will turn your ideas into reality... Daniela's work does the talking so she doesn't have to!!! <p> If you are interested in a sampling her work, Please leave a short email with your request and she will draw a draft of what your character may look like!!! As seeing is believing... </div> </div> <!-- START AVATAR --> <div class="grid_4 omega avatar-image"> <img src="images/avatar.jpg" alt="avatar" class="avatar" /> </div> <!-- END AVATAR --> <div class="clear"></div> </div> <div class="about-bottom-bg"></div> <!-- END ABOUT PAGE --> </div> <div class="clear"></div> </div> <!--[if IE]> <script type="text/javascript"> Cufon.now(); </script> <![endif]--> </body> </html>
One problem is that you're declaring the document type twice, and differently each time. How that blows up depends on the browser it's blowing up in.