Slider w stronie CMS?

[szczemat]

Cześć!

Od niedawna używam presty i mam problem z ogarnięciem paru funkcji. Mianowicie chciałbym wstawić cośna zasadzie slidera z miniaturkami na stronie CMS. Znalazłem darmowy projekt, który odpowiada moim potrzebom w postaci: http://thecodeplayer.com/walkthrough/css3-image-slider-with-stylized-thumbnails

 

Zedytowałem odpowiednio global.css, skopiowałem kod w pole wpisywania treści CMS. Galeria się wyświetla, ale nie działa przewijanie zdjęć. Nie wiem w czym jest problem.

 

Używam extended rich text editor dla presty.

 

Będę ogromnie wdzięczny za jakąkolwiek pomoc :-).

 

Pozdrawiam

szczemat

 

[vekia]

podaj link do sklepu i pokaż co umieszczone zostało w stylach css i w tresci strony cms

[szczemat]

Sklep jest w fazie testowej. 

Adres do tej podstrony: http://test2.iform.com.pl/sklep/content/114-probny-art

 

Fragment CSS:

.slider{
	width: 640px; 
	position: relative;

	padding-top: 320px; 
	
	margin: 100px auto;
	

	box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.75);
}



.slider>img{
	position: absolute;
	left: 0; top: 0;
	transition: all 0.5s;
}

.slider input[name='slide_switch'] {
	display: none;
}

.slider label {

	margin: 18px 0 0 18px;
	border: 3px solid #999;
	
	float: left;
	cursor: pointer;
	transition: all 0.5s;
	

	opacity: 0.6;
}

.slider label img{
	display: block;
}


.slider input[name='slide_switch']:checked+label {
	border-color: #666;
	opacity: 1;
}

.slider input[name='slide_switch'] ~ img {
	opacity: 0;
	transform: scale(1.1);
}

.slider input[name='slide_switch']:checked+label+img {
	opacity: 1;
	transform: scale(1);
}

Kod HTML:

<div class="slider">
	<input type="radio" name="slide_switch" id="id1"/>
	<label for="id1">
		<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg" width="100"/>
	</label>
	<img src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/>
	
	<!--Lets show the second image by default on page load-->
	<input type="radio" name="slide_switch" id="id2" checked="checked"/>
	<label for="id2">
		<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg" width="100"/>
	</label>
	<img src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/>
	
	<input type="radio" name="slide_switch" id="id3"/>
	<label for="id3">
		<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg" width="100"/>
	</label>
	<img src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/>
	
	<input type="radio" name="slide_switch" id="id4"/>
	<label for="id4">
		<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg" width="100"/>
	</label>
	<img src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/>
	
	<input type="radio" name="slide_switch" id="id5"/>
	<label for="id5">
		<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg" width="100"/>
	</label>
	<img src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/>
</div>
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>

Edited September 19, 2014 by szczemat (see edit history)

[vekia]

wyłącz chwiliwo CCC dla CSS w preferences > performance

[szczemat]

wyłącz chwiliwo CCC dla CSS w preferences > performance

Zrobione.

[vekia]

Twój kod się trochę różni od kodu który jest zasugerowany do wykorzystania

np elementy input są w <div>

być może to jest problemem?

[szczemat]

No właśnie problem w tym, że kod jest skopiowany litera w literę ze śródła w odpowiednie pole edytora presty (source code). Po zapisaniu presta sama zmienia jego treść w dziwny sposób...

 

Ogólnie po odświeżeniu strony skrypt działa przez 2 sekundy (moment ładowania strony), a potem przestaje działać. Ten kod skopiowany i uruchomiony poza prestą działa w normalny sposób, stąd moje pytanie do użytkowników tego forum.

 

Istnieje jakiś moduł do wyświetlania sliderów w stronach CMS?

[vekia]

nie ma modułów które by wyswietlały slider wewnątrz stron cms bo nie ma tam po prostu hooka.

możesz spórbować wkleić ten kod slidera do pliku cms.tpl ? (wyłącznie w celach testowych)