Versions-Historie des Beitrags „Problem mit template und Grid Photogallerie“

Problem mit template und Grid Photogallerie

bearbeitet von Romi 16.10.2015 13:55

> 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](http://codepen.io) oder [bplaced.net](http://bplaced.net) online stellen. ~~~html <!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>  <div id="logo"> <a href="#!/splash"><img src="Siegfilm/Bilder/Siegfilm.png"></a> <span></span> <div id="logoFalse"></div> </div> </header> <div id = "main">  <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>  <section> <ul> <li id="splash"></li>  <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>  <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>  <li id="folio"> <div class="box_1"> <h2>Unsere Gallerie</h2> <div id="JQGridGallery1" class="JQGridGallery"></div> </div> </li>  <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>  <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>  <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> ~~~

Problem mit template und Grid Photogallerie

bearbeitet von

Gunnar Bittersmann 20.10.2015 23:20

> 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](http://codepen.io) oder [bplaced.net](http://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>  <div id="logo"> <a href="#!/splash"><img src="Siegfilm/Bilder/Siegfilm.png"></a> <span></span> <div id="logoFalse"></div> </div> </header> <div id = "main">  <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>  <section> <ul> <li id="splash"></li>  <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>  <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>  <li id="folio"> <div class="box_1"> <h2>Unsere Gallerie</h2> <div id="JQGridGallery1" class="JQGridGallery"></div> </div> </li>  <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>  <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>  <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>