[gallery_creator] Anderes bzw. eigenes Template?
Hallo zusammen,
zunächst einmal danke für die wirklich gute Erweiterung gallery_creator!!!
Nun zu meiner Frage:
Ist es möglich das Template von der Erweiterung [ImageFlow] in gallery_creator zu nutzen?
Warum ich nicht Imageflow selber nutze?
ImageFlow ist zwar echt toll aber hat leider bestimmte Features nicht die gallery_creator mitbringt z.B. die einfache und schnell Sortierung der Bilder einer gallery!
Kann ich das Template einfach einbinden? was ist hierbei zu beachten?? bzw. was ist zu tun?? Ist es überhaupt möglich?
Fragen über Fragen aber ich hoffe hier auf ein paar antworten ;)
imageflow-template für gallery_creator
Hallo acidburn
Ich bin so nett. :) Hier das Template in html5-Version. Vorher aber die Erweiterung imagflow installieren. Die Imageflow-Settings wie opacity, usw. musst du im Template vornehmen. background-color in deinem Stylesheets. Gruss Marko
Code:
<!-- indexer::stop -->
<?php
/*
* Important!!!!
* This template requires the contao-extension "imageflow"
*
*/
$GLOBALS['TL_JAVASCRIPT'][] = 'system/modules/gallery_creator/html/gallery_creator_fe.js';
?>
<?php if (!$this->Input->get('vars')): ?>
<!--start album-overview-->
<div class="<?php echo $this->class; ?> gallery_creator block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>
<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>
<?php echo $this->pagination; ?>
<?php if (count($this->arrAlbums)>0): ?>
<ul class="list_albums">
<?php foreach ($this->arrAlbums as $Album): ?>
<li class="level_1 block row" style="<?php echo $this->imagemargin; ?>">
<div class="tstamp block">[<?php echo $Album["event_date"]; ?>]</div>
<div class="col_1">
<figure class="image_container" onmouseover="<?php echo $Album["thumbMouseover"]; ?>">
<?php if ($Album["href"]): ?>
<a href="<?php echo $Album["href"]; ?>" title="<?php echo $Album["title"]; ?>">
<?php endif; ?>
<img src="<?php echo $Album["thumb_src"]; ?>" alt="<?php echo $Album["alt"]; ?>" class="<?php echo $Album["class"]; ?>">
<?php if ($Album["href"]): ?>
</a>
<?php endif; ?>
</figure>
</div>
<div class="col_2">
<h2><?php echo $Album["name"]; ?></h2>
<?php if ($Album["count"]): ?>
<p class="count_pics"><?php echo $Album["count"]; ?> <?php echo $GLOBALS["TL_LANG"]["gallery_creator"]["pictures"]; ?></p>
<?php endif; ?>
<?php if ($Album["count_subalbums"]): ?>
<p class="count_pics"><?php echo $Album["count_subalbums"]; ?> <?php echo $GLOBALS['TL_LANG']['gallery_creator']['subalbums']; ?></p>
<?php endif; ?>
<?php if ($Album["comment"]): ?>
<p class="album_comment"><?php echo $Album["comment"]; ?></p>
<?php endif; ?>
</div>
<div class="clr"><!--clearing-box--></div>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</div>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function() {
//Weiterleitung bei Klick auf das, das Bild enthaltende Listenelement
$$("ul.list_albums li.level_1").addEvent('click', function() {
var href = this.getElement('a').get('href');
var myURI = new URI();
var redirect = myURI.get('scheme') + '://' + myURI.get('host') + myURI.get('directory') + href;
window.parent.location=redirect;
});
/**
* Cursor über h2
*/
$$('.gallery_creator li.level_1').setStyle('cursor', 'pointer');
//bei domready erhält das erste Listenelement einen overlay
$$(".gallery_creator ul.list_albums").getFirst("li").addClass('active');
//Klassenzuweisung
$$(".gallery_creator ul.list_albums li.level_1").addEvent('mouseover', function() {
$$(".gallery_creator ul.list_albums").getFirst("li").removeClass('active');
this.addClass('active');
});
//Klassenentfernung
$$(".gallery_creator ul.list_albums li.level_1").addEvent('mouseout', function() {
this.removeClass('active');
});
});
//--><!]]>
</script>
<!--end album-overview-->
<?php endif; ?>
<?php if ($this->Input->get('vars')): ?>
<?php
//Load image Flow js & css
$GLOBALS['TL_CSS'][] = 'plugins/imageflow/imageflow.css';
$GLOBALS['TL_JAVASCRIPT'][] = 'plugins/imageflow/imageflow.js';
?>
<!--start detailview-->
<div class="<?php echo $this->class; ?> gallery_creator block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>
<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>
<?php if ($this->backLink): ?>
<div class="backLink"><a href="<?php echo $this->backLink; ?>" title="zurück">« <?php echo $GLOBALS['TL_LANG']['gallery_creator']['back_to_general_view']; ?></a></div>
<?php endif; ?>
<?php if ($this->Albumname): ?>
<h2><?php echo $this->Albumname; ?></h2>
<?php endif; ?>
<?php if ($this->error): ?>
<?php foreach ($this->error as $errorMessage): ?>
<p><?php echo $errorMessage; ?></p>
<?php endforeach; ?>
<?php return; ?>
<?php endif; ?>
<?php echo $this->pagination; ?>
<?php if ($this->subalbums): ?>
<!-- Unteralben anzeigen -->
<div class="subalbums">
<h3>Unteralben von: <?php echo $this->Albumname; ?></h3>
<ul class="list_albums">
<?php foreach ($this->subalbums as $Subalbum): ?>
<li class="level_1 block row" style="<?php echo $this->imagemargin; ?>">
<div class="tstamp block">[<?php echo $Subalbum["event_date"]; ?>]</div>
<div class="col_1">
<figure class="image_container" onmouseover="<?php echo $Album["thumbMouseover"]; ?>">
<?php if ($Subalbum["href"]): ?>
<a href="<?php echo $Subalbum["href"]; ?>" title="<?php echo $Subalbum["title"]; ?>">
<?php endif; ?>
<img src="<?php echo $Subalbum["thumb_src"]; ?>" alt="<?php echo $Subalbum["alt"]; ?>" class="<?php echo $Subalbum["class"]; ?>">
<?php if ($Subalbum["href"]): ?>
</a>
<?php endif; ?>
</figure>
</div>
<div class="col_2">
<h2><?php echo $Subalbum["name"]; ?></h2>
<?php if ($Subalbum["count"]): ?>
<p class="count_pics"><?php echo $Album["count"]; ?> <?php echo $GLOBALS["TL_LANG"]["gallery_creator"]["pictures"]; ?></p>
<?php endif; ?>
<?php if ($Subalbum["count_subalbums"]): ?>
<p class="count_pics"><?php echo $Subalbum["count_subalbums"]; ?> <?php echo $GLOBALS["TL_LANG"]["gallery_creator"]["subalbums"]; ?></p>
<?php endif; ?>
<?php if ($Subalbum["comment"]): ?>
<p class="album_comment"><?php echo $Subalbum["comment"]; ?></p>
<?php endif; ?>
</div>
<div class="clr"><!--clearing-box--></div>
</li>
<?php endforeach;?>
</ul>
</div>
<!-- Ende Unteralben anzeigen -->
<?php endif; ?>
<!--detailview imageFlow-->
<?php if ($this->arrPictures): ?>
<?php $imageNumber=0; ?>
<div id="myImageFlow" class="imageflow">
<?php foreach ($this->arrPictures as $Picture): ?>
<?php $imageNumber++; ?>
<img rel="myImageFlow" src="<?php echo $Picture["href"]; ?>" longdesc="<?php echo $Picture["href"]; ?>" width="<?php echo $Picture["image_width"]; ?>" height="<?php echo $Picture["image_height"]; ?>" alt="<?php echo $Picture["comment"]; ?>">
<?php endforeach;?>
</div>
<?php endif; ?>
</div>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function()
{
new ImageFlow().init({
ImageFlowID: 'myImageFlow',
imagePath: '../../',
// do some changes below this to change the behavior of imageflow
// learn more about at: http://finnrudolph.de/ImageFlow/Documentation
imagesHeight: 0.5,
reflectPath: 'plugins/imageflow/',
reflectionPNG: false,
aspectRatio: 1.7,
reflections: false,
//reflectionGET: '&height=20%',
//reflectionP: 0.2,
imageFocusM:1,
imageFocusMax: 2,
slideshowAutoplay: false,
startID: 1,
animationSpeed: 100,
preloadImages: true,
startAnimation: true,
slider: true,
slideshow:true,
slideshowSpeed:4000,
slideshowAutoplay:true,
buttons: true,
captions: true,
opacity: false,
circular: true,
glideToStartID: true,
xStep:150,
onClick: function(event)
{
var position = 0;
var images = [];
document.getElements(('img[rel='+this.getAttribute('rel')+']')).each( function(el, index) {
images.include([el.getAttribute('longdesc'), el.getAttribute('alt')]);
if (this == el)
position = index;
}.bind(this));
window.Mediabox ? Mediabox.open(images, position) : Slimbox.open(images, position);
}
});
});
//--><!]]>
</script>
<!--end detailview-->
<?php endif; ?>
<!-- indexer::continue -->
