Cod galerie foto html

#1
serjnho

Posted 23 January 2012 - 17:01

Junior Member

Grup: Members
Posts: 31
Înscris: 14.05.2011

In primul rand,vreau sa precizez ca sunt la un nivel destul de jos privind limbajul HTML.Ceea ce doresc de fapt este sa stiu daca este posibil sa creez in html o galerie foto exact ca aici .Adica cu frame-uri,zoom si click in new tab,si un preview mai large.Va sunt recunoscator in caz afirmativ, :peacefingers:

Back to top

#2
gabi3xz

Posted 23 January 2012 - 17:10

Junior Member

Grup: Members
Posts: 175
Înscris: 21.12.2011

cea mai simpla galerie care am vazuto vreodata

default

img {
	height: 134px;
	width: 100px;
}

si are un hover adica cand duci cliku pe img se activeaza automat un cod css

img:hover {
	border: 4px ridge #74B7EB;
	height: 150px;
	margin-left: -50px;
	margin-top: -75px;
	position: absolute;
	width: 200px;
}

hover

Back to top

#3
serjnho

Posted 23 January 2012 - 21:32

Junior Member

Grup: Members
Posts: 31
Înscris: 14.05.2011

nu prea am inteles,unde pun calea spre imagine?Imi poti face un exemplu cu cateva poze"

Back to top

#4
gabi3xz

Posted 23 January 2012 - 22:25

Junior Member

Grup: Members
Posts: 175
Înscris: 21.12.2011

<html>
<head>
<style type="text/css">
img {
	height: 134px;
	width: 100px;  
}
img:hover {
	border: 4px ridge #74B7EB;
	height: 268px;
	position: absolute;
	width: 200px;
}
</style>
</head>
<body>
<img height="75" width="100" alt="Bucegi Babe" title="Bucegi Babe" src="http://www.muntii-bucegi.ro/img/Bucegi_Babe_thumb.jpg">
</body>
</html>

Back to top

#5
serjnho

Posted 24 January 2012 - 11:16

Junior Member

Grup: Members
Posts: 31
Înscris: 14.05.2011

mersi mult ,am reusit ceva insa imi poti spune ce sa mai modific ca atunci cand dau click pe ea sa se deschida intr'un tab nou la o marime mai mare?

Back to top

#6
serjnho

Posted 24 January 2012 - 13:12

Junior Member

Grup: Members
Posts: 31
Înscris: 14.05.2011

si inca ceva,cand mut mouse-ul pe prima poza de pe primul rand imi dispare ultima poza de pe primul rand,pana mut mouse'ul peste ea/

Back to top

#7
w3room

Posted 25 January 2012 - 02:10

Senior Member

Grup: Senior Members
Posts: 2,085
Înscris: 22.09.2010

Ia uite ce galerie �i-am f�cut din css. La click, ai target blank cu link-ul exact al imaginii.

 <html>
 <head>
 <style type="text/css">
 a	{display:inline-block; outline:none;}
 a	img.normal {width:100px; padding:3px; border:dashed 1px #000; 
margin:5px; background:silver;}
 a	span.absolute {display:none;}
 a:hover span.absolute{position:absolute; top:20%; width:90%; display:block; left:5%; height:0px;}
 a:hover span.absolute img{display:block; margin:auto; margin-top:5%; 
padding:3px; border:dashed 1px #000; background:silver;}
 </style>
 </head>
 <body>
 
 <a href="http://www.foreverways.com/wp-content/uploads/2011/06/apple-150x150.jpg" target="blank">
 <img class="normal" src="http://www.foreverways.com/wp-content/uploads/2011/06/apple-150x150.jpg">
 <span class="absolute"><img src="http://www.foreverways.com/wp-content/uploads/2011/06/apple-150x150.jpg"></span>
 </a>
 
 <a href="http://www.itcnews.info/wp-content/uploads/2010/12/apple-150x150.jpg" target="blank">
 <img class="normal" src="http://www.itcnews.info/wp-content/uploads/2010/12/apple-150x150.jpg">
 <span class="absolute"><img src="http://www.itcnews.info/wp-content/uploads/2010/12/apple-150x150.jpg"></span>
 </a>
 
 <a href="http://im1.shopmania.org/files/brands/apple.jpg" target="blank">
 <img class="normal" src="http://im1.shopmania.org/files/brands/apple.jpg">
 <span class="absolute"><img src="http://im1.shopmania.org/files/brands/apple.jpg"></span>
 </a>
 
 </body>
 </html>

PS : N-am probat �n ie. Nici nu m� stresez....

Edited by w3room, 25 January 2012 - 02:15.

Back to top

#8
serjnho

Posted 31 January 2012 - 17:25

Junior Member

Grup: Members
Posts: 31
Înscris: 14.05.2011

Vreau la primul cod sa introduci target="blank",sper sa ma ajuti

Back to top

Anunturi

Bun venit pe Forumul Softpedia!

Cod galerie foto html

#1 serjnho Posted 23 January 2012 - 17:01

#2 gabi3xz Posted 23 January 2012 - 17:10

#3 serjnho Posted 23 January 2012 - 21:32

#4 gabi3xz Posted 23 January 2012 - 22:25

#5 serjnho Posted 24 January 2012 - 11:16

#6 serjnho Posted 24 January 2012 - 13:12

#7 w3room Posted 25 January 2012 - 02:10

#8 serjnho Posted 31 January 2012 - 17:25

Anunturi

▶ 0 user(s) are reading this topic

Sign In

#1
serjnho

Posted 23 January 2012 - 17:01

#2
gabi3xz

Posted 23 January 2012 - 17:10

#3
serjnho

Posted 23 January 2012 - 21:32

#4
gabi3xz

Posted 23 January 2012 - 22:25

#5
serjnho

Posted 24 January 2012 - 11:16

#6
serjnho

Posted 24 January 2012 - 13:12

#7
w3room

Posted 25 January 2012 - 02:10

#8
serjnho

Posted 31 January 2012 - 17:25