Unitegallery Gallerie hinkriegen...

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

DidgeFrank

Mitglied
1 August 2017
30
0
6
43
Ich würde es gerne so haben mit meinen Bildern:

Bei mir siehts bis jetzt so aus:

Laut den Entwicklern sollte es reichen,
"jQuery("#gallery").unitegallery(); "

zu benutzen für das "tiles" Design, sieht man sich aber den ellenlangen Quellcode der Seite an, kann es doch nicht alles sein?

Was ist die einfachste Möglichkeit nur die Gallerie zu übernehmen? Ich habe zur Zeit lediglich den "unitegallery" Ordner in meinem html Verzeichnis.

Wie lange ich jetzt schon so rumfrickel ist auf keine Kuh Haut zu kriegen. Ich hoffe, ihr könnt mir weiterhelfen, Leudde.

Am besten Schritt für Schritt, ich bin nicht mehr ganz zurechnungsfähig...
 

basti1012

Aktives Mitglied
26 November 2017
817
81
28
38
Minden
sebastian1012.bplaced.net
Man muss nur das richtige einbinden dann geht das auch
HTML:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>test...test...test</title>
    <link rel="stylesheet" type="text/css" href="http://unitegallery.net/stylesheet.css"/>
    <link rel="stylesheet" type="text/css" media="print" href="http://unitegallery.net/print.css"/>
    <meta name="description" content="Gallerie Test" >         
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
        <script type='text/javascript' src='http://unitegallery.net/unitegallery/js/unitegallery.min.js'></script>
        <link rel='stylesheet' href='http://unitegallery.net/unitegallery/css/unite-gallery.css' type='text/css' />
        <script type='text/javascript' src='http://unitegallery.net/unitegallery/themes/tiles/ug-theme-tiles.js'></script>
        <link rel='stylesheet' href='http://unitegallery.net/unitegallery/themes/default/ug-theme-default.css' type='text/css' />
</head>
<body>
 <div id="gallery" style="display:none;">
            <img alt="Image 1 Title" src="http://www.catsuitapprentice.de/Bilder/Catsuit/MrKkat/Kkat_1.jpg"
                data-image="http://www.catsuitapprentice.de/thumbnails/Kkat_1_th.jpg"
                data-description="Image 1 Description">
            
            <img alt="Image 2 Title" src="http://www.catsuitapprentice.de/Bilder/Catsuit/MrKkat/Kkat_2.jpg"
                data-image="http://www.catsuitapprentice.de/thumbnails/Kkat_2_th.jpg"
                data-description="Image 2 Description">
        </div>
        <script type="text/javascript">
            jQuery(document).ready(function(){
                jQuery("#gallery").unitegallery();
            });
        </script>
</body>
</html>
Aber mach dir nix raus ,ich habe die ursache auch nicht sofort entdeckt
 

DidgeFrank

Mitglied
1 August 2017
30
0
6
43
Domo Arigato! Jetzt gehts, "3 Kreuze mach"!
aaaaaber, es werden lediglich 2 Spalten erzeugt und dann alles untereinander gestapelt.
Kann man das irgendwie hinkriegen, dass man wenigstens 4 Spalten hat?
 
Zuletzt bearbeitet:

basti1012

Aktives Mitglied
26 November 2017
817
81
28
38
Minden
sebastian1012.bplaced.net
Ja das sollte mit den einstellungen gehen

Bei mir geht es nicht. Ich kriege dann Fehler von deren Api das da g_ugFunctions is not defined ist.
Ich weiß nicht woran das liegt. Teste das mal bei dir vieleicht ist bei mir wieder was in a.....
Aber wenn du das so machst wie es da steht, zb so
JavaScript:
 <script>
            jQuery(document).ready(function(){
                jQuery("#gallery").unitegallery({
                   gallery_theme: "Basti test",
                   gallery_width:"90%",
                    gallery_min_width: 150,
                    gallery_background_color: "red"
                });
            });
        </script>
sollte es eigentlich gehen.
Versuch es mal und meld dich dann nochmal weil möchte gerne wissen ob es bei dir klappt und warum bei mir nicht.

Vieleicht habe ich auch was falsch verstanden was da in der Doku steht.
Vieleicht sieht ja einer den Fehler den ich gemacht haben könnte ?
 

basti1012

Aktives Mitglied
26 November 2017
817
81
28
38
Minden
sebastian1012.bplaced.net
Oh man. jetzt habe ich es hinbekommen.
Habe mal mehrere Einstellungen darein gemacht damit du siehst wie es functioniert.
HTML:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>tUnitygallerie test seite</title>
    <meta name="description" content="Gallerie Test" >        
    <link rel="icon" type="image/x-icon" href="../../favicon.ico" />
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
        <script  src='http://unitegallery.net/js/theme.plugins.js'></script>
        <script  src='http://unitegallery.net/unitegallery/js/unitegallery.min.js'></script>
        <link rel='stylesheet' href='http://unitegallery.net/unitegallery/css/unite-gallery.css' type='text/css' />
        <script  src='http://unitegallery.net/unitegallery/themes/tiles/ug-theme-tiles.js'></script>
        <link rel='stylesheet' href='http://unitegallery.net/unitegallery/themes/default/ug-theme-default.css' type='text/css' />
</head>
<body>
<div id="gallery" style="display:none;">
            <img alt="Image 1 Title" src="http://www.catsuitapprentice.de/Bilder/Catsuit/MrKkat/Kkat_1.jpg"
                data-image="http://www.catsuitapprentice.de/thumbnails/Kkat_1_th.jpg"
                data-description="Image 1 Description">
           
            <img alt="Image 2 Title" src="http://www.catsuitapprentice.de/Bilder/Catsuit/MrKkat/Kkat_2.jpg"
                data-image="http://www.catsuitapprentice.de/thumbnails/Kkat_2_th.jpg"
                data-description="Image 2 Description">
               <img alt="Image 3 Title" src="http://www.catsuitapprentice.de/Bilder/Catsuit/MrKkat/Kkat_3.jpg"
                data-image="http://www.catsuitapprentice.de/thumbnails/Kkat_3_th.jpg"
                data-description="Image 3 Description">
           
            <img alt="Image 4 Title" src="http://www.catsuitapprentice.de/Bilder/Catsuit/MrKkat/Kkat_4.jpg"
                data-image="http://www.catsuitapprentice.de/thumbnails/Kkat_4_th.jpg"
                data-description="Image 4 Description">            
               
                        <img alt="Image 1 Title" src="http://www.catsuitapprentice.de/Bilder/Catsuit/MrKkat/Kkat_1.jpg"
                data-image="http://www.catsuitapprentice.de/thumbnails/Kkat_1_th.jpg"
                data-description="Image 1 Description">
           
            <img alt="Image 2 Title" src="http://www.catsuitapprentice.de/Bilder/Catsuit/MrKkat/Kkat_2.jpg"
                data-image="http://www.catsuitapprentice.de/thumbnails/Kkat_2_th.jpg"
                data-description="Image 2 Description">    
        </div>
<script>
       
jQuery("#gallery").unitegallery({
    tile_enable_textpanel:true,
    tile_textpanel_title_text_align: "center",
    tile_textpanel_always_on:true,
    gallery_width:"70%",
    gallery_min_width: 150,  
    gallery_background_color: "red",
    tile_enable_shadow:false,
    tile_enable_border:true,
    tiles_space_between_cols:15,
    tiles_justified_space_between:15,
    tiles_col_width:235,
    tile_border_color: "#ffffff",
    tile_enable_outline:true,
});
        </script>
</body>
</html>
Du kannst da die Zeilen rein und raus kopieren und auch anpassen wie du willst.
 
Zuletzt bearbeitet:

DidgeFrank

Mitglied
1 August 2017
30
0
6
43
Also im Prinzip funktioniert deine Seite super, jedoch geht es bei einer Einbindung in meiner Seite nicht ganz so gut. Die Gallerie hat immer nur zwei Spalten. Vielleicht liegt es an meinen Containern? Ich verwende einen für den Hauptbereich und einen für das linke Menü.
Code:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>test...test...test</title>
    <link rel="stylesheet" type="text/css" href="http://unitegallery.net/stylesheet.css"/>
    <link rel="stylesheet" type="text/css" media="print" href="http://unitegallery.net/print.css"/>
    <meta name="description" content="Gallerie Test" >         
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    
 <!--   <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
        <script type='text/javascript' src='http://unitegallery.net/unitegallery/js/unitegallery.min.js'></script>
        <link rel='stylesheet' href='http://unitegallery.net/unitegallery/css/unite-gallery.css' type='text/css' />
        <script type='text/javascript' src='http://unitegallery.net/unitegallery/themes/tiles/ug-theme-tiles.js'></script>
        <link rel='stylesheet' href='http://unitegallery.net/unitegallery/themes/default/ug-theme-default.css' type='text/css' />
-->
        
        <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
        <script  src='http://unitegallery.net/js/theme.plugins.js'></script>
        <script  src='http://unitegallery.net/unitegallery/js/unitegallery.min.js'></script>
        <link rel='stylesheet' href='http://unitegallery.net/unitegallery/css/unite-gallery.css' type='text/css' />
        <script  src='http://unitegallery.net/unitegallery/themes/tiles/ug-theme-tiles.js'></script>
        <link rel='stylesheet' href='http://unitegallery.net/unitegallery/themes/default/ug-theme-default.css' type='text/css' />
        
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
        <link rel="stylesheet" type="text/css" media="print" href="print.css"/>
</head>

<body>
       <div id="container">
    <div id="kopfleiste">
        <h2><a href="index.html">Catsuitapprentice - Fotos von Kunden</a></h2>
    </div>
    
    <img src="Bilder/Catsuits/1_cr.jpg" class="bild" alt="Catsuit_weiß" width="100%">
    
    <div id="container2">
    <div id="links">
    
    <div id="menu">
        <ul>
            <li><a href="index.html">ÜBER MICH (UND MEINE IDEE)</a></li>           
            <li class="current"><a href="Catsuits.html">CATSUITS</a></li>
            <li><a href="Colors.html">FARBEN UND STÄRKEN</a></li>
            <li><a href="werkzeuge.html">MEINE WERKZEUGE</a></li>
            <li><a href="gallerie_test_3.html">MY PORTFOLIO</a></li>
            <li><a href="kontakt.html">KONTAKT</a></li>
            <li><a href="Links.html">LINKS</a></li>
        </ul>
    </div>
    
    <div id="Chibi_Leah">
         <img src="Bilder/Chibis/Leah.png" alt="Leah">
     </div>
    
 </div>
 
 
 <!-- <div id="gallery" style="display:none;"> -->
 
 <div id="gallery" style="margin:0px auto;display:none;">
 
 
 <!--
 
            <img alt="" src="thumbnails/Maggi_th.jpg"
                data-image="Bilder/Catsuit/Maggi/Maggi.jpg"
                data-description="Image 1 Description">
            
            <img alt="" src="http://www.catsuitapprentice.de/thumbnails/Kkat_1_th.jpg"
                data-image="http://www.catsuitapprentice.de/Bilder/Catsuit/MrKkat/Kkat_1.jpg"
                data-description="Image 2 Description">
                
            <img alt="" src="thumbnails/Jade_1_th.jpg""
                data-image="Bilder/Catsuit/MrKkat/Jade_1.jpg"
                data-description="Image 1 Description">
            
            <img alt="" src="thumbnails/front_th.jpg"
                data-image="Bilder/Catsuit/Mel_makehuman_model/front.jpg"
                data-description="Image 2 Description">
                
           <img alt="" src="thumbnails/side_th.jpg"
                data-image="Bilder/Catsuit/Mel_makehuman_model/side.jpg"
                data-description="Image 2 Description"> 
-->
            
             <img alt="Image 1 Title" src="http://www.catsuitapprentice.de/Bilder/Catsuit/MrKkat/Kkat_1.jpg"
                data-image="http://www.catsuitapprentice.de/thumbnails/Kkat_1_th.jpg"
                data-description="Image 1 Description">
          
            <img alt="Image 2 Title" src="http://www.catsuitapprentice.de/Bilder/Catsuit/MrKkat/Kkat_2.jpg"
                data-image="http://www.catsuitapprentice.de/thumbnails/Kkat_2_th.jpg"
                data-description="Image 2 Description">
               <img alt="Image 3 Title" src="http://www.catsuitapprentice.de/Bilder/Catsuit/MrKkat/Kkat_3.jpg"
                data-image="http://www.catsuitapprentice.de/thumbnails/Kkat_3_th.jpg"
                data-description="Image 3 Description">
          
            <img alt="Image 4 Title" src="http://www.catsuitapprentice.de/Bilder/Catsuit/MrKkat/Kkat_4.jpg"
                data-image="http://www.catsuitapprentice.de/thumbnails/Kkat_4_th.jpg"
                data-description="Image 4 Description">           
              
                        <img alt="Image 1 Title" src="http://www.catsuitapprentice.de/Bilder/Catsuit/MrKkat/Kkat_1.jpg"
                data-image="http://www.catsuitapprentice.de/thumbnails/Kkat_1_th.jpg"
                data-description="Image 1 Description">
          
            <img alt="Image 2 Title" src="http://www.catsuitapprentice.de/Bilder/Catsuit/MrKkat/Kkat_2.jpg"
                data-image="http://www.catsuitapprentice.de/thumbnails/Kkat_2_th.jpg"
                data-description="Image 2 Description">       
                        
 
        </div>
    
    <!--    <script type="text/javascript">
            jQuery(document).ready(function(){
                jQuery("#gallery").unitegallery();
            });
        </script>  -->
        
<script>
      
jQuery("#gallery").unitegallery({
    tile_enable_textpanel:true,
    tile_textpanel_title_text_align: "center",
    tile_textpanel_always_on:true,
    gallery_width:"70%",
    gallery_min_width: 150, 
    gallery_background_color: "red",
    tile_enable_shadow:false,
    tile_enable_border:true,
    tiles_space_between_cols:15,
    tiles_justified_space_between:15,
    tiles_col_width:235,
    tile_border_color: "#ffffff",
    tile_enable_outline:true,
});
        </script>
        
  
      </div>
   </div>
  </body>
</html>
 
Zuletzt bearbeitet:
Werbung: