• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

In Fancybox Code einfügen

K

kevin123287

Neues Mitglied
Hallo,
ich möchte gerne das in einer Fancybox ein Login angezeigt wird. Ich habe es jetzt so gemacht das in der Fancybox ein IFrame eingefügt wurde. Jedoch ist das ein Problem wenn nach dem Login weitergeleitet werden soll, auf z.B. protected.php. dann wirds nämlich in der fancybox angezeigt. wie kann ich das ändern?
Hier der Code der HTML Seite.
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" media="all" type="text/css" href="css/menu.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome - VirtualBreitlingJetTeam</title>
    <script>
        !window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
    </script>
    <script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
    <script type="text/javascript">
        $(document).ready(function() {
            /*
            *   Examples - various
            */
            $("#various3").fancybox({
                'width'                : '40%',
                'height'            : '45%',
                'autoScale'            : false,
                'transitionIn'        : 'none',
                'transitionOut'        : 'none',
                'type'                : 'iframe'
            });
        });
    </script>
</head>
<body background="http://www.html.de/images/background.png">
<center>
<!--Header-->
<div id="header">
<img class="logo" src="http://www.html.de/images/logo.png" width="245" height="135" />
<img src="http://www.html.de/images/headertitle.png" width="422" height="40" class="headertitle" />
</div>
<!--Ende Header-->
<!--Menu-->
<div class="navigation-inline" id="menu">
                                             <div class="invertedshiftdown2">
                    <ul>
                            <li class="current"><a href="#" title="Home">Home</a></li>
                            <li><a href="#" title="The Team">The Team</a></li>
                            <li><a href="#" title="Airplane">Airplane</a></li>
                            <li><a href="#" title="Media">Media</a></li>

                            <li><a href="#" title="Forum">Forum<br /></a></li>
                            <li><a href="#" title="Application">Application<br /></a></li>
                            <li><a id="various3" href="main.php">Login</a></li>
                        </ul>
                       </div>
                    </div>
<!--Ende Menu-->
<div class="weis">
</div>
<div class="sry">
<img src="http://www.html.de/images/sry2.png" />
</div>
<div class="weis2">
</div>
<a id="tip5" title="Login" href="#login_form"></a>
<br />
<div class="copyright">
<p>© 2010 | VirtualBreitlingJetTeam </p>
</div>
</center>
</body>
</body>
</html>
Und hier der Inhalt der main.php (also des Inhaltes des Frames)
PHP: 
<?
include("include/session.php");
?>
<html>
<title>Login</title>
<body>
<?
if($session->logged_in){
    echo'<meta http-equiv="refresh" content="0; URL=protected.php">'; 
}
else{
?>

<img src="login.png" width=100px height:50px />
<form action="process.php" method="POST">
<table align="left" border="0" cellspacing="0" cellpadding="3">
<tr><td>Username:</td><td><input type="text" name="user" maxlength="30" value="<? echo $form->value("user"); ?>"></td><td><? echo $form->error("user"); ?></td></tr>
<tr><td>Password:</td><td><input type="password" name="pass" maxlength="30" value="<? echo $form->value("pass"); ?>"></td><td><? echo $form->error("pass"); ?></td></tr>
<tr><td colspan="2" align="left"><input type="checkbox" name="remember" <? if($form->value("remember") != ""){ echo "checked"; } ?>>
<font size="2">Remember me next time &nbsp;&nbsp;&nbsp;&nbsp;
<input type="hidden" name="sublogin" value="1">
<input type="submit" value="Login"></td></tr>
<tr><td colspan="2" align="left"><br><font size="2">[<a href="forgotpass.php">Forgot Password?</a>]</font></td><td align="right"></td></tr>
</table>
</form>

<?
}

include("include/view_active.php");

?>

</body>
</html>
Ich hoffe mal ihr könnt mir Helfen!
Danke an euch!
 
Zuletzt bearbeitet:
Anstelle eines iFrames solltest du die Seite mittels AJAX anfordern, wie auch sie es auf der Homepage von Fancybox in various3 getan haben:
HTML: 
<!-- Ausschnitt des Source Codes -->
<script type="text/javascript">
<!--
// ...
	$("#various3").fancybox({
		ajax : {
		    type	: "POST",
		    data	: 'mydata=test'
		}
	});
// ...
//-->
</script>
Also anstelle einer type-Eigenschaft baust du eine ajax-Eigenschaft ein. Die Fancybox wird dann deinen Login anfordern und den HTML-Code einfügen. Somit gelten Links, Formulare, etc. für die aktuelle Seite.
Sollten noch Probleme aufkommen werde ich mich gerne auch weiterhin damit auseinander setzen. Ich habe bisher nicht mit einer Lightbox oder Abwandlung dessen gearbeitet.
 
danke dir jedoch wird jetz der login teil nicht in der fancybox angeizegt, sondern wenn man auf den loginbutton klickt, kommt ein neuer tab/fenster in dem der loginteil angezeigt wird (also die datei main.php)

//EDIT:
Es funktioniert jetzt Perfekt! Danke dir
 
Zuletzt bearbeitet:
Tut mir Leid, das geht eigentlich schon fast an die Grenzen meiner Fähigkeiten, da ich Fancybox nicht kenne und damit auch nicht arbeite. Der Quellcode ist für mich hoch kompliziert. Wenn du dir den mal angesehen hast, weißt du, was ich meine... ;) Ich habe mal an einem Tag versucht mich etwas in den jQuery-Source einzuarbeiten. Aber Tatsache ist, dass ich zwar sehe, dass Beispielsweise
Code: 
var test = jQuery.prototype = function( ) {};
geht, aber nicht verstehe, wieso
Code: 
jQuery.prototype.test = function( ) {};
nicht funktioniert. Mir fehlt da also auch noch einiges an Wissen. Um diesem Problem entgegen zu arbeiten bastle ich an einer eigenen kleinen Library, die mir hilft die Funktionsweise von JavaScript zu verstehen.
Ich hoffe es findet sich jemand anderes, der dir da mehr helfen kann, als ich... :)

Mit freundlichen Grüßen,


DarkDragon1993
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben