Jump to content

Przyciemnienie slidera na wybranych obrazach


Recommended Posts

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" ?

 

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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 ;)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More