script galerie

[microbu]

Care are vreun script de galerie in genul asta:

View image: print copy

Si cand dau click pe una din poze sa se mareasca, intr-un pop-up..

Foloseam genu asta lightbox, dar e fix.. dc il pozitionez in respectivul div am nr fix de poze.. asa cu un script de galerie pot sa dau stanga, dreapta, depinde de cate poze are..

Ms

[GarryOne]

Lightbox nu e fix, tu nu stii sa-l setezi, folosesti. Mai poti incerca fancybox.

[microbu]

lightbox-u nu are sageti dreapta stanga.. ai 5 poze, 5 iti raman in galerie.

[GarryOne]

Si asta ce-i? Chiar pe site-ul oficial, in exemple.

[zombynebunu]

The #1 Javascript Pop Up / Lightbox - Get TopUp! - Examples sau aici Rounding Up the Top 10 jQuery Lightbox Scripts

[microbu]

garry, tu te-ai uitat la printul meu inainte sa imi dai exemplu de scriptul de care am mentionat si eu si stiu cu ce se mananca?

imi trebuie sageti inainte sa se mareasca fiecare poza in parte.. ai inteles? apoi cand e marita poza normal ca am dreapta stanga

[GarryOne]

HTML

<script type="text/javascript" src="func.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<div class="back" id="prev" onclick="slide_left()">PREVIOUS</div>
<div id="cadru">
	<div class="slide"><img src="imagini/img1.jpg" /></div>         
	<div class="slide"><img src="imagini/img1.jpg" /></div>          
	<div class="slide"><img src="imagini/img1.jpg" /></div>          
	<div class="slide"><img src="imagini/img1.jpg" /></div>          
	<div class="slide"><img src="imagini/img1.jpg" /></div>          
	<div class="slide"><img src="imagini/img1.jpg" /></div>          
	<div class="slide"><img src="imagini/img1.jpg" /></div>          
	<div class="slide"><img src="imagini/img1.jpg" /></div>           
</div>
<div class="forward" onclick="slide_right()">NEXT</div>
<script type="text/javascript">start_slide();</script>

Javascript, presupunand ca ai inclus jquery

var slide, width_div, left, width_cadru, curent = 0, nr, viteza = 500, timer, delay = 5000, start_slides = 0;
/*
 * delay -> la ce interval ( in milisecunde ) sa se schimbe automat slide-urile
 * viteza -> cat timp ( in milisecunde ) sa dureze o animatie
 */
function start_slide() {
	slide = $('#cadru .slide');
	width_div = parseInt($('#cadru .slide').css('width'));
	left = parseInt($('#cadru').css('left'));
	width_cadru = parseInt($('#cadru').css('width'));
	nr = width_cadru/width_div - 1;
	for(var i = 0; i < slide.length; i++) {
		$(slide[i]).css({
			left: i * width_div + 'px'
		});
	}
	if(start_slides == 0) {
		timer = setInterval("slide_right()",delay);
		$('#cadru').mouseover(function(){
			clearInterval(timer);
		}).mouseout(function(){
			timer = setInterval("slide_right()",delay);
		});
	}
}

function slide_right(){
	curent++;
	var urm = (curent + nr > slide.length - 1) ? curent + nr - slide.length : curent + nr;
	if(curent > slide.length - 1)
		curent = 0;
	$(slide[urm]).css({
		left: width_cadru + 'px'
	});
	$(slide).animate({
		left: '-=' + width_div + 'px'
	},viteza);
}

function slide_left() {
	curent--;
	if(curent < 0)
		curent = slide.length - 1;
	$(slide[curent]).css({
		left: -width_div + 'px'
	});
	$(slide).animate({
		left: '+=' + width_div + 'px'
	},viteza);
}

CSS

#cadru {
	width: 500px;
	background: silver;
	overflow: hidden;
	height: 100px;
	width: 500px;
	position: relative;
}

#cadru .slide {
	padding: 5px;
	float: left;
	position: absolute;
}

#cadru .slide img {
	width: 90px;
	height: 90px;
}

Edited June 2, 2013 by GarryOne

[microbu]

asa.. da`mi si mie pagina de unde l-ai luat, ms

[GarryOne]

Ti-am trimis PM, e de pe un site facut de mine.

[microbu]

am primit, ms mult