Mam taki kod:
  1. <div class="entry_tabs entry_tabs_side">
  2.  
  3.  
  4.  
  5. <div class="container">
  6.  
  7. <div class="active" id="announcement-photos">
  8. <?php if ( ! empty($images)): ?>
  9. <div class="slider-gallery">
  10. <div class="big-photo">
  11.  
  12. <?php if ( ! empty($images)): ?>
  13. <a class="photo_big" title="<?php echo Security::xss_clean($announcement->annoucement_title) ?>" href="<?php echo img::path('announcements', 'announcement_big', $images[0]['image_id'], $images[0]['image']) ?>">
  14. <span></span>
  15. <img src="<?php echo img::path('announcements', 'announcement_show_big', $images[0]['image_id'], $images[0]['image']) ?>" alt="<?php echo HTML::chars($announcement->annoucement_title) ?>" border="0" itemprop="image">
  16. </a>
  17.  
  18. <?php endif ?>
  19. </div>
  20. <div class="nav">
  21. <a class="prev browse left"></a>
  22. <div class="slider">
  23. <div class="items">
  24. <?php foreach ($images as $i): ?>
  25.  
  26. <div class="image-wrapper">
  27. <a class="slide_photo inner" title="<?php echo Security::xss_clean($announcement->annoucement_title) ?>" href="<?php echo img::path('announcements', 'announcement_big', $i['image_id'], $i['image']) ?>">
  28. <img src="<?php echo img::path('announcements', 'announcement_list', $i['image_id'], $i['image']) ?>" data-showbig="<?php echo img::path('announcements', 'announcement_show_big', $i['image_id'], $i['image']) ?>" alt="<?php echo HTML::chars($announcement->annoucement_title) ?>" />
  29. </a>
  30. </div>
  31. <?php endforeach ?>
  32. </div>
  33. </div>
  34. <a class="next browse right"></a>
  35. </div>
  36. </div>
  37.  
  38. <div class="clearfix"></div>
  39. <?php else: ?>
  40. <img src="<?php echo url::site('/media/img/no_photo.jpg') ?>" alt="" class="no-photo" />
  41. <?php endif ?>
  42.  
  43. </div>


Czyli w krótkim opisie:
- u góry duże zdjęcie
-pod nim kilka mniejszych po kliknięciu na które to wielkie zamienia się w to kliknięte.
-po kliknięciu na duże tło się ściemnia a zdjęcie jest wielkie.

odpowiada za to kod :

  1. gallery : function() {
  2.  
  3.  
  4.  
  5. jQuery("div.slider-gallery div.items a").click(function(e) {
  6. e.preventDefault();
  7.  
  8. var $anchor = jQuery(this);
  9. var $image = $anchor.find('img');
  10.  
  11. if ($image.hasClass("active")) { return; }
  12.  
  13. var url = $image.attr("src").replace("_al", "_asb");
  14. var $wrap = jQuery("div.slider-gallery div.big-photo");//.fadeTo("medium", 0.5);
  15.  
  16. var img = new Image();
  17. img.onload = function() {
  18. //$wrap.fadeTo("fast", 1);
  19. $wrap.find("img").attr("src", url);
  20. };
  21.  
  22. img.src = url;
  23.  
  24. var $a;
  25. $a = $wrap.find("a");
  26. $a.attr("href", url.replace("_asb", "_ab"));
  27.  
  28. // activate item
  29. jQuery("div.slider-gallery div.items img").removeClass("active");
  30. $image.addClass("active");
  31.  
  32. // when page loads simulate a "click" on the first image
  33. }).filter(":first").click();
  34.  
  35. jQuery("a.photo_big").live('click', function() {
  36. var images_list = [];
  37.  
  38. jQuery("div.slider-gallery div.items a.slide_photo").each(function() {
  39. images_list.push(this.href);
  40. });
  41.  
  42. var photo_index = jQuery("div.slider-gallery div.items img.active").parent().prevAll().length;
  43.  
  44. jQuery.fancybox(images_list, {
  45. 'padding' : 0,
  46. 'transitionIn' : 'none',
  47. 'transitionOut' : 'none',
  48. 'type' : 'image',
  49. 'changeFade' : 0,
  50. 'index' : photo_index
  51. });
  52.  
  53. return false;
  54. });
  55. },


problem:
-jak zrobić aby po kliknięciu w z każde zdjęcie tło się ściemniło a na środku było kliknięte zdjęcie.
bardziej precyzyjnie chodzi mi o to aby po kliknięciu każdego zdjęcia działo się to samo co z głównym zdjęciem.
bo w tej chwili zajmuje jego miejsce i dopiero po powtórnym kliknięciu włącza się fancybox.

znam html.css i podstawy php ale z jquery mam problem. proszę o pomoc