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

 

Link to comment
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)
Link to comment
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 ;)

Link to comment
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
Link to comment
Share on other sites

×
×
  • Create New...