Problem using jquery.fancybox first picture showing twice

Problem using jquery.fancybox first picture showing twice

Hello,

Im having problem using jquery.fancybox.
The problem is, when loading main page for the first time gallery is displaying first image twice, here is some code :
  2. <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
  3. <script type="text/javascript">

  5. $(document).ready(function() {
  7. //Execute the slideShow
  8. slideShow();

  10. });

  12. function slideShow() {

  14. //Set the opacity of all images to 0
  15. $('#gallery a').css({opacity: 0.0});
  17. //Get the first image and display it (set it to full opacity)
  18. $('#gallery a:first').css({opacity: 1.0});
  20. //Set the caption background to semi-transparent
  21. $('#gallery .caption').css({opacity: 0.7});

  23. //Resize the width of the caption according to the image width
  24. $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
  26. //Get the caption of the first image from REL attribute and display it
  27. $('#gallery .cont').html($('#gallery a:first').find('img').attr('rel'))
  28. .animate({opacity: 0.7}, 400);
  30. //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
  31. setInterval('gallery()',5000);
  33. }

  35. function gallery() {
  37. //if no IMGs have the show class, grab the first image
  38. var current = ($('#gallery a.show') ?  $('#gallery a.show') : $('#gallery a:first'));

  40. //Get next image, if it reached the end of the slideshow, rotate it back to the first image
  41. var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));
  43. //Get next image caption
  44. var caption = next.find('img').attr('rel');
  46. //Set the fade in effect for the next image, show class has higher z-index
  47. next.css({opacity: 0.0})
  48. .addClass('show')
  49. .animate({opacity: 1.0}, 1000);

  51. //Hide the current image
  52. current.animate({opacity: 0.0}, 1000)
  53. .removeClass('show');
  55. //Set the opacity to 0 and height to 1px
  56. $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });
  58. //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
  59. $('#gallery .caption').animate({opacity: 0.7},10 ).animate({height: '60px'},500 );
  61. //Display the cont
  62. $('#gallery .cont').html(caption);
  65. }

  67. </script>
  68. <style type="text/css">

  70. .clear {
  71. clear:both;
  72. }

  74. #gallery {
  75. position:relative;
  76. height:360px;
  77. }
  78. #gallery a {
  79. float:left;
  80. position:absolute;
  81. }
  83. #gallery a img {
  84. border:none;
  85. }
  87. #gallery a.show {
  88. z-index:500;
  89. }

  91. #gallery .caption {
  92. z-index:600; 
  93. background-color:#000; 
  94. color:#ffffff; 
  95. height:60px; 
  96. width:100%; 
  97. position:absolute;
  98. bottom:0;
  99. }

  101. #gallery .caption .cont {
  102. margin:5px;
  103. }
  105. #gallery .caption .cont h3 {
  106. margin:0;
  107. padding:0;
  108. color:#1DCCEF;
  109. }
  110. </style>
  111. <?php
  112. $con = mysql_connect("localhost","xxx","xxx");
  113. if (!$con)
  114.   {
  115.   die('Could not connect: ' . mysql_error());
  116.   }

  118. mysql_select_db("xxx", $con);
  119. $result = mysql_query("SELECT * FROM xxx");
  120. ?>
  121. <div id="gallery">
  122. <?php
  123. while ($row = mysql_fetch_array($result)) {
  124. ?>
  125. <a href="opis.php?nr=<?php echo $row['nr']; ?>" >
  126. <img src="admin/<?php echo $row['url_zdjecia'] ?>" alt="Zdjecie" width="580" height="360" title="" rel="Marka: <?php echo $row['marka']; ?> Model: <?php echo $row['model']; ?><br>Rok produkcji: <?php echo $row['rok_produkcji']; ?> Pojemnosc: <?php echo $row['silnik']; ?> <br>Cena: <?php echo number_format($row['cena'], 0, ',', ' ')." PLN"; ?>"/>
  127. </a>

  129. <?php
  131. }
  132. ?>
  133. <div class="caption"><div class="cont"></div></div>
  134. </div>

  136. <script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
  137. <script type="text/javascript">

  139. $(document).ready(function() {
  141. //Execute the slideShow
  142. slideShow();

  144. });

  146. function slideShow() {

  148. //Set the opacity of all images to 0
  149. $('#gallery a').css({opacity: 0.0});
  151. //Get the first image and display it (set it to full opacity)
  152. $('#gallery a:first').css({opacity: 1.0});
  154. //Set the caption background to semi-transparent
  155. $('#gallery .caption').css({opacity: 0.7});

  157. //Resize the width of the caption according to the image width
  158. $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
  160. //Get the caption of the first image from REL attribute and display it
  161. $('#gallery .cont').html($('#gallery a:first').find('img').attr('rel'))
  162. .animate({opacity: 0.7}, 400);
  164. //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
  165. setInterval('gallery()',5000);
  167. }

  169. function gallery() {
  171. //if no IMGs have the show class, grab the first image
  172. var current = ($('#gallery a.show') ?  $('#gallery a.show') : $('#gallery a:first'));

  174. //Get next image, if it reached the end of the slideshow, rotate it back to the first image
  175. var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));
  177. //Get next image caption
  178. var caption = next.find('img').attr('rel');
  180. //Set the fade in effect for the next image, show class has higher z-index
  181. next.css({opacity: 0.0})
  182. .addClass('show')
  183. .animate({opacity: 1.0}, 1000);

  185. //Hide the current image
  186. current.animate({opacity: 0.0}, 1000)
  187. .removeClass('show');
  189. //Set the opacity to 0 and height to 1px
  190. $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });
  192. //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
  193. $('#gallery .caption').animate({opacity: 0.7},10 ).animate({height: '60px'},500 );
  195. //Display the cont
  196. $('#gallery .cont').html(caption);
  199. }

  201. </script>
  202. <style type="text/css">

  204. .clear {
  205. clear:both;
  206. }

  208. #gallery {
  209. position:relative;
  210. height:360px;
  211. }
  212. #gallery a {
  213. float:left;
  214. position:absolute;
  215. }
  217. #gallery a img {
  218. border:none;
  219. }
  221. #gallery a.show {
  222. z-index:500;
  223. }

  225. #gallery .caption {
  226. z-index:600; 
  227. background-color:#000; 
  228. color:#ffffff; 
  229. height:60px; 
  230. width:100%; 
  231. position:absolute;
  232. bottom:0;
  233. }

  235. #gallery .caption .cont {
  236. margin:5px;
  237. }
  239. #gallery .caption .cont h3 {
  240. margin:0;
  241. padding:0;
  242. color:#1DCCEF;
  243. }
  244. </style>
  245. <?php
  246. $con = mysql_connect("localhost","xxx","xxx");
  247. if (!$con)
  248.   {
  249.   die('Could not connect: ' . mysql_error());
  250.   }

  252. mysql_select_db("xxx", $con);
  253. $result = mysql_query("SELECT * FROM xxx");
  254. ?>
  255. <div id="gallery">
  256. <?php
  257. while ($row = mysql_fetch_array($result)) {
  258. ?>
  259. <a href="opis.php?nr=<?php echo $row['nr']; ?>" >
  260. <img src="admin/<?php echo $row['url_zdjecia'] ?>" alt="Zdjecie" width="580" height="360" title="" rel="Marka: <?php echo $row['marka']; ?> Model: <?php echo $row['model']; ?><br>Rok produkcji: <?php echo $row['rok_produkcji']; ?> Pojemnosc: <?php echo $row['silnik']; ?> <br>Cena: <?php echo number_format($row['cena'], 0, ',', ' ')." PLN"; ?>"/>
  261. </a>

  263. <?php
  265. }
  266. ?>
  267. <div class="caption"><div class="cont"></div></div>
  268. </div>