Herzlich Willkommen auf der Website von Pixlie 2
der beliebten Bildergalerie

Download

Hier kannst du die aktuellste Version von Pixlie 2 herunterladen. Klicke dazu einfach auf die Grafik.


Pixlie 2 downloaden

Version: 2.3.2

Hochgeladen: 02.03.2017

Downloads heute: 5

Downloads gesamt: 14394

Demo

Beispielausgabe

Pixlie2 Tutorial by Phoenix

1. Eine neue Datei anlegen

öffne deinen Editor und erstelle eine neue PHP-Datei z.B. index.php (bietet sich an). Diese Datei beinhaltet nun (meist bereits vom Editor eingestellt) den DOCTYPE, HTML, HEAD und BODY Bereich.


2. Pixlie einbinden

Um auf die von Pixlie gelieferten Arrays , in denen alle Bildinformationen enthalten sind, zugreifen zu können müssen wir zu allererst die pixlie.php einbinden.

1
2
3
4
<?php
$response_type 
'php';   //Ausgabe auf php umstellen
include('pixlie.php');    //Einbinden von Pixlie
?>

3. Ausgabe der Bilder

Um auf die von Pixlie gelieferten Arrays , in denen alle Bildinformationen enthalten sind, zugreifen zu können müssen wir zu allererst die pixlie.php einbinden.

1
2
3
4
<h2>Bilder</h2>
<a href="
<?php echo $pixlie_table_env['path_pixlie'].$picture['link_get']; ?>_d<?php echo $picture['extension']; ?>">
</a>

Darin sind nun enthalten:

1
2
3
4
<?php $pixlie_table_env['path_pixlie'];?>    =>    Link zum Bild
<?php $picture['link_get'];?>    =>    das Bild ohne Endung
_d    =>    das zugewiesene Format (in der Pixlie anpassbar)
<?php $picture['extension']    ;?>  =>        die zugehoerige Dateiendung ".jpg"

Nun verpassen wir jedem Link noch sein eigenes Thumbnail. Dafür schreiben wir innerhalb des a-Tags:

1
2
<img src="<?php echo $pixlie_table_env['path_pixlie'].$picture['link_get']; ?>_s<?php echo $picture['extension']; ?>"
 alt="<?php echo $picture['name']; ?>" />

Abschließend verpacken wir alles in einer foreach-Schleife:

1
2
3
4
5
6
7
<h2>Bilder</h2>
<?php foreach ($pixlie_table_file as $picture){ ?>
    <a href="<?php echo $pixlie_table_env['path_pixlie'].$picture['link_get']; ?>_d<?php echo $picture['extension']; ?>">
    <img src="<?php echo $pixlie_table_env['path_pixlie'].$picture['link_get']; ?>_s<?php echo $picture['extension']; ?>"
    alt="<?php echo $picture['name']; ?>" />
    </a>
<?php ?>
Codezwischenstand (innerhalb des BODY-TAGs)
1
2
3
4
5
6
7
8
9
10
11
12
<h1>Galerie</h1>
<?php
$response_type 
'php';   //Ausgabe auf php umstellen
include('pixlie.php');    //Einbinden von Pixlie
?>
<h2>Bilder</h2>
<?php foreach ($pixlie_table_file as $picture){ ?>
    <a href="<?php echo $pixlie_table_env['path_pixlie'].$picture['link_get']; ?>_d<?php echo $picture['extension']; ?>">
    <img src="<?php echo $pixlie_table_env['path_pixlie'].$picture['link_get']; ?>_s<?php echo $picture['extension']; ?>"
    alt="<?php echo $picture['name']; ?>" />
    </a>
<?php ?>

4. Unterordner auslesen

Alle Ordnerinformationen werden im Array "$pixlie_table_dir" angeliefert. Zum Auslesen und Anzeigen der Unterordner im jeweiligen Verzeichnis benutzen wir ebenfalls eine foreach-Schleife:

1
2
3
<?php foreach ($pixlie_table_dir as $folder){ ?>
    <a href="<?php echo $folder['link_get']; ?>"><?php echo $folder['name']; ?></a>
<?php ?>

Um nun die Ordner bereits als Liste anlegen zu lassen, ergänzen wir die Schleife durch eine ul-Liste (UnorderedList):

1
2
3
4
5
6
7
<ul>
    <?php foreach ($pixlie_table_dir as $folder){ ?>
        <li>
        <a href="<?php echo $folder['link_get']; ?>"><?php echo $folder['name']; ?></a>
        </li>
    <?php ?>
</ul>

Optional: Eine Ausgabe, falls kein Verzeichnis vorhanden ist:

1 <?php if(count($pixlie_table_dir)==0){ echo '<li>keine vorhanden</li>'; } ?>
Codezwischenstand (innerhalb des BODY-TAGs)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<h1>Galerie</h1>
<?php
$response_type 
'php';   //Ausgabe auf php umstellen
include('pixlie.php');    //Einbinden von Pixlie
?>
<h2>Bilder</h2>
<?php foreach ($pixlie_table_file as $picture){ ?>
    <a href="<?php echo $pixlie_table_env['path_pixlie'].$picture['link_get']; ?>_d<?php echo $picture['extension']; ?>">
    <img src="<?php echo $pixlie_table_env['path_pixlie'].$picture['link_get']; ?>_s<?php echo $picture['extension']; ?>"
    alt="<?php echo $picture['name']; ?>" />
    </a>
<?php ?>
<h2>Unterordner</h2>
<ul>
    <?php foreach ($pixlie_table_dir as $folder){ ?>
        <li>
        <a href="<?php echo $folder['link_get']; ?>"><?php echo $folder['name']; ?></a>
        </li>
    <?php ?>
<?php 
if(count($pixlie_table_dir)==0){ echo '<li>keine vorhanden</li>'; } ?>
</ul>
<a href="http://www.pixlie2.de"title="Bildergalerie, Script, PHP, Foto, Photo, Bilder, Galerie">
Pixlie - Das kostenlose PHP Bildergalerie Script</a>

5. Einbinden eines Javascript-Frameworks (Fancybox V1.3.4)

1
2
3
4
5
<script type="text/javascript"src="jquery.fancybox-1.3.4/jquery-1.4.3.min.js"></script>
<script type="text/javascript"src="jquery.fancybox-1.3.4/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript"src="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript"src="jquery.fancybox-1.3.4/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<link rel="stylesheet"type="text/css" href="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css"media="screen" />

Nun muss noch die individuelle Konfiguration im HEAD festgelegt werden (Beispiel):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
$(document).ready(function() {
    $("a.fancy").fancybox({
        'transitionIn'   :   'elastic',
        'transitionOut'  :   'elastic',
        'speedIn'        :   600, 
        'speedOut'       :   200, 
        'overlayShow'    :   true,
        'overlayOpacity' :    0.6,
        'overlayColor'   :   '#333',
        'titlePosition'  :   'inside'
    });
});
</script>

Um Fancybox nun noch mit den Bilder zu verknüpfen muss im A-Tag der Thumbnails die Class "Fancy" hinzugefügt werden:

1
2
<a href="<?php echo $pixlie_table_env['path_pixlie'].$picture['link_get']; ?>_d<?php echo $picture['extension']; ?>"
class="fancy">...</a>

Optional: Damit alle angezeigten Bilder zu einer "zusammenhängenden" Galerie werden und diese per Fancybox durchgeblättert werden können muss eine REL-Eigenschaft in den A-Tag:

1
2
<a rel="group" href="<?php echo $pixlie_table_env['path_pixlie'].$picture['link_get']; ?>_d<?php echo $picture['extension']; ?>"
class="fancy">...</a>

Endstand

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<head>
<script type="text/javascript"src="jquery.fancybox-1.3.4/jquery-1.4.3.min.js"></script>
<script type="text/javascript"src="jquery.fancybox-1.3.4/fancybox/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript"src="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript"src="jquery.fancybox-1.3.4/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<link rel="stylesheet"type="text/css" href="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css"media="screen" />
<script>
$(document).ready(function() {
    $("a.fancy").fancybox({
        'transitionIn'   :   'elastic',
        'transitionOut'  :   'elastic',
        'speedIn'        :   600, 
        'speedOut'       :   200, 
        'overlayShow'    :   true,
        'overlayOpacity' :    0.6,
        'overlayColor'   :   '#333',
        'titlePosition'  :   'inside'
    });
});
</script>
</head>
<body>
<h1>Galerie</h1>
<?php
$response_type 
'php';   //Ausgabe auf php umstellen
include('pixlie.php');    //Einbinden von Pixlie
?>
<h2>Bilder</h2>
<?php foreach ($pixlie_table_file as $picture){ ?>
    <a href="<?php echo $pixlie_table_env['path_pixlie'].$picture['link_get']; ?>_d<?php echo $picture['extension']; ?>" class="fancy">
    <img src="<?php echo $pixlie_table_env['path_pixlie'].$picture['link_get']; ?>_s<?php echo $picture['extension']; ?>
    alt="<?php echo $picture['name']; ?>" />
    </a>
<?php ?>
<h2>Unterordner</h2>
<ul>
    <?php foreach ($pixlie_table_dir as $folder){ ?>
        <li>
        <a href="<?php echo $folder['link_get']; ?>"><?php echo $folder['name']; ?></a>
        </li>
    <?php ?>
<?php 
if(count($pixlie_table_dir)==0){ echo '<li>keine vorhanden</li>'; } ?>
</ul>
<a href="http://www.pixlie2.de"title="Bildergalerie, Script, PHP, Foto, Photo, Bilder, Galerie">
Pixlie - Das kostenlose PHP Bildergalerie Script</a>
</body>

Nun kannst du per Klick auf die Thumbnails die Bilder in der Großansicht bestaunen.


6. Einbinden eines Javascrip-Frameworks (Fancybox 2)

So könnte die Einbindung der Fancybox2 aussehen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<!-- Optionaly include easing and/or mousewheel plugins -->
<script type="text/javascript" src="jquery.fancybox-2.0.3/jquery.easing-1.3.pack.js"></script>
<script type="text/javascript" src="jquery.fancybox-2.0.3/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="jquery.fancybox-2.0.3/jquery.fancybox.css?v=2.0.3" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.fancybox-2.0.3/jquery.fancybox.pack.js?v=2.0.3"></script>

<!-- Optionaly include button and/or thumbnail helpers -->
<link rel="stylesheet" href="jquery.fancybox-2.0.3/helpers/jquery.fancybox-buttons.css?v=2.0.3" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.fancybox-2.0.3/helpers/jquery.fancybox-buttons.js?v=2.0.3"></script>

<link rel="stylesheet" href="jquery.fancybox-2.0.3/helpers/jquery.fancybox-thumbs.css?v=2.0.3" type="text/css" media="screen" />
<script type="text/javascript" src="jquery.fancybox-2.0.3/helpers/jquery.fancybox-thumbs.js?v=2.0.3"></script>
    
<script>

$(document).ready(function() {
    $(".fancy").fancybox({
            maxWidth    : 800,
            maxHeight    : 600,
            fitToView    : false,
            width        : '70%',
            height        : '70%',
            autoSize    : false,
            closeClick    : false,
            openEffect    : 'elastic',
            closeEffect    : 'elastic',
            nextEffect  : 'fade',
            nextSpeed   : 'slow',
            prevEffect  : 'fade',
            prevSpeed   : 'slow',
            mouseWheel  : true,
            helpers    : {
                title    : {
                    type: 'outside'
                }
            }
        
    });
});
</script>

Ich habe in diesem Beispiel einige Einstellungsmöglichkeiten hinzugefügt, damit das Prinzip besser erkennbar ist.


7. Bild x von y unter dem Bild anzeigen

Auf Nachfrage hier eine kleine Anleitung wie Ihr "Bild x von y" im Titel der Fancybox anzeigen könnt. Dazu erweitern wir lediglich die bestehende foreach-Schleife von Pixlie und führen 2 zusätzliche Variablen ein:

In der neuen Variable $pic_amount legen wir durch die count-Funktion die Gesamtanzahl der Bilder im Pixliearray ab. Anschließend wird der Arrayindex des jeweiligen Bildes in der Variable $key zwischengespeichert. (Beginnt bei 0! -> Bildnummer = Arrayindex +1)

WICHTIG: Die Variable $pic_amount muss (um performanter zu Arbeiten) vor der foreach-Schleife und nach dem Include der "pixlie.php" eingefügt werden.

Daraus resultiert dann:

1
2
3
4
5
6
7
8
9
10
<h2>Bilder</h2>
<?php
$pic_amount 
count($pixlie_table_file);    //Gesamtanzahl der Bilder feststellen
foreach ($pixlie_table_file as $key => $picture){ ?>
    <a href="<?php echo $pixlie_table_env['path_pixlie'].$picture['link_get']; ?>_d<?php echo $picture['extension']; ?>
    title="<?php echo ($key 1)." von ".$pic_amount?>" class="fancy">
    <img src="<?php echo $pixlie_table_env['path_pixlie'].$picture['link_get']; ?>_s<?php echo $picture['extension']; ?>
    alt="<?php echo $picture['name']; ?>" />
    </a>
<?php ?>
Pixlie2 - Das kostenlose PHP Bildergalerie Script
Weitere Hilfen findest du in unserem Forum: www.pixlie2.de/forum/
aufheben