Bilder-Galerie

  • Hallo "Jungs" und "Mädels",
    ich habe folgendes Problem und würde mich über Hilfe sehr freuen:


    Ich möchte eine Tabelle öfters auf einer Seite benutzen. Ich ich bin Anfänger und habe jetzt viele Tutorials gelesen, angeschaut, nachgebaut, aber jetzt bin ich Ratlos und verwirrt (zu viel Informationen) :D Hier mein Code 1 den ich nachgebaut habe: (dieser funktioniert aber nur 1 x pro Seite, er muss aber öfters verwender werden können, bzw der läd alle thumpnails in ein das gleiche gallerie fenster bzw mainImage :( bilder id ändern reicht nicht)


    Ich schicke euch zwei Codes - es reicht wenn ihr einen davon benutzt und mit Helft (klar, beide wären spannender, wieso es nicht geht, aber einer reicht)


    Hilfe bei Code 1 : Multiple Anwendung - so, das ich es öfters benutzen kann oder,
    Hilfe bei Code 2: Blderwechsel von Mouseover? zu Mausklick "links".


    Würde mich sehr freuen! Vielen Dank :) p.s. wenn ich schonmal bei profis bin, ist scriply ein guter editor? habe den genommen weil er oft bei tutorials in youtube benutzt wird.


    CODE 1 (hier geht keine Multianwendung)



    und hier Code 2: (hier ändert es die bilder mit mausover, aber ich brauche es mit mausklick links:



  • Ich bin einfach mal so frech und sage nur was zu dem Editor... :D


    Würde mich sehr freuen! Vielen Dank p.s. wenn ich schonmal bei profis bin, ist scriply ein guter editor? habe den genommen weil er oft bei tutorials in youtube benutzt wird.


    Scriptly ist besonders für Anfänger doch sehr geeignet. Wenn man dann aber tiefer ins Webdesign bzw. in die Webentwicklung einsteigt, tauchen dann aber die ersten Nachteile auf. So unterstützt Scriptly z.B. nicht komplett HTML5 und CSS3, was ein bisschen nervig ist, weil z.B. der Tag <header> dann als Fehler markiert wird. Insgesamt kann man aber damit leben und ich benutze ihn zumindest für HTML und CSS immer noch. Für PHP, JS und Co nutze ich mittlerweile Sublime Text 2 bzw. manchmal auch Notepad++, weil diese mir dann dafür wiederum besser gefallen.


    Sprich: Solange du noch ein Anfänger bist und dich noch nicht so ausführlich mit dem ganzen Zeug beschäftigt hast, reicht der Scriptly definitiv aus. Danach ist es dann Geschmackssache, ob man wechselt oder eben nicht.

  • Allerdings spricht auch nix dagegen einfach von anfang an SublimeText zu benutzen (kostet was, testversion verfällt aber nie!)


    &was genau möchtest du mit den Scripts erreichen?
    Ein mouseover Effekt -> anderes Bild?


    Wenn du eine Gallerie haben möchtest... dann nimm doch einfach eine Fertige (z.B. http://galleria.io/).. Wenn du unbedingt eine selber bauen willst, viel Spaß, aber dafür musst du dich eindeutig besser mit JS auskennen..!

  • Danke für die Antworten, hier mal genauer angaben und eine demo: (ich werde euren vorschlag mit dem editor probieren, denke es ist gut wenn man direkt mit einem anfängt den man auch für alles benutzen kann bzw die vorlagentexte eben für die modernen sachen hat) danke. :)




    (komischerweise geht der link bzw bilder nur, wenn man es ohne www.
    eingibt, aber ist ja nur demo auf nem kostenlosen server, muss mir erst
    noch webspace kaufen)




    nunja, hier der code dazu:




    [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" xml:lang="de" lang="de">




    <head>


    <title>Titel</title>




    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />


    <meta name="description" content="" />


    <meta name="author" content="" />


    <meta name="keywords" content="" />


    <meta name="generator" content="Webocton - Scriptly (http://www.scriptly.de)" />




    <link href="style.css" type="text/css" rel="stylesheet" />


    </head>




    <body>




    <div id="1">


    <style type="text/css">


    .imgStyle


    {


    width:141px;


    height:65px;


    border:1px solid white;


    }


    </style>


    <img id="mainImage" style="border:1px solid white"


    src="Bilder/Gallerie/00_1.jpg" height="240px" width="435px"/>


    <div id="divId" onclick="changeImageOnClick(event)">


    <BR><img class="imgStyle" src="Bilder/Gallerie/00_1.jpg">


    <img class="imgStyle" src="Bilder/Gallerie/00_2.jpg">


    <img class="imgStyle" src="Bilder/Gallerie/00_3.jpg">






    <script type="text/javascript">


    var images = document.getElementById("divId")


    .getElementsByTagName("img");


    for (var i = 0; i < images.length; i++)


    {


    images.onmouseover = function ()


    {


    this.style.cursor = 'hand';


    this.style.borderColor = 'red';


    }


    images[i].onmouseout = function ()


    {


    this.style.cursor = 'pointer';


    this.style.borderColor = 'white';


    }


    }




    function changeImageOnClick(event)


    {


    event = event || window.event;


    var targetElement = event.target || event.srcElement;


    if (targetElement.tagName == "IMG")


    {


    mainImage.src = targetElement.getAttribute("src");


    }


    }


    </script>


    </div>


    </div>












    </body>


    </html>[/HTML]




    +diese gallerie kann ich aber nur einmal pro seite benutzen, möchte sie
    aber paar mal einsetzen. wenn ich das aber mache, laden alle thumpnails
    in ein und das selbe mainimage [Blockierte Grafik: http://www.forum-hilfe.de/images/smilies/icon_sad.gif]




    - - - Aktualisiert - - -


    diese könnte ich öfters pro seite benutzen, aber es ändert die bilder
    mit mausover, es soll aber erst mit mausklick links ändern:




    [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" xml:lang="de" lang="de">




    <head>


    <title>Titel</title>




    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />


    <meta name="description" content="" />


    <meta name="author" content="" />


    <meta name="keywords" content="" />


    <meta name="generator" content="Webocton - Scriptly (http://www.scriptly.de)" />






    <script type="text/javascript" src="jquery-1.11.3.js"></script>






    <style type="text/css">


    .gallery {width: 435px; margin: 0px;}


    .gallery ul {width:435px; padding-left: 0px;}


    .gallery li {display: inline; margin-right:0px;}


    </style>




    </head>




    <body>






    <script type="text/JavaScript">


    $(document).ready(function() {


    var galleryClass = '.gallery';


    $(galleryClass+' li img').hover(function(){


    var $gallery = $(this).parents(galleryClass);


    $('.main-img',$gallery).attr('src',$(this).attr('src').replace('thumb/', ''));


    });


    var imgSwap = [];


    $(galleryClass+' li img').each(function(){


    imgUrl = this.src.replace('thumb/', '');


    imgSwap.push(imgUrl);


    });


    $(imgSwap).preload();


    });


    $.fn.preload = function() {


    this.each(function(){


    $('<img/>')[0].src = this;


    });


    }


    </script>


    </head>


    <body>


    <div class="wrap">




    <div class="gallery">


    <img width="435" height="200" src="Bilder/Gallerie/00_1.jpg" alt="" class="main-img" />




    <ul>


    <li><img width="142" height="65" src="Bilder/Gallerie/00_1.jpg" alt="" /></li>


    <li><img width="142" height="65" src="Bilder/Gallerie/00_2.jpg" alt="" /></li>


    <li><img width="142" height="65" src="Bilder/Gallerie/00_3.jpg" alt="" /></li>


    </ul>




    </div>














    </body>


    </html>[/HTML][/i]

  • ah ja, gerade die antwort gesehen, danke :) hover ist also "mausover" :) wieder was gelernt :)


    google ich direkt mal - mal sehen ob ich das dann so schaffe.
    jquery ist schon anständig oder? bin ja neu, habee aber gelesen, der vorteil es läuft überall auch ohne aktuellen flashplayer ect, richtig?


    p.s. EDIT:


    ist ja klasse, musste nur hover zu click ändern. cool, danke! :- ) also rein für lernzwecke, wieso geht denn die eine gallerie nur einmal pro seite? ich habe jetzt das was ich brauche und will, aber wie gesagt, will es ja lernen und verstehen ^^

  • Zitat: " wieso geht denn die eine gallerie nur einmal pro seite?"
    Der Grund ist, dass dieser Code globale Variablen verwendet und sich pauschal auf alle img-Tags bezieht, ein häufiges Problem bei älteren Skripts:

    Code
    var images = document.getElementById("divId");
    document.getElementsByTagName("img");

    Eine schlechte Lösung wäre, die Variablen zu vervielfachen und ihnen und den IDs eindeutige Namen zu geben:

    Code
    // 1st gallery
    var images1 = document.getElementById("divId1");
    // 2nd gallery
    var images2 = document.getElementById("divId2");


    Um die zugehörigen Bilder zu ermitteln, müsste man dann die Kind-Elemente der Container ermitteln. Wie gesagt, eine sehr schlechte Lösung.


    Eine bessere Lösung besteht darin, alle Variablen in einer Funktion zu kapseln und alle HTML-Elemente in einem Container unterzubringen und dessen Selektor an die Funktion zu übergeben:

    Code
    function mygallery(sel) {
    	var bigimg = <img class="bigimg">;
    	$(sel + " img").on("click", function() {
        	$(sel + ".bigimg").attr("src", $(this).attr("src"));
    	});
    	$(sel).prepend(bigimg);
    }

    Dann für die verschiedenen Galerien diese Funktion mit dem betr. Selektor aufrufen:

    Code
    mygallery("#gallery1");
    mygallery("#gallery2");

    Ungetestet, ich wollte nur mal die ungefähre Vorgehensweise skizzieren.
    BTW: Es gibt viele gute, fertige Galerie-Skripts, so dass es sich nicht lohnt, so etwas selber zu schreiben, es sei denn, man nimmt es als Übungsaufgabe, um Javascript/jQuery zu lernen. Z. B. dieses:
    http://galleria.io/

  • Vielen Dank an beide! Habe jetzt verstanden wieso es nicht geht.
    Werde das mal in Ruhe trainieren und meld mich für Hilfe :P Denke es schadet nicht, wenn man kleine Sachen selber bauen kann, um dann größere, fertige besser editieren und anpassen zu können.

  • Häh?
    Klar gibt es genaug plugins, aber wenn er wirklich immer nur die Drei bilder hat und Lust sich damit zu beschäftigen ein eigenes kleines Plugin zu schreiben?
    Der Link ist auch eher für Rantanplan gedacht ;)

  • Jetzt habe ich mal eine andere Frage unter uns! :)


    Also ich lese und versuche grade viel über bzw mit adaptive und responsive webdesign.
    jetzt habe ich eine frage dazu, ich google seit stunden, aber irgendwie werde ich nicht schlauer....


    gibt es einen unterschied zwischen apaptive und responsive bezüglich der stylesheeld erkennung (fenstergröße)?
    ich habe jetzt zum versuchen was ganz simples gemacht (ab 321 pixel geht (soll) er aus der smartphone ansicht raus wechseln zur nächsten größe (später tablate usw). p.s. ich möchte ein adaptive design mal bauen zum testen. also:


    Code
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" /> 
    
    
    
    
    <link rel="stylesheet" media="(min-device-width: 320px)" type="text/css" href="stylesheet_klein.css" />
    <link rel="stylesheet" media="(min-width: 321px)" type="text/css" href="stylesheet.mittel.css" />


    1. wenn ich jetzt den browser am desktop pc groß und klein schiebe, ändert er das stylscheet wie gewünscht.
    2. auf dem smartphone mit 320px (iphone) wird die seite zentriert und mit allem sichtbar angezeigt. gut.
    3. PROBLEM sobald das display größer ist als 320px wird mein stylescheed "mittel" geladen.... jetzt ist dieses ja nicht exact auf das gerät angepasst.... das hat zur folge, die webseite wird abgeschnitten angezeigt. ohne den meta tag wird die seite auf dem handy ja automatisch so gezoomt, dass alles sichtbar ist. mit der meta angabe zoomt er aber nicht mehr die ganze seite aus, sondern zeigt nur einen gewissen teil der seite an.... :( ohne den meta tag erkennt er aber keine smartphones... da geht die styleänderung nur im browserfenster am pc..


    ist diese methode nur für responsive geeignet?
    bin ich auf einem falschen Weg wenn ich adeptive webdesign testen will?
    oder kann ich wo einstellen, dass er die seite im vollen umfang anpassen soll auf dem mobile display, wie er es ohne die angaben im meta auch macht.... initial-scale=1.0 ist ja der 1:1 zoom, aber wie gesagt, geht nur bei exacten werten....


    ich möchte am ende ein adeptiv design in 3 stufen... klein, mittel, groß. klein soll alle smartphone abdecken bzw. eben sagen wir 350 pixel benutzen. wenn ein gerät aber 360 pixel hat, soll es das sheelt mittel sagen wir einfach 550 pixel benutzen. jedoch so wie ich es habe, zentriert er den zoom so nicht... er zeigt die seite an und schneidet die seiten einfach ab bzw aktiviert den horizontalen scrollbalken.... die seite soll aber, wie ohne meta angabe, immer die seite 100 prozent anzeigen und automatisch die größe anpassen mit dem zoom.


    ich hoffe ihr versteht mich ein wenig und ich hoffe ihr habt lust mir kurz weiter zu helfen. danke :)

  • Hallo


    du hast das Problem dem Papierdenken mit seinen festen Größen verhaftet zu sein. Damit kannst du keine aktuellen Webseiten erstellen.


    Zitat

    ich möchte am ende ein adeptiv design in 3 stufen


    Wie eine Seite angezeigt wird hängt vom Inhalt ab, nicht von der Bildschirm-/Fenstergröße der Hardware. Deshalb ist das Responsive Webdesign für die Besucher besser geeignet als das Adaptive.


    Zumal die verschiedenen Geräte heutzutage überhaupt nicht mehr auch nur ansatzweise erkannt werden können. Der Übergang von Smartphones zu Tablets zu Desktop ist heutzutage fließend geworden. Smartphones haben teilweise mehr Pixel als Destops.


    Welches auch nur halbwegs aktuelle Smartphone hat heutzutage noch eine Pixelbreite von 320 oder 480px? Die Zeiten sind schon lange vorbei.


    Gruss


    MrMurphy

  • Ihr seid super! Schade dass ich euch kein Bier ausgeben kann hier! :) Habt ihr einen Youtube-Channel mit Tutorials?


    Jetzt habe ich direkt eine Frage zu deinem Tutorial, es wird zwar etwas "heller" zu dem Thema, aber noch verwirrtheit an manchen Stellen.
    Wa ist der Unterschied vom Einbinden:


    Dies kann man z.B. auch so erreichen:

    Code
    <head>
        <link rel="stylesheet" type="text/css" media="all and (min-width: 1024px)" href="css/desktop.css" />
    </head>


    GIbt es nachteile wenn ich den Stylesheet so einbinde bzw der Unterschied im Vergleich zu so:


    Code
    @media screen and (min-width: 1024p){
    /* Styles für alle Browserfenster die breiter als 1024px sind */
    }


    Die erste Einbindung ist für mich klar, läd eben ein externes Stylesheelt je nach Fenster.
    Wie sieht es mit dem zweiten aus? Die @media screen...


    Ich glaube (aber deswegen Frage ich) dass es so ist: Ich speicher nur einen Stylesheelt ab und deviniere in dieser Datei alle einelnen auflösungen.




    Habe ich das richtig verstanden? Also mit der ersten Lösung kann ich für jede Auflösung ein Stylesheelt machen und mit der zweiten, kommen alle in eine CSS Datei? Wenn es richtig ist, kann ich zwecks Übersicht auch eine CSS Datei Laden zwischen den @media screen? Also Stylesheet zu Stylesheet?:


    Code
    @media screen and (max-width: 765px){
    <link rel="stylesheet" type="text/css" href="style765.css" />
     }


    Device-width ist nur für Mobile Geräte, richtig? Also device-widht 300px ist was anderes als nur widht 300px?


    Wie macht man es denn im Adeptive-Design? Ich habe gelesen, man kann dort statisch arbeiten, was eben der "Vorteil" dabei ist.
    Wenn ich jetzt 3 statische Designs bzw Sheelts habe, dann wird bei manchen Geräten eben die Anzeige abgeschnitten.
    Beispiel: Wenn ich ein Stylesheelt für ein iPhone mache wird es beim iPhone perfekt angezeigt. Wenn ein Handy aber etwas größer ist, und dann z.b. mein sheelt für tablete geladen wird, wird die Seiten der Webseite abgeschnitten und ein Scrollbalken kommt. Wie setzt man denn im Statischen Design die Medias ein? Ohne Medias bzw dem Meta wird eine Seite ja automatisch auf den Zoom gebracht um die ganze Seite anzuzeigen. Mit der Meta Angabe geht es nicht mehr, da er es 1:1 anzeigt. Da muss es doch auch eine Angabe geben, um eben die Seite 100% breite anzeigt nicht 1:1 (
    initial-scale=1.0) Würde eben gerne beides verstehen... Respsonsive mit Prozent ist klar, habe ich schon probiert, durch die prozente wird die Seite auf allen Geräten zentriert ohne abgeschnittene Kanten. Aber Adeptive weis ich nicht weiter. hm... normal sollte es doch so sein, dass es eben jedes stylesheelt erkennt und läd, aber eben dann die ansicht so zoomt, dass alles angezeigt wird, nicht 1:1 also anzeige 100%. es müsste laut "plan" ja eigentlich so sein, dass im iphone (optimiert) natürich 1:1 anzeigt. wenn ein handy größer ist, läd es eben tablete format aber zoomt die seite so, dass man alles sieht. mediamarkt.de ist ja adeptive - aber da wird nie was abgeschnitten sondern immer 100% seite gezeigt, egal wo.... kann ich das im meta tag nicht angeben? oder wie mache ich es im adeptive? (alles zwischen den optimierungen darf nicht 1:1 sondern 100% angezeigt werden, sonst kommen scrollbalken) aber ich muss beim adeptive doch nicht mit % arbeiten, da ich doch statisch bauen darf dort... hmmm)


    könnt ihr ein fahchbuch von a-z empfehlen?

  • Hallo


    Zitat

    GIbt es nachteile wenn ich den Stylesheet so einbinde bzw der Unterschied im Vergleich zu so:


    Technisch ist das vollkommen egal.


    Zitat

    Ich glaube (aber deswegen Frage ich) dass es so ist: Ich speicher nur einen Stylesheelt ab und deviniere in dieser Datei alle einelnen auflösungen.


    Fast richtig. Du kannst trotzdem mehrere Stylesheets abspeichern. Allerdings dann nicht um die Angaben für das Responsive Design zu unterteilen.


    Zitat

    Also mit der ersten Lösung kann ich für jede Auflösung ein Stylesheelt machen


    Falsch, Du musst für jede Auflösung ein Stylesheet machen. Dadurch geht die Übersicht aber ganz schnell verloren und deshalb hat sich das auch als praxisfremd nicht durchgesetzt.


    Zitat

    Wenn ich jetzt 3 statische Designs bzw Sheelts habe, dann wird bei manchen Geräten eben die Anzeige abgeschnitten.


    Wie schon geschrieben: Das ist der Knackpunkt, warum du (zur Zeit jedenfalls) keine sinnvollen responsive Webseiten erstellen kannst. Die erforderlichen Media Queries hängen vom Inhalt der Seite ab. Deshalb kann es je nach Seite sein, das keine, eine, zwei drei, vier, fünf oder noch mehr Media Queries erforderlich sind.


    Deine Festlegung auf drei ist Unsinnig.


    Zitat

    Wenn ich ein Stylesheelt für ein iPhone mache wird es beim iPhone perfekt angezeigt. Wenn ein Handy aber etwas größer ist, und dann z.b. mein sheelt für tablete geladen wird, wird die Seiten der Webseite abgeschnitten und ein Scrollbalken kommt.


    Richtig. Genau deshalb werden Media Queries nicht für Endgeräte erstellt sondern abhängig vom Inhalt der Webseite.


    Deine restlichen Ausführungen sind für mich nicht nachvollziehbar. Die richtige Antwort lautet trotzdem: Adaptives Design ist inzwischen veraltet.


    Gruss


    MrMurphy

  • EIn Ansatz ist, die Seite zu stylen, auf browser größe.. Dann ziehst du dein Fenster kleiner, solange bis irgendwas sche*ße aussieht. Dann schreibst du genau so viel Css wie nötig das es bei der Größe gut aussieht und das Spielchen beginnt von vorn, bis du halt bei 320px angekommen bist :)

  • Okay, dann vergesse ich Adeptive eben. Dachte sowas wird noch gebraucht, wenn man eben ganz genaue Tabellen bzw Elemente eben baut die nicht vverzogen werden sollen und Text ect immer gleich bleibt. Also px statt %- Wobei... ich kann einzelne divs ja auch in prozext angeben beim responsive, die werden dann eben nur nicht angepasst am ende? Also kann ich ja statische Elemente auch im Responsive einbauen, wenn ich an diie auflösung bzw breite der medias denke?


    http://www.amazon.de/gp/product/3836223139?psc=1&redirect=true&ref_=ox_sc_act_title_1&smid=A3JWKAKR8XB7XF soll ich das kaufen oder lernt man auch alles im lauf der zeit bzw im internet? :D

Jetzt mitmachen!

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