Pereiti prie turinio

Reikia informacijos

BrO

Sukūrė BrO
Programuotojų kampas

 Dalintis Sekėjai 1

Rekomenduojami pranešimai

BrO

BrO 10

Atrašyta
  • Autorius
Atrašyta

Sveiki, aciu uz atsakymus.

 

Ziurejau pamokas ir pasirasiau lightbox script, viskas veikia, taciau jeigu noriu kad butu kelios nuotraukos visoms tureciau rasyti is naujo viska.

 

<html>

<head>

<title>bandymas</title>

<script type='text/javascript' src='js/jquery.js'></script>

<style type="text/css">

.backdrop {

position:absolute;

top:0px;

left:0px;

width:100%;

height:100%;

background:#000;

opacity: .0;

filter:alpha(opacity=0);

z-index:50;

display:none;

 

}

 

.box {

position:absolute;

top: 5%;

left: 5%;

right: 5%;

width: 800px;

height: 500px;

background:#ffffff;

z-index:51;

padding:10px;

display:none;

background-image: url('1123.jpg');

margin-left: auto;

margin-right: auto;

}

 

.close {

float:right;

margin-right:5px;

cursor:pinter;

}

 

</style>

 

<script type="text/javascript">

 

$(document).ready(function() {

$('.lightbox').click(function(){

$('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');

$('.box').animate({'opacity':'1.00'}, 300, 'linear');

$('.backdrop, .box').css('display', 'block');

});

$('.close').click (function(){

$('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear' , function(){

$('.backdrop, .box').css('display', 'none');

});

 

});

$('.backdrop').click (function(){

$('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear' , function(){

$('.backdrop, .box').css('display', 'none');

});

 

});

 

});

</script>

</head>

<body>

<a href="#" class="lightbox"><img src="112.jpg"/></a>

<div class="backdrop"></div>

<div class="box"> <div class="close">x</div>Bandymas</div>

<script type='text/javascript' src='js/js.js'></script>

</body>

</html>

 

Stai toki koda pasirasiau. Poto viska integravus normaliai gaunasi tik su viena nuotrauka. Niekaip nesugalvoju kaip idet kitas. Gal kas galite pasakyti ar darau klaidu ir kaip issprest problema. ACIU

Nuoroda į pranešimą
Dalintis kituose puslapiuose
BrO

BrO 10

Atrašyta
  • Autorius
Atrašyta

Sveiki dar kartą. Taigi niekaip nesugalvoju kaip man reikia pakeist kodą, kad idėjus dar vieną nuotrauką nereiktu viso kodo is naujo rasyti.

 

Mano kodas

 

<html>
<head>
	<title>bandymas</title>
	<script type='text/javascript' src='js/jquery.js'></script>
	<style type="text/css">
		.backdrop {
			position:absolute;
			top:0px;
			left:0px;
			width:100%;
			height:100%;
			background:#000;
			opacity: .0;
			filter:alpha(opacity=0);
			z-index:50;
			display:none;

		}

		.box {
			position:absolute;
			top: 5%;
			left: 5%;
			right: 5%;
			width: 800px;
			height: 500px;
			background:#ffffff;
			z-index:51;
			padding:10px;
			display:none;
			background-image: url('1123.jpg');
			margin-left: auto;
			margin-right: auto;
		}

		.close {
			float:right;
			margin-right:5px;
			cursor:pinter;
		}

	</style>

	<script type="text/javascript">

		$(document).ready(function() {
			$('.lightbox').click(function(){
				$('.backdrop, .box').animate({'opacity':'.50'}, 300, 'linear');
				$('.box').animate({'opacity':'1.00'}, 300, 'linear');
				$('.backdrop, .box').css('display', 'block');
			});
			$('.close').click (function(){
				$('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear' , function(){
					$('.backdrop, .box').css('display', 'none');
				});

				});
		$('.backdrop').click (function(){
				$('.backdrop, .box').animate({'opacity':'0'}, 300, 'linear' , function(){
					$('.backdrop, .box').css('display', 'none');
				});

			});

		});
	</script>
	</head>
<body>
<a href="#" class="lightbox"><img src="112.jpg"/></a>
<div class="backdrop"></div>
<div class="box"> <div class="close">x</div>Bandymas <img src="112.jpg"/></div>
<script type='text/javascript' src='js/js.js'></script>
</body>
</html>

 

Kiek aš žiuriu man gaunasi, kad idejus antra nuotrauką, jai priskyrus lightbox klase paspaudus rodytu ne ta nuotrauką ant kurios paspaudziau o ta, kuri nurodyta div su klase box. Ką aš darau ne taip ir gal yra kokia nors komanda, kad nuotrauką talpinti į tam tikrus remus, paspaudus rodytu kita dydi. Niekaip nesugalvoju, gal galit kas pagelbeti.

Nuoroda į pranešimą
Dalintis kituose puslapiuose

Prisijunkite prie diskusijos

Jūs galite rašyti dabar, o registruotis vėliau. Jeigu turite paskyrą, prisijunkite dabar, kad rašytumėte iš savo paskyros.

Svečias
Parašykite atsakymą...

×   Įdėta kaip raiškusis tekstas.   Atkurti formatavimą

  Only 75 emoji are allowed.

×   Nuorodos turinys įdėtas automatiškai.   Rodyti kaip įprastą nuorodą

×   Jūsų anksčiau įrašytas turinys buvo atkurtas.   Išvalyti redaktorių

×   You cannot paste images directly. Upload or insert images from URL.

Įkraunama...
×
 Dalintis
Sekėjai 1
Eiti į temų sąrašą

  • Dabar naršo   0 narių

    Nei vienas registruotas narys šiuo metu nežiūri šio puslapio.

  • Prisijunk prie bendruomenės dabar!

    Uždarbis.lt nariai domisi verslo, IT ir asmeninio tobulėjimo temomis, kartu sprendžia problemas, dalinasi žiniomis ir idėjomis, sutinka būsimus verslo partnerius ir dalyvauja gyvuose susitikimuose.

    Užsiregistruok dabar ir galėsi:

    ✔️ Dalyvauti diskusijose;

    ✔️ Kurti naujas temas;

    ✔️ Rašyti atsakymus;

    ✔️ Vertinti kitų žmonių pranešimus;

    ✔️ Susisiekti su bet kuriuo nariu asmeniškai;

    ✔️ Naudotis tamsia dizaino versija;

    ir dar daugiau.

    Registracija trunka ~30 sek. ir yra visiškai nemokama.

  • Naujausios temos

  • Karštos temos

×
×
  • Pasirinkite naujai kuriamo turinio tipą...