popup via ID

    Guten Tag,

    ich habe begrenzte html Kenntnisse und nur eine einfache Frage:

    Wie kann ich aus folgendem Link(ein Bild) beim Draufklicken das gleiche Bild in groß als Popup-Fenster öffnen?

    <a href="https://www.wallpaper-gratis.eu/sport/fussball/werderbremen001_1024x768.jpg"><img src="images/3.jpg" id="item-3" width="200" height="150" /></a>

    ich korrigiere: es klappt. Soweit danke. Nun meine zweite Frage: wie kann ich ein Bild dafür nutzen, d.h. dass er ein Bild-Popup öffnet?

    Auf der Domain gibt es 30 Bilder in kleiner Ansicht. Und wenn man mit der Maus draus ist muss sich ein Popup öffnen, ohne dass man klickt. Da es verschiedene Bilder sind, sind es auch verschiedene Quellen.

    das wahren auch nur beispiele.

    Ich glaube das es für dein vorhaben auch was fertiges gibt. Falls nicht muss man was suchen was sich dann leicht anpassen läßt.


    Was soll dein Script den Können.?

    Du brauchst das Karussel ,und mit einen klick auf den Bildern werden die groß angezeigt ? Das reicht ?


    Muss es genau das Karussel sein was du schon hast ,oder würde auch ein ähnliches reichen ?

    Wenn es ein anderes Carousel ist dann ist die waterwheelCarousel .js umbrauchbar weil das eigentlich zur den Script gehöhrt .An besten tust du mal googeln unter Carousel mit f Fancybox Javascript. Vieleicht findest du da was das alles kann.

    also deine erstes courusell und die eine Fancybox kriege ich nicht so schnell zusammen da stört sich irgendwas gegenseitig.

    Ich probiere jetzt noch die hier von dir und wenn das auch nicht schnell geht dann kucke ich morgen mal genauer nach weil jetzt keine Zeit für langes spielen.


    Ich bin mir aber auch fast sicher das es sowas auch schn fertig geben tut . Auch aus 2 Scripte eins machen ist kein problem solange nicht die gleichen ids und soweiter benutzt werden

    Also: http://interface.eyecon.ro/demos/carousel.html#

    Theoretisch wäre das ja optimal. Nur hier ist das Problem, wenn ich die Seite runterlade(Strg+S), und dann wiederum die html. Datei bearbeite unter div id="carousel", und dort meine eigenen Pfade eingebe klappt es nicht, Warum? Wo muss noch was geändert werden?

    <a href="http://interface.eyecon.ro/demos/images/imagebox/bw1.jpg" title="Moon eclipse" rel="imagebox" style="top: 33.0941px; left: 545.462px; width: 96px; height: 54px; z-index: 78;"><img src="./Carousel demo - Interface plugin for jQuery_files/th_bw1.jpg" width="100%"></a>

    dann bei href UND img src einen eigenen Pfad. Soweit klappt es. Nur nach dem ich auf das Bild klickte und sich ein Popup öffnete, kommen wieder die alten Bilder zurück, nicht die von mir geänderten!

    Dazu müsste ich mir das mal genauer ankucken von dir .

    Ich bin gerade dabei die beiden Scripte von gestern zusammen zupacken.

    * Link entfernt, weil existiert nicht mehr *

    Wenn ich jetzt noch das Drehen mit den hover Effekt reinbekomme dann ist es gut.

    Wenn man bei dem ein Bild groß klickt und wieder klein macht, geht es da weiter wo es aufgehört hat.

    Unter den Namen wie man es brauch . Verstehe die Frage nicht.

    Aber hier

    * Link entfernt , weil existiert nicht mehr *


    Das sollte jetzt das können wie du es haben wolltest. Das gute daran ist das ich es jetzt auch behalte, weil sowas hatte ich in der art auch gesucht.

    Das klappt super. danke.

    Nun noch 2 Fragen:

    Auf meiner Website ist u.a. noch ein Formular per HTML drin. Wenn ich dieses ebenfalls einem anderen Objekt zuweise, wie ich es bereits mit dem Carousel machte, dann klappt es nicht mehr. Man sieht nur sechs Bilder. Warum?

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Anmeldung</title>

    <meta name="generator" content="DA-Formmaker 4.3.1">

    <!--TEMPLATE:4.2-->

    <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">

    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

    <script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>


    <script>

    $(function() {

    <!-- JSCAL -->

    });

    </script>


    <style type="text/css">

    body { background-color:#ffffff;}

    h1 { color:#2196f3; font-family:Segoe UI,Arial,sans-serif; font-size:24pt; }

    p { color:#000000; font-family:Segoe UI,Arial,sans-serif; font-size:12pt; }



    /* Landscape phones and down */

    @media (max-width: 480px) {

    .mainContainer {

    width: 100%;

    }

    }


    @media (min-width: 768px) {

    .mainContainer {

    width: 80%;

    margin-left: auto; margin-right: auto;

    }

    }


    .internal { display: none; }


    <!-- BUTTONSTYLESHEET -->


    </style>


    <script type="text/javascript">

    function addHiddenField(formID, name, value)

    {

    var input = document.createElement("input");

    input.setAttribute("type", "hidden");

    input.setAttribute(name, "name_you_want");

    input.setAttribute(value, "value_you_want");

    document.getElementById(formID).appendChild(input);

    }


    function GetCookie(cookie_name)

    {

    if (document.cookie.length>0)

    {

    cookie_start=document.cookie.indexOf(cookie_name + "=");

    if (cookie_start!=-1)

    {

    cookie_start=cookie_start + cookie_name.length+1;

    cookie_end=document.cookie.indexOf(";",cookie_start);

    if (cookie_end==-1) cookie_end=document.cookie.length;

    return unescape(document.cookie.substring(cookie_start,cookie_end));

    }

    }

    return "";

    }


    function str_replace(search, replace, subject) {

    return subject.split(search).join(replace);

    }

    </script>



    <!-- DAFORMJSBEGIN -->


    <script type="text/javascript">

    /* <![CDATA[ */

    function refreshCaptcha()

    {

    var now = new Date();

    if (document.images) {

    document.images.captchaimg.src = 'https://www.ekiwi-scripts.de/form/v4/formmail_v4.php?action=captcha&id=600629&now=' + now.getTime();

    }

    }

    /* ]]> */

    </script>



    <script type="text/javascript">


    function SetCookieValues()

    {


    }


    function SetCookies()

    {


    }


    </script>


    <script type="text/javascript">

    function chkFormular()

    {

    if(document.DAFORM.Name.value.trim() == "") {

    alert("Bitte einen Wert in das Feld Name eingeben!");

    document.DAFORM.Name.focus();

    return false;

    }


    if(document.DAFORM.Mail.value.trim() == "") {

    alert("Bitte einen Wert in das Feld @mail Adresse eingeben!");

    document.DAFORM.Mail.focus();

    return false;

    }


    if(document.DAFORM.Anzahl.value.trim() == "") {

    alert("Bitte einen Wert in das Feld Anzahl an Teilnehmern eingeben!");

    document.DAFORM.Anzahl.focus();

    return false;

    }



    document.forms["DAFORM"].submit();

    return(true);

    }

    </script>



    </head>

    <body onLoad="SetCookieValues();">


    <div class="w3-card-12 w3-white mainContainer">

    <div class="w3-container w3-sand">

    <!-- FORMTITLE_BEGIN -->

    <h1>Anmeldung</h1>

    </div>

    <!-- FORMTITLE_END -->



    <form class="w3-container" action="https://www.ekiwi-scripts.de/form/v4/formmail_v4.php" method="POST" name="DAFORM" onSubmit="SetCookies();return chkFormular();" enctype="multipart/form-data" target="_self">

    <input type="hidden" name="formid" value="600629">

    <input type="hidden" name="settings" value="Y2Vicmtxdntkcg==">

    <input type="hidden" name="redirect" value="https://www.ekiwi.de/form/danke.htm">

    <input type="hidden" name="subject" value="Anmeldung">

    <input type="hidden" name="admin" value="fTlzeHJlfnlwV3N4cmV+eXA5fnljcmV5dmN+eHl2ew==">

    <input type="hidden" name="admin1" value="">

    <input type="hidden" name="admin2" value="">

    <input type="hidden" name="typemail" value="html">

    <input type="hidden" name="crypt" value="1">

    <input type="hidden" name="einleittext" value="">

    <input type="hidden" name="copyfields" value="-1">

    <input type="hidden" name="copyip" value="-1">

    <input type="hidden" name="hide_empty_fields" value="0">

    <input type="hidden" name="settings_encoding" value="utf-8">

    <input type="hidden" name="ReturnToSender" value="0">



    <p>

    <label>Name</label>

    <input class="w3-input w3-white" type="text" name="Name" id="Name" value="" maxLength="100">

    </p>


    <p>

    <label>@mail Adresse</label>

    <input class="w3-input w3-white" type="text" name="Mail" id="Mail" value="" maxLength="100">

    </p>


    <p>

    <label>Anzahl an Teilnehmern</label>

    <input class="w3-input w3-white" type="text" name="Anzahl" id="Anzahl" value="" maxLength="100">

    </p>




    <p>

    <input class="w3-check" type="checkbox" value="x" name="Teilnahme" id="Teilnahme" <label>Trauung</label>

    <p class="w3-opacity">Trauung</p>

    </p>


    <p>

    <input class="w3-check" type="checkbox" value="x" name="Hochzeit" id="Hochzeit" <label>Feierlichkeit</label>

    <p class="w3-opacity">Feierlichkeit</p>

    </p>


    <p>

    <label>Bemerkung</label>

    <textarea class="w3-input w3-white" type="text" style="resize:none" name="Bemerkung" id="Bemerkung" value="" rows="4"></textarea></p>



    <label>Spam-Schutz</label>

    <div class="w3-row">

    <div class="w3-col l6">

    <input type="text" name="captcha_input" class="w3-input w3-white" id="captcha_input" placeholder="">

    </div>

    <div class="w3-col l6">

    <div class="w3-padding-8">

    &nbsp;

    <img src="https://www.ekiwi-scripts.de/form/v4/formmail_v4.php?action=captcha&amp;id=600629" border="1" alt="captcha" name="captchaimg">

    <a href="javascript:refreshCaptcha();"><img src="https://www.ekiwi-scripts.de/form/v4/refresh.png" border="0"></a>

    </div>

    </div>

    </div>


    <p class="textend"></p>

    <hr/>


    <p>

    <button type="submit" class="w3-btn w3-blue-grey">Absenden</button>

    <button type="reset" class="w3-btn w3-red">Zurücksetzen</button>

    <!-- PRINTBUTTON -->

    </p>

    </form>


    </div>

    <script type="text/javascript">


    refreshCaptcha();


    </script>

    </body>

    </html>


    2. Frage: Wie kann ich mehrere Reihen übereinander machen? Was muss umbenannt werden(Carousel1, Carousel2, ...) und was nicht?

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden