<div class="entry_tabs entry_tabs_side"> <div class="container"> <div class="active" id="announcement-photos"> <?php if ( ! empty($images)): ?> <div class="slider-gallery"> <div class="big-photo"> <?php if ( ! empty($images)): ?> <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']) ?>"> <span></span> <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"> </a> <?php endif ?> </div> <div class="nav"> <a class="prev browse left"></a> <div class="slider"> <div class="items"> <?php foreach ($images as $i): ?> <div class="image-wrapper"> <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']) ?>"> <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) ?>" /> </a> </div> <?php endforeach ?> </div> </div> <a class="next browse right"></a> </div> </div> <div class="clearfix"></div> <?php else: ?> <img src="<?php echo url::site('/media/img/no_photo.jpg') ?>" alt="" class="no-photo" /> <?php endif ?> </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 :
gallery : function() { jQuery("div.slider-gallery div.items a").click(function(e) { e.preventDefault(); var $anchor = jQuery(this); var $image = $anchor.find('img'); if ($image.hasClass("active")) { return; } var url = $image.attr("src").replace("_al", "_asb"); var $wrap = jQuery("div.slider-gallery div.big-photo");//.fadeTo("medium", 0.5); var img = new Image(); img.onload = function() { //$wrap.fadeTo("fast", 1); $wrap.find("img").attr("src", url); }; img.src = url; var $a; $a = $wrap.find("a"); $a.attr("href", url.replace("_asb", "_ab")); // activate item jQuery("div.slider-gallery div.items img").removeClass("active"); $image.addClass("active"); // when page loads simulate a "click" on the first image }).filter(":first").click(); jQuery("a.photo_big").live('click', function() { var images_list = []; jQuery("div.slider-gallery div.items a.slide_photo").each(function() { images_list.push(this.href); }); var photo_index = jQuery("div.slider-gallery div.items img.active").parent().prevAll().length; jQuery.fancybox(images_list, { 'padding' : 0, 'transitionIn' : 'none', 'transitionOut' : 'none', 'type' : 'image', 'changeFade' : 0, 'index' : photo_index }); return false; }); },
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