✔ Eigenes JS für popup fenster

F

fredolin

Erfahrenes Mitglied
Hallo JS Gemeinde,

ich habe vor einiger Zeit mir ein eigenes popup script geschrieben, was ein flying window auf der webseite erzeugt.

nun möchte ich aber,, das ich in diesem window, wenn ich ne bildgalerie habe, hin und her mir die bilder anschauen kann. also das ein vor und zurück button ein zu bauen.

hier mal der code vom js:
PHP: 
<script type="text/javascript">
		function flyWin(name, picname, pictext) {		
		var popup = document.getElementById("flyWind");
		
		popup.style.position			=	"absolute";
		popup.style.marginTop			=	"0px";
		popup.style.marginLeft			=	"0px";
		popup.style.marginRight			=	"0px";
		popup.style.width				=	"100%";
		popup.style.height				=	"1080px";
		
		var popup_pic					=	name;
		var headline 					= 	"Nina Sky Picture Gallery";
		var pic_text					=	picname;
		var pictext						=	pictext;
		
		popup.innerHTML = new String();
		popup.innerHTML = "<div id=\"newBox\" class=\"flyBox\"><div class=\"flyBox_innen\"><div class=\"flyBox_work\"><div class=\"flyBox_close\"><div class=\"flyHeadbox\"><h1 class=\"h1_headlines\">"+headline+"</h1></div><div class=\"but_close\" onclick=\"javascript:hidePopup();\"></div></div><div class=\"clear\"></div><div class=\"flyBox_img\" align=\"center\"><img src="+popup_pic+" /></div><div class=\"clear\"></div><div class=\"flyBox_close\"><div class=\"flyInfobox\">"+pic_text+"</div><div class=\"flyInfobox\">"+pictext+"</div></div></div></div></div>";
		
		var sbar = document.getElementById("newBox");
		sbar.style.marginTop		=	"0px";
		sbar.style.marginLeft		=	"0px";
		sbar.style.width			=	"100%";
		sbar.style.height			=	"100%";
		popup.style.visibility		=	"visible";
	}
	
	function hidePopup(){
 		var popup_close = document.getElementById("flyWind");
 		popup_close.style.visibility = "hidden";
	}
	
	
	
	
	
	
</script>

und hier der code aus meiner seite, wie ich das script aufrufe/ausführe
PHP: 
<?php
$home = array (
			'headline'	=> 	'Nina Sky Picture Gallery ',
		);
$imgpfad_bigs = 'img/pic/gal/big/';		
$imgpfad_thumbs = 'img/pic/gal/thumbs/';
$picwidth = '175';
$picheight = '225';
$pictext = 'A design website over Nina Sky';
//echo getcwd().$imgpfad;

$mydir_thb = $imgpfad_thumbs;
$verz_thb = dir($mydir_thb);
while($entry=$verz_thb->read()){
	if($entry != "." && $entry != ".."){
		$dateiname_thb[] = $entry;
	}
}
$verz_thb->close();
rsort($dateiname_thb);

$i=0;

while(list($key, $val_thb) = each($dateiname_thb)){
	if(substr($val_thb, -4) == '.png'){
		$now_thb[$i] = $val_thb;
		$listpic[] = '<div class="listpic"><img src="'.$imgpfad_thumbs.$val_thb.'" width="'.$picwidth.'" height="'.$picheight.'" alt="'.$pictext.'" title="'.$pictext.'" border="0" /></div>';
		$i++;
	}
}


$mydir_big = $imgpfad_bigs;
$verz_big = dir($mydir_big);
while($entry=$verz_big->read()){
	if($entry != "." && $entry != ".."){
		$dateiname_big[] = $entry;
	}
}
$verz_big->close();
rsort($dateiname_big);

$i=0;

while(list($key, $val_big) = each($dateiname_big)){
	if(substr($val_big, -4) == '.jpg'){
		$now_big[$i] = $val_big;
		$listpic_big[] = '<img src="'.$imgpfad_bigs.$val_big.'" alt="'.$pictext.'" title="'.$pictext.'" border="0" />';
		$i++;
	}
}
rsort($listpic);
sort($listpic_big);



echo '<div class="textbox">
		<div class="cols_100 padding_1515"><h1 class="h1_headlines">'.$home['headline'].'</h1></div>
		<div class="clear"></div>
		<div id="galerie" class="cols_100">
			<div class="cols_33"><a href="javascript:flyWin(\''.$imgpfad_bigs.$now_big['0'].'\', \''.$now_big[0].'\', \''.$pictext.'\')">'.$listpic['0'].'</a></div>
			<div class="cols_33"><a href="javascript:flyWin(\''.$imgpfad_bigs.$now_big['1'].'\', \''.$now_big[1].'\')">'.$listpic['1'].'</a></div>
			<div class="cols_33"><a href="javascript:flyWin(\''.$imgpfad_bigs.$now_big['2'].'\', \''.$now_big[2].'\')">'.$listpic['2'].'</a></div>
			<div class="clear"></div>
			<div class="cols_33"><a href="javascript:flyWin(\''.$imgpfad_bigs.$now_big['3'].'\', \''.$now_big[3].'\')">'.$listpic['3'].'</a></div>
			<div class="cols_33"><a href="javascript:flyWin(\''.$imgpfad_bigs.$now_big['4'].'\', \''.$now_big[4].'\')">'.$listpic['4'].'</a></div>
			<div class="cols_33"><a href="javascript:flyWin(\''.$imgpfad_bigs.$now_big['5'].'\', \''.$now_big[5].'\')">'.$listpic['5'].'</a></div>
			<div class="clear"></div>
			<div class="cols_33"><a href="javascript:flyWin(\''.$imgpfad_bigs.$now_big['6'].'\', \''.$now_big[6].'\')">'.$listpic['6'].'</a></div>
			<div class="cols_33"><a href="javascript:flyWin(\''.$imgpfad_bigs.$now_big['7'].'\', \''.$now_big[7].'\')">'.$listpic['7'].'</a></div>
			<div class="cols_33"><a href="javascript:flyWin(\''.$imgpfad_bigs.$now_big['8'].'\', \''.$now_big[8].'\')">'.$listpic['8'].'</a></div>
			<div class="clear"></div>
		</div>
		<div class="clear"></div>
	</div>
	';

?>

ihr könnt euch die funktion auf der seite anscheuen unter: http://http://reference.webslay.de/ninasky/?act=gal

so wenn mir da einer helfen könnte, wie ich da das weiter und zurück in diesem fenster einsetzen kann wäre es super toll.

bedanke mich im vorraus für eure hilfe

gruß
fredolin
 
Hallo Spicelab,

danke dir für deine Antwort und werde damit mal rumspielen und schauen ob das gut funktioniert.

Danke

Gruß
Fredolin
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück