Romi: Problem mit template und Grid Photogallerie

Hallo ihr Lieben,

ich hab da ein kleines Problem.

Ich habe mir ein Template gekauft und das umschreiben der Webseite klappt gut, jetzt wollte ich eine tolle Grid Photogallerie erstellen und die in mein Template einbauen. Dies klappt nicht so wie ich mir das vorgestellt habe bzw gar nicht.

Kann mir vllt bitte jemand helfen??

Danke schon mal im vorraus.

LG Romi

  1. Hallo,

    Kann mir vllt bitte jemand helfen??

    wir können dir helfen wenn du uns ein Online Beispiel zeigst.

    1. Hallo,

      Kann mir vllt bitte jemand helfen??

      wir können dir helfen wenn du uns ein Online Beispiel zeigst.

      was braucht ihr denn genau.

      sorry ich kenne mich noch nicht so gut aus.

      1. Hallo,

        was braucht ihr denn genau.

        am beten den Code den du geschrieben hast, auch wenn er Fehler enthält, so sehen wir in welche Richtung es gehen soll.

        Du kannst deine Beispiel unter codepen.io oder bplaced.net online stellen.

        1. Hallo,

          was braucht ihr denn genau.

          am beten den Code den du geschrieben hast, auch wenn er Fehler enthält, so sehen wir in welche Richtung es gehen soll.

          Du kannst deine Beispiel unter codepen.io oder bplaced.net online stellen.

          <!DOCTYPE HTML>
          <html lang="en"><head>
          	<title></title>
          	<meta charset="utf-8">
              
            
               <link href="css/style.css" rel="stylesheet">
          	<link rel="stylesheet" type="text/css" href="css/style.css" />
              <link rel="icon" href=file:///Video 3/HOMEPAGE_2014/site/type="image/favicon">
          	<link rel="shortcut icon" href="images/favicon.ico" type="image/favicon" />
              <link rel="stylesheet" type="text/css" href="gallery_files/grid-gallery.css" />
              
             
          	<script type="text/javascript" src="js/include_scripts.js"></script>
              <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
          	<script type="text/javascript" src="gallery_files/jquery.grid-gallery.min.js"></script>	
              
          	<script type="text/javascript">
          
          	
          	jQuery(document).ready(function() {
          		jQuery("#JQGridGallery1").fdGridGallery({sourceURL:"gallery_files/gallery.xml",gridAlign:"right",gridSpacing:0,gridAutoResize:true,gridColumnsMin:false,gridColumnsMax:false,gridResizeDelay:50,gridAnimate:true,gridAnimateEasing:"easeOutQuad",gridAnimateDuration:300,gridAnimateDelay:50,categoriesAccordingGrid:false,categoriesScrollingLoop:false,categoriesScrollingStep:1,categoriesScrollingDuration:500,categoriesScrollingEasing:"easeOutQuad",thumbnailsPreload:true,thumbnailsLoadRandom:false,thumbnailsServerScript:"",thumbWidth:100,thumbHeight:0,popupSlideWidth:"80%",popupSlideHeight:"80%",popupLanguageInfo:"_AMOUNT_ of _TOTAL_"});
          	});
              </script> 
              
              <script src="js/include_scripts.js"></script>
              
              
          	</head>
          	
              
            
              
              <body>
              
              
          		<div id="spinner"></div>
          		<div id="wrapper">
          
          <!--header-->
          
          		<header>
          
          
          <!--logo--> 
          		<div id="logo">
          				<a href="#!/splash"><img src="Siegfilm/Bilder/Siegfilm.png"></a>
          				<span></span>
          				<div id="logoFalse"></div>
          		</div>
          		
                  
                  </header>
          			
                      <div id = "main">
          
          
          <!--Splash Menu-->
          				<nav id="splashMenu">
          					<ul>
          						<li><a href="#!/splash">splash</a></li>
          						<li><a href="#!/mainPage">Home</a></li>
          						<li><a href="#!/studio">Folio</a></li>
          						<li><a href="#!/folio">Gallerie</a></li>
          						<li><a href="#!/vision">Wir</a></li>
          						<li><a href="#!/contact-us">Kontakt</a></li>
          					</ul>
          				</nav>
          
          <!--content-->
          				<section>
          					<ul>
          						<li id="splash"></li>
          						 
          
          <!--Home page-->		
          						<li id="mainPage">
          							<div class="box_1">
          								<h2>Sei Gegrüßt!</h2>
          								<div class="inside">
          									<div class="scroll ex-1 page1">
          										<div>
          											<figure>
          												<img src="Siegfilm/Bilder/page-1-img-1.jpg" alt=""/>
          													<figcaption class="figMarg">
          														<p class="col_1">Willkommen in der SIEGFILM Welt - <br> bei Ihrem Partner für Medien.</p>
          														Imagefilme - Produktvideos - 3D Animationen - Industriefotografie - Audioproduktionen - Grafik und Design.<br><br>
                                                                  
                                                                      
          														<p class="col_1">Ihren Visionen Raum geben -</p>  <br>Ihr Unternehmen, Ihr Produkt verstehen und darstellen,<br>als wäre es unser eigenes.  <br><br>
                                                                  Ihre Inhalte, Ihre Botschaften transportieren,  mit Medien, <br>die ihr Ziel erreichen.  <br><br>
                                                                  Kreativ - innovativ - modern und  handwerklich perfekt.  <br><br>
                                                                  Konzept - Realisation - Finishing - Publikation -<br> alles aus einer Hand.
          														
          													</figcaption>
          											</figure>
          										</div>
          									</div>	
          								</div>
          						</li>	
           
           
           <!--studio page-->
          						<li id="studio">
          							<div class="box_1">
          								<h2>Unsere Tätigkeiten</h2>
          									<div class="stud_marg"><div class="col_1">um dolor sit amet consectetuer adipaesent lrom port rsen mate hadslelu misle port rsen halelum isleitre sren amet lroem.</div>
          									lacus Aenean nonummy hendrerit mauris. Phasellus po. Fusce suipit diculus mus. Nulla dui. Fusce feugiat maleda odio. Morbi nunc gravidacursus lroem serrn
          									necuctus a lorem. Maecenas trist que orci ac uis u.</div>
          									
          											<div><div class="col_1">ipaesent lrom port rsen mate hadslelu misle.</div>
          												lacus Aenean nonummy hendrerit mauris. Phasellus po. Fusce suipit diculus mus. Nulla dui. Fusce feugiat maleda odio. Morbi nunc gravidacursus lroem serrn.
          													<div class="stud_marg_2"><a class="read-more" href="#!/read-more">Read More</a></div>
          											</div>					
          							</div>
          						</li>                           
           
           
           <!--gallerie page-->	
                                      
                                   	<li id="folio">
          							  <div class="box_1">
          						
          							  <h2>Unsere Gallerie</h2>
                  
          
                                        <div id="JQGridGallery1" class="JQGridGallery"></div>
                                     
                                       </div>    
                                     </li>   
                                            
          <!--vision page-->
          						<li id="vision">	
          							<div class="box_1">
          									<h2>Siegfilmer</h2>
          									<figure class="box_3">
          										<figcaption class="figMarg_page4">
          										<div  class="col_1">Lorem ipsum dolor sit amet consectetuer adipaesent</div >
                                                  
                                                  lacus Aenean nonummy hendrerit mauris. Phasellus po. Fusce suipit diculus mus. Nulla dui. Fusce feugiat maleda odio. Morbi nunc gravidacursus necuctus a lorem. Maecenas trist. lacus Aenean nonummy hendrerit mauris. 			                                        Phasellus po. Fusce suipit diculus mus. Nulla dui. Fusce feugiat maleda.
          										</figcaption>	
          									
          									</figure>
          					
          									
          							</div>
          						
          						</li> 
                                        
            <!--contact us page-->
          						<li id="contact-us">
          							<div class="to_right">
          								<h2>Kontakt</h2>
                                          
                                          <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2515.249580141986!2d8.10385!3d50.91910000000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47bc04de1cd4dead%3A0x9a7b05a656bc38e4!2sSIEGF  			                                                 ILM+OHG!5e0!3m2!1sde!2sde!4v1444220203182" width="600" height="450"  allowfullscreen></iframe>
          								
                                       </div>
                                       
                                       <div class="contText">
          									<p class="cont_col cont_marg">	Siegfilm OhG<br> 
          										Kronprinzenstraße 101 <br> 
          										57250 Netphen<br> 
          									</p>
          									<p class="to_right">
          										
          										<span class="col">Telefon:</span>+49 (0)27388233<br> 
          										<span class="col">Fax:</span>+49 (0)27382963<br> 
          										E-mail: <a href="mailto:" class="cont_a">info@siegfilm.de</a><br> 
          										
          									</p>   
          							  </div>
          						</li>  
                                  
          <!--read more page-->
          						<li id="home">
          							<div class="box_1">
          								<h2 class="privMarg">Siegfilmer</h2>
          									<p >Spannend, abwechslungsreich und modern. <br>
                                                  Zusammen mit Ihnen entwickeln wir Konzepte, setzen diese mit unserer Erfahrung und unserem Kown How um.  <br>
                                                  Wir sprechen die Sprache unserer Kunden. <br>
                                                  Wir leben Film, wir fotografieren mit Leidenschaft und wir denken uns hinein in die Vorgänge und Abläufe, die wir festhalten - filmisch erklären, bildlich dokumentieren oder in Animationen sichtbar und verständlich 			 										machen.  <br>
                                                  Der Kontakt und die Nähe zu unseren Kunden sind dabei unabdingbar für den Erfolg.  <br>
                                                  Viele unserer langjährigen Kunden nennen uns einfach die „Siegfilmer“. <br>
                                                  Darauf sind wir stolz. <br>
                                                  Dieser Begriff drückt liebevoll unsere Nähe zum Kunden aus. <br>
                                                  Die Nähe zu Ihnen.  <br>
                                                  Wir sind es gewohnt Aufgaben umzusetzen, alle möglichen Hürden zu überwinden - sei es Genehmigungen, unwegsames Gelände, Hitze oder Kälte - es ist eine Leidenschaft die uns Tag für Tag antreibt. <br>
                                                  Antreibt für neue und spannende Aufgaben.  <br>
                                                  Bei der Realisierung helfen uns die weltweiten Kontakte, ein eigener Stützpunkt und ein starker Partner in den USA.  <br>
                                                  Die Mischung aus Erfahrung, Kreativität und Herausforderung macht uns Spaß und spornt uns an. 
          									</p>
          							</div>
          						</li>
          			
          				      
                          
                          <li id="video">
          							<div class="scroll ex-3 page2">
                                      
                                      
          								<h2 class="privMarg">Video</h2>
          									<p >Video - unsere Leidenschaft <br>
                                                    Eine Prämisse von Siegfilm - hochwertiges Equipment, handwerkliches Können, gepaart mit Jahrzehnte langer Erfahrung und dem dazugehörigen Fachwissen führt zu tollen Ergebnissen. <br>
                                                    Wir arbeiten nicht nur ab - wir stecken in jedes unsere Projekte auch ein gehöriges Maß an Leidenschaft und „Herzblut“.  <br>
                                                    Wir sind Partner unserer Kunden. <br>
                                                    Sie stellen uns die Aufgabe und wir, das Siegfilm-Team löst sie.  <br>
                                                    Von der Idee über das Storyboard, den entsprechenden Genehmigungen bis hin zum fertigen Video - das machen wir!<br>  
                                                    Wir sind immer für unsere Kunden einsatzbereit. <br>
                                                    Einsatzbereit mit eigenem Equipment auf dem neusten Stand der Technik.  <br>
                                                    Vier komplette „Kamerazüge“ der neusten Generation - 4K - HDTV und HDTV 3D - stehen für den weltweiten Einsatz bereit.  <br>
                                                    Erfahrene „Siegfilmer“ beherrschen das Equipment und bringen auch die entsprechende Erfahrung und das nötige „Fingerspitzengefühl“ mit zum Dreh.  <br>
                                                    Neben den Kameras verfügen wir natürlich auch über einen Videokran mit einem ferngesteuerten Videokopf (Remotehead) für spannende Aufnahmen. <br>
                                                    
          									</p>
          							</div>
          						</li>
                                  
                                  <li id="ani">
          							
          								<h2 class="privMarg">Animation</h2>
          									<p >3D - Animationen und Grafik <br><br>
                                              	Komplexe und anspruchsvolle Abläufe verständlich und sinnvoll darstellen erfordert <br> ein Höchstmaß an technischem Verständnis. <br><br>
                                                  Bei der Umsetzung ist eine unabdingbare Aufgabe, den richtigen Mix zwischen Technik <br> und Kreativität zu finden.  <br>
                                                  Dieser Mix entscheidet, neben Erfahrung und Können, über den Erfolg einer Animation.  <br>
                                                  Bei der Konzeption einer Animation arbeiten wir eng mit unseren Kunden zusammen und lassen <br>auch den Aspekt der „Mehrfachnutzung“ nicht außer Acht.  <br>
                                                  Durch unsere jahrelange Erfahrung und unser Verständnis für komplexe <br>Zusammenhänge und Abläufe, sind wir in der Lage,anspruchsvolle Aufgaben umzusetzen.  <br>
                                                        Vom Aufbau und der Realisierung sind alle unsere Animationen so konzipiert, <br>dass Stills (Standbilder) in jeder erforderlichen <br>Auflösung und Größe daraus generiert werden können.
          									</p>
          							
          						</li>
          
          
          1. Hallo,

            ich weiß ja nicht ob es zu viel verlangt ist ein vernünftiges Online Beispiel bereit zu stellen. Ich habe dir zwei Links genannt. Wir sollen wir kostenlos helfen, dann musst du schon etwas mitarbeiten.

            Ich zumindest sehe es nicht ein, mich durch diesen Quelltext zu lesen und zu schauen wo dein Problem liegt. Dazumal fehlt auch der CSS Teil der in deinem Fall am wichtigsten ist.

            1. Hallo,

              ich weiß ja nicht ob es zu viel verlangt ist ein vernünftiges Online Beispiel bereit zu stellen. Ich habe dir zwei Links genannt. Wir sollen wir kostenlos helfen, dann musst du schon etwas mitarbeiten.

              Ich zumindest sehe es nicht ein, mich durch diesen Quelltext zu lesen und zu schauen wo dein Problem liegt. Dazumal fehlt auch der CSS Teil der in deinem Fall am wichtigsten ist.

              Ich bin gerade dabei ein online bsp zu erstellen

              1. Hallo,

                Ich bin gerade dabei ein online bsp zu erstellen

                Ok :) Und an deine CSS Datei bitte denken.

                1. Hallo,

                  Ich bin gerade dabei ein online bsp zu erstellen

                  Ok :) Und an deine CSS Datei bitte denken.

                  habe leider leichte Probleme dab´mit da er meine daten nicht will

                2. Hallo,

                  Ich bin gerade dabei ein online bsp zu erstellen

                  Ok :) Und an deine CSS Datei bitte denken.

                  http://codepen.io/Romi_111518/

                  da stimmt aber iwie nicht mehr :O

                  1. Hallo,

                    http://codepen.io/Romi_111518/ da stimmt aber iwie nicht mehr :O

                    damit kann ich leider auch nichts anfangen :/ Vielleicht wäre es doch besser dir einen kostenlosen Account bei bplaced.net einzurichten.

                    1. Hallo,

                      http://codepen.io/Romi_111518/ da stimmt aber iwie nicht mehr :O

                      damit kann ich leider auch nichts anfangen :/ Vielleicht wäre es doch besser dir einen kostenlosen Account bei bplaced.net einzurichten.

                      Hay danke das du versucht hast mir zu helfen, habe meinen Fehler gerde gefunden. Vielen vielen dank trotzdem.

                      1. Hey,

                        Hay danke das du versucht hast mir zu helfen, habe meinen Fehler gerde gefunden. Vielen vielen dank trotzdem.

                        kein Problem :) An was ist es denn gelegen?

                        1. Hey,

                          Hay danke das du versucht hast mir zu helfen, habe meinen Fehler gerde gefunden. Vielen vielen dank trotzdem.

                          kein Problem :) An was ist es denn gelegen?

                          Zwei Javascript befehle haben sich überlagert bzw funktionierten nnicht zusammen.

          2. @@Romi

            <!DOCTYPE HTML>
            <html lang="en">
            

            Da ist schon gleich der erste Fehler. Du gibst Englisch als Sprache an; dein Seiteninhalt ist aber auf deutsch. Es ist aber wichtig, die richtige Sprache anzugeben.

            Für Deutsch muss es "de" heißen:

            <!DOCTYPE html>
            <html lang="de">
            

            ***

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

            Warum du dasselbe Stylesheet zweimal einbindest, hast du sicher auch nicht richtig überlegt.

            ***

                <link rel="icon" href=file:///Video 3/HOMEPAGE_2014/site/type="image/favicon">
            

            Mal abgesehen davon, dass da Anführungszeichen und ein Leerzeichen fehlen: Auf einer Webseite willst du auf eine Datei auf deiner lokalen Festplatte (file:) verweisen? Kein Seitenbesucher bekommt dieses Favicon je zu sehen.

            ***

                    <script type="text/javascript" src="js/include_scripts.js"></script>
            […]
                <script src="js/include_scripts.js"></script>
            

            Warum du dasselbe Script zweimal einbindest, hast du sicher auch nicht richtig überlegt.

            ***

                               <a href="#!/splash"><img src="Siegfilm/Bilder/Siegfilm.png"></a>
            

            Dem Bild fehlt der zwingend notwendige Alternativtext (alt-Attribut) für den Fall, dass das Bild nicht geladen wird oder der Nuzter keine Bilder sehen kann.

            Und was ist das? Shebang #!?? Was setzt du da für vorsintflutige Technik ein? Es ist schon so lange her, dass ich #! gesehen habe, dass ich inzwischen vergessen habe, warum das keine gute Idee ist. Aber einen guten Grund gab es, #! nicht zu verwenden.

            Ansonsten – wie Sara schon sagte – bitte ein Online-Beispiel.

            LLAP 🖖

            --
            Ist diese Antwort anstößig? Dann könnte sie nützlich sein.