Przyciemnienie slidera na wybranych obrazach

[kesher]

Witam,

 

na swoim sklepie ps.allday.pl mam problem z sliderem, slider jest rozciągniety na całą szerokość strony.

 

Chciałbym aby "srodkowy" slajd był kolorowy, a 2 zewnętrzne przyciemnione.

Przyciemnienie jest nałożone za pomocą klasy filter: gray, -webkit-filter: grayscale(100%); taką klasę zawiera każdy slajd w znaczniku IMG.

 

Jednak co zrobić aby obraz był kolorowy kiedy najedzie na "środek strony" ?

 

[kesher]

Rozmyslam nad wprowadzeniem slidera o klasie "pager-active". Jednak nie wiem jak się za to zabrać.

[vekia]

ja bym zrobił to za pomocą js

 

onSlideAfter

Executes immediately after each slide transition. Function argument is the current slide element (when transition completes).

default: function(){}
options: function($slideElement, oldIndex, newIndex){ // your code here }
arguments:
$slideElement: jQuery element of the destination element
oldIndex: element index of the previous slide (before the transition)
newIndex: element index of the destination slide (after the transition)

[kesher]

w którym miejscu/ jak połączyć to z obecnym sliderem (moduł homeslider)

[vekia]

dodaj kod:

            onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
                $('#homeslider li').removeClass('active');
                $('#homeslider li').eq(currentSlideHtmlObject+1).addClass('active') 
            }

do homeslider.js wfunkcji definiującej slider

tj kod powinien wyglądać tak:

	if (!!$.prototype.bxSlider)
		$('#homeslider').bxSlider({
			useCSS: false,
			maxSlides: 1,
			slideWidth: homeslider_width,
			infiniteLoop: homeslider_loop,
			hideControlOnEnd: true,
			pager: false,
			autoHover: true,
			auto: homeslider_loop,
			speed: homeslider_speed,
			pause: homeslider_pause,
			controls: true,
            onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
                $('#homeslider li').removeClass('active');
                $('#homeslider li').eq(currentSlideHtmlObject+1).addClass('active') 
            }
		});

(/themes/default-bootstrap/js/modules/homeslider/js/homeslier.js)

 

wtedy aktualny slajd będzie miał klasę active

 

tj <li class="active">

 

wtedy już będzie z górki

[kesher]

Presta 1.5

i kod homeslider.js wygląda na ten moment tak:

 

$(function(){


if (typeof(homeslider_speed) == 'undefined')
homeslider_speed = 500;
if (typeof(homeslider_pause) == 'undefined')
homeslider_pause = 3000;
if (typeof(homeslider_loop) == 'undefined')
homeslider_loop = true;


$('#homeslider').bxSlider({
infiniteLoop: homeslider_loop,
hideControlOnEnd: true,
pager: false,
autoHover: true,
auto: homeslider_loop,
speed: homeslider_speed,
pause: homeslider_pause,
controls: true,


});
});

 

 

 

dodając pomiędzy controls true a nawiasem kod:

 

onSlideBefore: function (currentSlideNumber, totalSlideQty, currentSlideHtmlObject) {
                $('#homeslider li').removeClass('active');
                $('#homeslider li').eq(currentSlideHtmlObject+1).addClass('active') 
            }

nie wyświetla się aktywna klasa.

Standardowo od samego początku mam przy tagu LI mam już klasę PAGER

[vekia]

otwórz plik: http://bxslider.com/lib/jquery.bxslider.js o skopiuj jego zawartość do:

 

/modules/homeslider/js/jquery.bxSlider.min.js

 

stara wersja slidera nie obsługuje tych funkcji, niestety

[kesher]

Wszystko już działa jak należy, po modyfikacjach w plikach homeslider.js oraz jquery.bxslidermin.js

i edycji stylu css samego modułu

działa wyśmienicie.

Wielkie dzięki Vekia