problem z drobnymi zmianami fancyboxa. Opcje

[dominick]

Mam taki kod:

[XML] pobierz, plaintext 
<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>
[XML] pobierz, plaintext 

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 :

[XML] pobierz, plaintext 
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;
            });
        },
[XML] pobierz, plaintext 

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

Ten post edytował dominick 23.10.2014, 20:32:33