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 ?

  • 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!

  • 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?