Fotogalerie in Response-Web-Design?

Seepferdchen · 26. Mai 2016

Hallo Zusammen,
ich würde gerne auf meiner Züchterhomepage eine Bildergalerie vom letzten Wurf darstellen. Da dies einige Fotos über die Entwicklung der Hunde über einen Zeitraum von 10 Wochen ist, fallen da natürlich etliche Fotos an.
Wie wäre es hier sinnvoll die Fotos im Respons-Webdesign darzustellen?

Hier meine Homepage:
von den fidelen Socken

Sempervivum · 26. Mai 2016

Selber benutze ich die Copy&Show Gallery:
http://vysions.de/cas-gallery/

Diese besteht aus einer einzigen PHP-Datei und hat den Vorteil, dass sie die Bilder automatisch ausliest und das HTML generiert, so dass man neue Bilder nur hochladen muss, um sie zur Galerie hinzu zu fügen.
Man kann auch Unterseiten anlegen.
Leider ist diese nicht responsiv und ich habe sie daher entsprechend geändert. Sieht dann so aus:
http://www.ulrichbangert.de/wildblumen/index.php

Exif-Informationen kann man ausschalten. Leider reichten meine Kenntnisse nicht aus, um das Konzept von einer einzigen Datei aufrecht zu erhalten.

Lupus_III · 27. Mai 2016

Ich benutze für so was Juicebox Lite https://www.juicebox.net/download/ und zwar die Free Version. Die ist responsive und kann in bestehende Websites eingebaut werden.

Seepferdchen · 27. Mai 2016

@Hallo Simpervium,
herzlichen Dank für Deinen Vorschlag, der mir auch sehr gut gefällt. Leider habe ich auf meiner Domaine derzeit keinen PHP-Zugang. Da müsste ich meinen Account aufstocken! Vielleicht mache ich dies auch, da ich mir jetzt die Lernvideos über PHP von Axel Pratzner bestellt hatte. Der Video-Kurs ist sehr gut, aber ich muss diesen halt erst durcharbeiten. Danach werde ich mich mit dem PHP zunächst einmal auf unserer Vereinsseite vom Pinscher- und Schnauzer-Klub "austoben"!

@ Hallo Lupus_III,
auch Dir herzlichen Dank für den Vorschlag, ich denke dies ist zunächst für mich eine sehr gute praktikable Lösung und ob ich auf PHP dann umsteige ist abzuwarten!

JR Cologne · 27. Mai 2016

Musst du für die Aktivierung von PHP auch noch (mehr) Geld bezahlen?

Weil dann würde ich dir dringend zu einem Anbieterwechsel raten.

Seepferdchen · 27. Mai 2016

Zitat von JR Cologne

Musst du für die Aktivierung von PHP auch noch (mehr) Geld bezahlen?

Weil dann würde ich dir dringend zu einem Anbieterwechsel raten.

Ich habe meine Homepage nur im Rahmen meines Telefonanschlusses kostenlos, da ist PHP aber leider nicht möglich. Wenn ich PHP haben möchte, muss ich zumindest den Basistarif wählen und da es ja nur eine Hobby-Seite ist, überlege ich mir dies halt.
Ich hatte zuvor einen kostenlosen Anbieter und damals konnte man sich für geringes Entgeld "werbefreihait" erkaufen. Jetzt aber nutzt er ständig Cookies und das nervt mich. Daher bin ich mit meiner Web-Seite nun zu meinem Telefonanbieter umgezogen.

JR Cologne · 27. Mai 2016

Hm, ok. Es gibt aber auch kostenlose und werbefreie Anbieter, wie z.B. bplaced.

Nur um das mal zu erwähnen. Naja, wenn du natürlich lieber bei deinem aktuellen Anbieter bleiben möchtest, kann ich das auch verstehen.

Seepferdchen · 27. Mai 2016

Zitat von JR Cologne

Hm, ok. Es gibt aber auch kostenlose und werbefreie Anbieter, wie z.B. bplaced.

Nur um das mal zu erwähnen. Naja, wenn du natürlich lieber bei deinem aktuellen Anbieter bleiben möchtest, kann ich das auch verstehen.

Herzlichen Dank, das habe ich nicht gwusst!

Die Erfahrungen mit meinem "alten Anbieter" sind leider inzwischen auch etwas nagitiv belastet und nun bin ich gerade umgezogen! Ich werde Deinen Vorschlag aber gerne auch weiterreichen.

Ich würde es sehr begrüßen, wennn es hier im Forum eine Rubrik gäbe, wo man solche Informationen auf aktuellestem Stand abrufen könnte.

LG
Seepferdchen

JR Cologne · 27. Mai 2016

Freut mich, wenn ich helfen konnte.

Seepferdchen · 30. Mai 2016

Zitat von Lupus_III

Ich benutze für so was Juicebox Lite https://www.juicebox.net/download/ und zwar die Free Version. Die ist responsive und kann in bestehende Websites eingebaut werden.

das sieht eigentlich auch sehr gut aus, nur leider habe ich einen Fehler hierbei, die Galerie wird leider ganz unten auf der Seite dargestellt und ich kann den Fehler nicht finden!

hier zu meiner Seite: Welpenstube Fotogalerie

Wer kann mir hier helfen?

LG
Sepferdchen

Sempervivum · 31. Mai 2016

Vermutlich ist das Problem, dass Du die Juicebox initialisierst, bevor der betr. Container definiert wird. Schreibe den Javascript-Code mal ganz ans Ende des Body, direkt vor dem </body>.
Edit: Anscheinend ist das nicht die Ursache, denn die Galerie wird erzeugt. Ich empfehle dennoch, dass Javascript ans Ende des Body zu stellen.
Edit2: Entfernt man in .jcbx-glry-classic das clear:both wird die Galerie richtig angezeigt. Leider weiß ich nicht, wie man das bei dieser Galerie sauber lösen kann. Hast Du den Builder verwendet, um die Galerie zu erzeugen? Dann müsstest Du mal in den Einstellungen suchen, ob man es ändern kann. Wenn nicht, versuche dies in deine Seite einzufügen:

CSS

<style>.jcbx-glry-classic {clear:none}</style>

Seepferdchen · 31. Mai 2016

ja ich habe den Builder benutzt. Dabei wird der Code zum einbetten in die HTML-Seite erstellt, den man im Main-Bereich (bei mir <article> )einfügen soll.
Hier meine Seite entsprechend:

SQL

<!DOCTYPE html>
<html lang="de">
  <head>
        <title>Zwergschnauzer von den fidelen Socken</title>
      	<meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="Zwergschnauzer von den fidelen Socken">
        <meta name="robots" content="index">
        <meta name="robots" content="all">
        <meta http-equiv="content-type" content= "text/html; charset=UTF-8">
        <meta name="date" content="2016-06-01">
        <meta name="author" content="E. Purtzel">
        <meta name="keywords" content="Zwergschnauzer, Welpen, Zwergschnauzerzucht">
        <meta name="generator" content="Brackets (www.brackets.io)">
        <link href="design.css" rel="stylesheet" type="text/css">
        <link href="favicon_zwergschnauzer-schwarz-silber.ico" type="image/x-icon" rel="shortcut icon"> 
<!-- Start WOWSlider.com HEAD section --> <!-- add to the <head> of your page -->
	<link rel="stylesheet" type="text/css" href="engine1/style.css" />
	<script type="text/javascript" src="engine1/jquery.js"></script>
	<!-- End WOWSlider.com HEAD section -->
<!--
        <link href="http://file1.npage.de/005533/36/html/lightbox.css" rel="stylesheet" type="text/css">
        <script src="http://file1.npage.de/005533/36/html/jquery-1.7.2.min.js" type="text/javascript"></script>    
        <script src="http://file1.npage.de/005533/36/html/lightbox.js" type="text/javascript"></script>
-->




    </head>





    <body>
        <div id="wrapper">
        <div id="nav-menue">
                <header>
<!--                    <p>von den fidelen Socken</p>-->
                </header>




                <nav id="steuerung">
                <ul>
                    <li><a href="index.htm" id="button_Nav"><img src="Homepageverwaltung/Hintergrund/Schnauzer-Logo-28.png" alt="" title="" >Startseite</a>
                    </li>

                    <li><a href="update.htm" id="button_Nav"><img src="Homepageverwaltung/Hintergrund/Schnauzer-Logo-28.png" alt="" title="" >Update</a>
                    </li>

                    <li><a href="an-der-waterkant.htm" id="button_Nav"><img src="Homepageverwaltung/Hintergrund/Schnauzer-Logo-28.png" alt="" title="" >an der Waterkant</a>
                    </li>




                    <li><a href="so-leben-wir.htm" id="button_Nav"><img src="Homepageverwaltung/Hintergrund/Schnauzer-Logo-28.png" alt="" title="" >so leben wir</a>
                    </li>





                    <li><a href="welpenstube.htm" id="button_Nav">
                        <img src="Homepageverwaltung/Hintergrund/Schnauzer-Logo-28.png" alt="" title="" >Welpenstube</a>
                    </li>

                    <li><a href="fragen-eines-welpen.htm" id="button_Nav"><img src="Homepageverwaltung/Hintergrund/Schnauzer-Logo-28.png" alt="" title="" >Fragen eines Welpen</a>
                    </li>                        

                     <li><a href="Wurfplanung.htm"id="button_Nav"><img src="Homepageverwaltung/Hintergrund/Schnauzer-Logo-28.png" alt="" title="" >Wurfplanung</a>
                     </li>                       

                    <li><a href="rasseportrait.htm"id="button_Nav"><img src="Homepageverwaltung/Hintergrund/Schnauzer-Logo-28.png" alt="" title="" >Rasseportrait</a>
                    </li>    

                    <li><a href="ausstellungen.htm"id="button_Nav"><img src="Homepageverwaltung/Hintergrund/Schnauzer-Logo-28.png" alt="" title="" >Austellungen</a>
                    </li>                        

                    <li><a href="hundealter.htm"id="button_Nav"><img src="Homepageverwaltung/Hintergrund/Schnauzer-Logo-28.png" alt="" title="" >Hundealter</a>
                    </li>                        

                    <li><a href="http://www.rohfutter-hunde.de"id="button_Nav" target="_blank"><img src="Homepageverwaltung/Hintergrund/Schnauzer-Logo-28.png" alt="" title="" >Ernährung</a>
                    </li>          

                    <li><a href="ueber_mich.htm"id="button_Nav"><img src="Homepageverwaltung/Hintergrund/Schnauzer-Logo-28.png" alt="" title="" >Über mich</a>
                    </li>

                    <li><a href="literatur.htm"id="button_Nav"><img src="Homepageverwaltung/Hintergrund/Schnauzer-Logo-28.png" alt="" title="" >Literatur</a>
                    </li>                        

                    <li><a href="regenbogenbruecke.htm"id="button_Nav"><img src="Homepageverwaltung/Hintergrund/Schnauzer-Logo-28.png" alt="" title="" >Regenbogenbrücke</a>
                    </li>                        
 
                    <li><a href="http://www.onlex.de/_gbuch.php4?username=Schnuffi" target="blank" id="button_Nav"><img src="Homepageverwaltung/Hintergrund/Schnauzer-Logo-28.png" alt="" title="" >Gästebuch</a>
                    </li>

                    <li><a href="kontakt.htm"id="button_Nav"><img src="Homepageverwaltung/Hintergrund/Schnauzer-Logo-28.png" alt="" title="" >Kontakt</a>
                    </li>

                    <li><a href="links.htm"id="button_Nav"><img src="Homepageverwaltung/Hintergrund/Schnauzer-Logo-28.png" alt="" title="" >Verlinkte Seiten</a>
                    </li>

                    <li><a href="impressum.htm"id="button_Nav"><img src="Homepageverwaltung/Hintergrund/Schnauzer-Logo-28.png" alt="" title="" >Impressum</a>
                    </li>
                </ul> 


 <figure class=bildmitte>
          <a href="http://leipzig-city.net/cgi-bin/50besten/Hundeseiten/schnauzer/die50besten.cgi?ID=931" target="_blank"><img class="bild" alt="50Besten" height="105" src="Homepageverwaltung/Hintergrund/55besten.gif" width="101"></a>
         <figcaption>Ein Klick -<br> und es wird für uns gezählt!</figcaption>
  </figure> 

  <figure class="bildmitte">                 
          <a href="http://www.top10-sites.de/visit.asp?id=7562" target="_blank"><img class="bild" alt="Top Ten" height="100" src="Homepageverwaltung/Hintergrund/logo-top-ten.gif" width="92"></a>                   
  </figure>                   

    </nav>  
</div>                





<!-- Menü-Button für Handy & Co.-->
	<a class="menue-button menue-button-beschr-close" 
	   href="#nav-menue-zu">MENÜ zu</a>
	<a class="menue-button menue-button-beschr-open" 
	   href="#nav-menue">MENÜ auf</a>		
 




<!-- ab hier Inhalt         -->

<article>
    <h1>Welpenstube</h1>


       <p>hier werden Fotos aus unserem letzten Wurf angezeigt</p> 
        <P> Die Bearbeitung nimmt leider noch etwas Zeit in Anspruch. Über den Fortgang der Arbeit erfahrt Ihr mehr unter "Updates"</P>

            <!--START JUICEBOX EMBED-->
            <script src="jbcore/juicebox.js"></script>
            <script>
            new juicebox({
            containerId: "juicebox-container",
            galleryWidth: "100%",
            galleryHeight: "100%",
            backgroundColor: "rgba(51,51,51,1)"
            });
            </script>
            <div id="juicebox-container"></div>
            <!--END JUICEBOX EMBED-->




</article>    




                
        <footer>
            <p>© 2016 Alle Rechte obliegen dem Eigentümer dieser Seite. Herunterladen von Bildern und Inhalten nur mit schriftlicher Genehmigung des Eigentümers!
            </p>

         </footer>

        </div>

    </body>
</html>

Alles anzeigen

Sempervivum · 31. Mai 2016

Ja, den Code habe ich mir schon in der Quelltextansicht meines Browsers angesehen. Wie schon gesagt, such mal in den Einstellungen des Builders, ob Du etwas findest, womit man das clear:float weg bekommt. Und wenn nicht, probiere das CSS, das ich gepostet habe.

Seepferdchen · 31. Mai 2016

Hallo Sempervivum,
herzlichen Dank! Ja so klappt es!

LG
Seepferdchen

Sempervivum · 31. Mai 2016

Freut mich, dass es jetzt geht.

Fotogalerie in Response-Web-Design?

Jetzt mitmachen!

Teilen