Witam,

zacznę od kodu:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  5. <title>xxx</title>
  6. <link href="styl.css" rel="stylesheet" type="text/css" />
  7. <style media="screen,projection" type="text/css">
  8.  
  9. /* general styling for this example */
  10. * { margin: 0; padding: 0; }
  11. body { padding: 20px; }
  12.  
  13. /* begin gallery styling */
  14. #jgal { list-style: none; width: 200px; }
  15. #jgal li { opacity: .5; float: left; display: block; width: 60px; height: 60px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; }
  16. #jgal li img { position: absolute; top: 20px; left: 220px; display: none;margin-top:150px; }
  17. #jgal li.active img { display: block; }
  18. #jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }
  19.  
  20. /* styling without javascript */
  21. #gallery { list-style: none; display: block;  }
  22. #gallery li { float: left; margin: 0 10px 10px 0; }
  23.  
  24.     </style>
  25.  
  26.     <!--[if lt IE 8]>
  27.     <style media="screen,projection" type="text/css">
  28.         #jgal li { filter: alpha(opacity=50); }
  29.         #jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
  30.     </style>
  31.     <![endif]-->
  32.     <script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script>
  33.     <!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]-->
  34.     <script type="text/javascript">
  35. var gal = {
  36.     init : function() {
  37.         if (!document.getElementById || !document.createElement || !document.appendChild) return false;
  38.         if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
  39.         var li = document.getElementById('jgal').getElementsByTagName('li');
  40.         li[0].className = 'active';
  41.         for (i=0; i<li.length; i++) {
  42.             li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
  43.             li[i].style.backgroundRepeat = 'no-repeat';
  44.             li[i].title = li[i].getElementsByTagName('img')[0].alt;
  45.             gal.addEvent(li[i],'click',function() {
  46.                 var im = document.getElementById('jgal').getElementsByTagName('li');
  47.                 for (j=0; j<im.length; j++) {
  48.                     im[j].className = '';
  49.                 }
  50.                 this.className = 'active';
  51.             });
  52.         }
  53.     },
  54.     addEvent : function(obj, type, fn) {
  55.         if (obj.addEventListener) {
  56.             obj.addEventListener(type, fn, false);
  57.         }
  58.         else if (obj.attachEvent) {
  59.             obj["e"+type+fn] = fn;
  60.             obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
  61.             obj.attachEvent("on"+type, obj[type+fn]);
  62.         }
  63.     }
  64. }
  65.  
  66.  
  67.  
  68. gal.addEvent(window,'load', function() {
  69.     gal.init();
  70. });
  71.  
  72.     </script>
  73.  
  74. <!-- (C) stat24 / podstrony -->
  75. <script type="text/javascript">
  76. <!--
  77. document.writeln('<'+'scr'+'ipt type="text/javascript" src="http://s2.hit.stat24.com/_'+(new Date()).getTime()+'/script.js?id=0tVAUmtIc9B4076P_WPcr4aAzQZpulrbUW2MmGjPOlH.n7/l=11"></'+'scr'+'ipt>');
  78. //-->
  79. </script>
  80. </head>
  81.  
  82.  
  83. <body>
  84.  
  85.     <div class="h_mnu_01"> 
  86.             <ul> 
  87.                 <li><a id="home" href="page_2.php"><img src="blank.gif"></a></li>
  88.                 <li><a id="history" href="page_3.php"><img src="blank.gif"></a></li>
  89.                 <li><a id="gallery" href="page_4.php"><img src="blank.gif"></a></li>
  90.                 <li><a id="videos" href="page_5.php"><img src="blank.gif"></a></li>
  91.                     <li><a id="forum" href="page_6.php"><img src="blank.gif"></a></li>
  92.                 <li><a id="news" href="page_7.php"><img src="blank.gif"></a></li>
  93.                 <li><a id="contact" href="page_8.php"><img src="blank.gif"></a></li>
  94.             </ul>
  95.         </div>
  96.  
  97.     <div style="margin-top:75px;">
  98.      <ul id="gallery">
  99.     <li><img src="images/je_1.jpg" alt="Josef &amp; Erika 1" /></li>
  100.     <li><img src="images/roland_ads_2.jpg" alt="Roland Ads" /></li>
  101.     <li><img src="images/cd_2.jpg" alt="CD Cover 2" /></li>
  102.     <li><img src="images/cd_1.jpg" alt="CD Cover 1" /></li>
  103.     <li><img src="images/je_3.jpg" alt="Josef &amp; Erika 3" /></li>
  104.     <li><img src="images/je_2.jpg" alt="Josef &amp; Erika 2" /></li>
  105.     <li><img src="images/lktrd_poster1.jpg" alt="LKTRD Poster" /></li>
  106.     <li><img src="images/je_4.jpg" alt="Josef &amp; Erika 4" /></li>
  107.     <li><img src="images/inside_1.jpg" alt="Inside Magazine" /></li>
  108.     <li><img src="images/oceanen_4.jpg" alt="Oceanen" /></li>
  109.  
  110. </ul>
  111. </div>             
  112. </body>
  113. </html>
[HTML] pobierz, plaintext


styl.css -> http://jackpub.pl/styl.css

Problem polega na tym iż galeria się nie wyświetla, galeria pobrana stąd ->http://monc.se/kitchen/80/lightweight-image-gallery-with-thumbnails

Jeżeli skasuję menu [hlc_mnu_01] galeria działa.

Jakieś rady?