Popup image βοηθεια...!!!!

Κώδικας, πληροφορίες, ερωτήσεις και απαντήσεις σχετικές με την JavaScript.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
neogeo21
Δημοσιεύσεις: 20
Εγγραφή: 08 Μαρ 2012 02:02

Popup image βοηθεια...!!!!

Δημοσίευση από neogeo21 » 08 Μαρ 2012 02:15

Έχω φτιάξει αυτό εδώ στο html
Tώρα θέλω τις εικόνες να τις βάλω κεντραρισμένες
συνολικά θα είναι 9 εικόνες στην σελίδα html oι οποίες θα ανοίγουν popup σαν αυτό το παράδειγμα εδώ www.dynamicdrive.com/dynamicindex4/thumbnail.htm αλλά θα είναι στο κεντρο τις σελίδας και όχι αριστερά χύμα. όποιος μπορεί να βοηθείσει...ευχαριστώ


Κώδικας: Επιλογή όλων

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http&#58;//www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS PopUp Demo</title>
<script type="text/javascript" src="csspopup.js"></script>
<style type="text/css">
<!--
body &#123;
	background-repeat&#58; repeat;
&#125;
.clear&#123;
	clear&#58;both;
&#125;
*&#123;
	outline&#58; none!important;
&#125;
button&#58;&#58;-moz-focus-inner &#123; border&#58; 0; &#125;

a&#58;link &#123;
	color&#58; #565969;
	text-decoration&#58; none;
&#125;
a&#58;visited &#123;
	color&#58; #565969;
	text-decoration&#58; none
&#125;
a&#58;hover &#123;
	color&#58; #FF9932;
	text-decoration&#58; underline
&#125;
a&#58;active &#123;
	color&#58; #FF9932;
	text-decoration&#58; none
&#125;
#blanket &#123;
   background-color&#58;#111;
   opacity&#58; 0.65;
   position&#58;absolute;
   z-index&#58; 9001; /*ooveeerrrr nine thoussaaaannnd*/
   top&#58;0px;
   left&#58;0px;
   width&#58;100%;
&#125;
#popUpDiv &#123;
	position&#58;absolute;
	background-color&#58;#eeeeee;
	width&#58;800px;
	height&#58;800px;
	z-index&#58; 9002; /*ooveeerrrr nine thoussaaaannnd*/
&#125;
-->
</style>
<!--&#91;if gte IE 5&#93;> <style type="text/css"> #blanket &#123;filter&#58;alpha&#40;opacity=65&#41;;&#125;</style><!&#91;endif&#93;-->
</head>
<body>
	<div id="blanket" style="display&#58;none;"></div>
<div id="popUpDiv" style="display&#58;none;">

		<a href="#" onclick="popup&#40;'popUpDiv'&#41;"><img src="../images/bigimage.jpg" width="800" height="800" /></a>
   </div>	
  <div id="content1">
  <div class="content1_inside">
  <a href="#" onclick="popup&#40;'popUpDiv'&#41;"><img src="../images/1.jpg" alt="Work 1" width="150" height="150" border="0" class="image fistimage" /></a>
  <a href="#" onclick="popup&#40;'popUpDiv'&#41;"><img src="../images/1.jpg" alt="Work 1" width="150" height="150" border="0" class="image" /></a>
</div>
</div>
  <a href="#" onclick="popup&#40;'popUpDiv'&#41;"><img src="../images/1.jpg" width="150" height="150" /></a></h1>
  <div id="blanket" style="display&#58;none;"></div>
<div id="popUpDiv" style="display&#58;none;">

		<a href="#" onclick="popup&#40;'popUpDiv'&#41;"><img src="../images/bigimage.jpg" width="800" height="800" /></a>
</div>
   <h1><a href="#" onclick="popup&#40;'popUpDiv'&#41;"><img src="../images/1.jpg" width="150" height="150" /></a></h1>

</body>
</html>
css

Κώδικας: Επιλογή όλων

@charset "utf-8";
#blanket &#123;
background-color&#58;#111;
opacity&#58; 0.65;
filter&#58;alpha&#40;opacity=65&#41;;
position&#58;absolute;
z-index&#58; 9001;
top&#58;0px;
left&#58;0px;
width&#58;100%;
&#125;
#popUpDiv &#123;
position&#58;absolute;
background-color&#58;#eeeeee;
width&#58;800px;
height&#58;800px;
z-index&#58; 9002;
&#125;
#content1 &#123;
float&#58;left;
background-image&#58;url&#40;main_random.gif&#41;;
width&#58; 938px;
height&#58; 133px;
padding-top&#58;40px;
padding-bottom&#58;10px;
line-height&#58;15px;
font-family&#58;Verdana, Arial, Helvetica, sans-serif;
font-size&#58;11px;
color&#58;#ffffff;
&#125;
.content1_inside&#123;
padding-top&#58;10px;
padding-left&#58;7px;
padding-right&#58;50px;
margin&#58;auto;
float&#58;left;
&#125;
.content1_inside p&#123;
	padding-left&#58;5px;
	margin-top&#58;0px;
	text-align&#58;left;
	color&#58; #2F2F2F;
	font-size&#58; 11px;
&#125;
και javascript

Κώδικας: Επιλογή όλων

function toggle&#40;div_id&#41; &#123;
	var el = document.getElementById&#40;div_id&#41;;
	if &#40; el.style.display == 'none' &#41; &#123;	el.style.display = 'block';&#125;
	else &#123;el.style.display = 'none';&#125;
&#125;
function blanket_size&#40;popUpDivVar&#41; &#123;
	if &#40;typeof window.innerWidth != 'undefined'&#41; &#123;
		viewportheight = window.innerHeight;
	&#125; else &#123;
		viewportheight = document.documentElement.clientHeight;
	&#125;
	if &#40;&#40;viewportheight > document.body.parentNode.scrollHeight&#41; && &#40;viewportheight > document.body.parentNode.clientHeight&#41;&#41; &#123;
		blanket_height = viewportheight;
	&#125; else &#123;
		if &#40;document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight&#41; &#123;
			blanket_height = document.body.parentNode.clientHeight;
		&#125; else &#123;
			blanket_height = document.body.parentNode.scrollHeight;
		&#125;
	&#125;
	var blanket = document.getElementById&#40;'blanket'&#41;;
	blanket.style.height = blanket_height + 'px';
	var popUpDiv = document.getElementById&#40;popUpDivVar&#41;;
	popUpDiv_height=blanket_height/2-400;//400 is half popup's height
	popUpDiv.style.top = popUpDiv_height + 'px';
&#125;
function window_pos&#40;popUpDivVar&#41; &#123;
	if &#40;typeof window.innerWidth != 'undefined'&#41; &#123;
		viewportwidth = window.innerHeight;
	&#125; else &#123;
		viewportwidth = document.documentElement.clientHeight;
	&#125;
	if &#40;&#40;viewportwidth > document.body.parentNode.scrollWidth&#41; && &#40;viewportwidth > document.body.parentNode.clientWidth&#41;&#41; &#123;
		window_width = viewportwidth;
	&#125; else &#123;
		if &#40;document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth&#41; &#123;
			window_width = document.body.parentNode.clientWidth;
		&#125; else &#123;
			window_width = document.body.parentNode.scrollWidth;
		&#125;
	&#125;
	var popUpDiv = document.getElementById&#40;popUpDivVar&#41;;
	window_width=window_width/2-400;//400 is half popup's width
	popUpDiv.style.left = window_width + 'px';
&#125;
function popup&#40;windowname&#41; &#123;
	blanket_size&#40;windowname&#41;;
	window_pos&#40;windowname&#41;;
	toggle&#40;'blanket'&#41;;
	toggle&#40;windowname&#41;;		
&#125;
[/img][/list]

alou
Script Master
Δημοσιεύσεις: 1374
Εγγραφή: 24 Αύγ 2007 19:52
Επικοινωνία:

Popup image βοηθεια...!!!!

Δημοσίευση από alou » 08 Μαρ 2012 13:09

'Oταν λες στο κέντρο της σελίδας και όχι αριστερά χύμα δεν είμαι σίγουρος τι έχεις στο μυαλό σου.

Πάντως, αν θες το κάθε set από thumbnail να είναι μόνο του στη μέση της σελίδας, στο css βρες το #content1, αφαίρεσε το float:left; πρόσθεσε margin:auto; και λογικά θα σου δώσει αυτό το αποτέλεσμα.

Όταν λέω set από thumbnail εννοώ ότι εικόνες έχεις μέσα στο div id="content1".

Αν θες το κάθε thumbnail να είναι στη μέση μόνο του, θα αφαιρέσεις το float:left και από το .content1_inside και θα προσθέσεις .content1_inside img {display:block;margin:auto;} στο css σου, πιθανώς κάτι να μην έχω προσέξει βέβαια οπότε κάνεις ένα πείραμα και βλέπεις.

Απάντηση

Επιστροφή στο “JavaScript και Frameworks”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες