<?php
/**
* @license GNU/GPL http://www.gnu.org/copyleft/gpl.html
* Author: MC_J
* Email: mcj.contact@gmail.com
* Version: 1.0
* /***
***/
// no direct access
defined( '_JEXEC' ) or
die( 'Restricted access' ); $rootfolder = $params->get( 'rootfolder', "" );
$folder = $params->get( 'folder', "" );
if (class_exists('JPlatform')) {$jvera =JPlatform
::RELEASE;}
$ordner = constant("JPATH_ROOT")."/".$rootfolder."/".$folder."/"; $thumbs = constant("JPATH_ROOT")."/".$rootfolder."/".$folder."/thumbs"."/"; ?>
<style>
.g_container{
position: fixed;
height:10%;
min-height:75px;
bottom:0;
left:0;
width:100%;
}
#g_nav img{
max-height:100%;
opacity:0.7;
float:left;
margin-right:5px;
}
#g_nav{
width:100%;
height:100%;
transition: bottom 1s;
}
.g_thumbs{
height:100%;
position:relative;
transition: bottom 1s;
}
#gallery{
padding-bottom:5%;
height:95%;
width:100%;
position:relative;
}
.g_preview{
max-height:100%;
max-width:100%;
position:relative;
top: 0;
}
.gb_next, .gb_prev{
width:30px;
height:30px;
position:relative;
bottom:-50%;
background-color:#fff;
}
.gb_next{
float:right;
}
.gb_prev{
float:left;
}
</style>
<?php
function createThumbs( $pathToImages, $pathToThumbs, $thumbWidth )
{
if(is_dir($pathToThumbs) == false) {
mkdir($pathToThumbs, 0777); }
// open the directory
//loop through it, looking for any/all JPG files:
while (false !== ($fname = readdir( $dir ))) { // parse path for the extension
$info = pathinfo($pathToImages . $fname); // continue only if this is a JPEG image
{
{
// echo "Thumb exists <br />";
}else{
// echo "Creating thumbnail for {$fname} <br />";
// load image and get image size
// calculate thumbnail size
$new_width = $thumbWidth;
$new_height = floor( $height * ( $thumbWidth / $width ) );
// create a new temporary image
// copy and resize old image into new image
imagecopyresized( $tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height ); // save thumbnail into a file
imagejpeg( $tmp_img, "{$pathToThumbs}{$fname}" ); }
}
}
// close the directory
}
// call createThumb function and pass to it as parameters the path
// to the directory that contains images, the path to the directory
// in which thumbnails will be placed and the thumbnail's width.
// We are assuming that the path will be a relative path working
// both in the filesystem, and through the web for links
createThumbs($ordner,$thumbs,300);
?>
<div id="gallery">
<div class="gb_next">
</div>
<div class="gb_prev">
</div>
<?php
// Ordnername
//auch komplette Pfade möglich ($ordner = "download/files";)
// Ordner auslesen und Array in Variable speichern
$allebilder = scandir($ordner); // Sortierung A-Z // Sortierung Z-A mit scandir($ordner, 1)
?>
<img src="<?php echo $rootfolder."/".$folder."/".$allebilder[2];?>" alt="" style="display:none;" class="g_preview"/>
<div class="loading">
<span>Loading...</span>
</div>
<div class="g_container">
<div id="g_nav" class="g_navigation">
<div class="g_thumbs">
<?php
// Schleife um Array "$alledateien" aus scandir Funktion auszugeben
// Einzeldateien werden dabei in der Variabel $datei abgelegt
foreach ($allebilder as $bild) {
// Zusammentragen der Dateiinfo
$bildinfo = pathinfo($ordner."/".$bild); //Folgende Variablen stehen nach pathinfo zur Verfügung
// $dateiinfo['filename'] =Dateiname ohne Dateiendung *erst mit PHP 5.2
// $dateiinfo['dirname'] = Verzeichnisname
// $dateiinfo['extension'] = Dateityp -/endung
// $dateiinfo['basename'] = voller Dateiname mit Dateiendung
// Größe ermitteln für Ausgabe
//1024 = kb | 1048576 = MB | 1073741824 = GB
// scandir liest alle Dateien im Ordner aus, zusätzlich noch "." , ".." als Ordner
// Nur echte Dateien anzeigen lassen und keine "Punkt" Ordner
// _notes ist eine Ergänzung für Dreamweaver Nutzer, denn DW legt zur besseren Synchronisation diese Datei in den Orndern ab
// Thumbs.db ist eine Ergänzung unsichtbare Dateiergänzung die von ACDSee kommt
// um weitere ungewollte Dateien von der Anzeige auszuschließen kann man die if Funktion einfach entsprechend erweitern
if ($bildinfo['extension'] == "jpg" || $bildinfo['extension'] == "JPG" || $bildinfo['extension'] == "JPEG" || $bildinfo['extension'] == "jpeg") {
?>
<img src="<?php echo $rootfolder."/".$folder."/thumbs/".$bildinfo['basename'];?>" alt="/<?php echo $rootfolder."/".$folder."/".$bildinfo['basename'];?>" />
<?php
};
};
?>
</div>
</div>
</div>
</div>
<script>
var j = jQuery.noConflict();
//the loading image
var jloader = j('.loading');
//the ul element
var jlist = j('#g_nav');
//the current image being shown
var jcurrImage = j('#gallery').children('img:first');
var jbtn_next = j('.gb_next');
var jbtn_prev = j('.gb_prev');
var current = 1;
var jthumbnav = j('.g_thumbs');
var jelem = j('.g_container');
var jthumbs_wrapper = jelem.find('.g_navigation');
var jthumbs = jthumbs_wrapper.children(':first');
j('<img>').load(function(){
jloader.hide();
jcurrImage.fadeIn(2000);
}).attr('src',jcurrImage.attr('src'));
j(window).load(function() {
buildThumbs();
});
function buildThumbs(){
var jelem = j('.g_container');
var jthumbs_wrapper = jelem.find('.g_navigation');
var jthumbs = jthumbs_wrapper.children(':first');
//each thumb has 180px and we add 3 of margin
var jruntime = jthumbs.find('img').length;
var tempWidth = 0;
// alert(j(".g_thumbs img:nth-child(1)").height());
for(i=1;i<=jruntime;i++)
{
tempWidth = tempWidth + j(".g_thumbs img:nth-child("+i+")").width() + 5;
}
var finalW = jthumbs.find('img').length * 183;
var finalW = tempWidth ;
jthumbs.css('width',finalW + 'px');
//make this element scrollable
makeScrollable(jthumbs_wrapper,jthumbs);
}
j( ".g_thumbs img:nth-child(1)" ).addClass('g_active');
j( ".g_thumbs img:nth-child(2)" ).addClass('g_next');
jlist.find('.g_thumbs img').bind('click',function(){
var jthis = j(this);
var jnext = jthis.next(1);
var jprev = jthis.prev(1);
document.location.href="#gallery"
jthis.addClass('g_active')
jthis.nextAll().removeClass('g_active');
jthis.prevAll().removeClass('g_active');
jnext.addClass('g_next');
jnext.nextAll().removeClass('g_next');
jnext.prevAll().removeClass('g_next');
jprev.addClass('g_prev');
jprev.nextAll().removeClass('g_prev');
jprev.prevAll().removeClass('g_prev');
jloader.show();
j('<img class="g_preview"/>').load(function(){
var jthis = j(this);
var jcurrImage = j('#gallery').children('img:first');
jthis.insertBefore(jcurrImage);
jloader.hide();
jcurrImage.fadeOut(0,function(){
j(this).remove();
});
}).attr('src',jthis.attr('alt'));
}).bind('mouseenter',function(){
j(this).stop().animate({'opacity':'1'});
}).bind('mouseleave',function(){
j(this).stop().animate({'opacity':'0.7'});
});
jlist.bind('mouseenter',function(){
j( jthumbnav ).css('bottom','0');
});
jlist.bind('mouseleave',function(){
j( jthumbnav ).css('bottom','-75%');
});
j( document ).ready(function(){
j( jthumbnav ).css('bottom','-75%');
});
function makeScrollable(jouter, jinner){
var extra = 800;
//Get menu width
var divWidth = jouter.width();
//Remove scrollbars
jouter.css({
overflow: 'hidden',
});
//Find last image in container
var lastElem = jinner.find('img:last');
jouter.scrollLeft(0);
//When user move mouse over menu
jouter.unbind('mousemove').bind('mousemove',function(e){
var containerWidth = lastElem[0].offsetLeft + lastElem.outerWidth() + 2*extra;
var left = (e.pageX - jouter.offset().left) * (containerWidth-divWidth) / divWidth - extra;
jouter.scrollLeft( left );
});
}
jbtn_next.bind('click',function() {
var je_next = jthumbnav.find('.g_next');
jloader.show();
alert(je_next.attr('alt'));
j('<img class="g_preview"/>').load(function(){
var jcurrImage = j('#gallery').children('img:first');
je_next.insertBefore(jcurrImage);
jloader.hide();
jcurrImage.fadeOut();
}).attr('src',je_next.attr('alt'));
});
jbtn_prev.bind('click',showPrev);
function showPrev(){
--current;
var je_next = jthumbnav.find('.g_thumbs:nth-child('+current+')');
if(je_next.length == 0){
current = jthumbnav.find('.g_thumbs').length;
je_next = jthumbnav.find('.g_thumbs:nth-child('+current+')');
}
jloader.show();
j('<img class="preview"/>').load(function(){
var jnewimg = j(this);
var jcurrImage = j('#gallery').children('img:first');
$newimg.insertBefore(jcurrImage);
jloader.hide();
jcurrImage.fadeOut(2000,function(){j(this).remove();});
}).attr('src',je_next.find('img').attr('alt'));
}
j( window ).resize( function(){
buildThumbs();
});
j( window ).load(function(){
setTimeout(function(){
buildThumbs();
},50);
});
</script>