Hallo,
ich habe mit dem Gallery Modul, Template AE-Gallery ein Bildgallerie gebaut.
Nun habe ich folgende Fragen:
1. Ich möchte den Countdown bei der automatischen Slideshow NICHT anzeigen, wie mache ich dass?
2. Wenn ich die Slideshow komplett nicht haben will, wo kann ich diese deaktivieren (ausser im Template Script ausschalten.
3. Wir kriege ich die Bildbeschreibungen (Title) unterhalb des Bildes rechts neben den Bildzähler (Über CSS habe ich sie nicht unterhalb des Bildes positionieren können)?
Danke schonmal im Voraus für die Antworten.
(gelöst) Gallery AE Template Fragen über Fragen
(gelöst) Gallery AE Template Fragen über Fragen
Last edited by Anonymous on Thu Sep 30, 2010 1:47 pm, edited 1 time in total.
Re: Gallery AE Template Fragen über Fragen
56 mal gelesen und keiner hat nen Tip?
PS: Mit Slideshow nicht haben wollen meine ich natürlich die Start/Stop Buttons, dass man die autoShow ausstellen kann weiß ich
PS: Mit Slideshow nicht haben wollen meine ich natürlich die Start/Stop Buttons, dass man die autoShow ausstellen kann weiß ich
Re: Gallery AE Template Fragen über Fragen
Hi nOOber hast Du eventuell dein beispiel online oder können wir dein code sehen?
Ich habe das Template nicht installiert und kann dir keine Antworten liefern, daher mehr Info mehr Hilfe
Ich habe das Template nicht installiert und kann dir keine Antworten liefern, daher mehr Info mehr Hilfe
Re: Gallery AE Template Fragen über Fragen
Link posten geht leider nicht weil Auftragsarbeit ... ich stell den code mal hier ein ...
bisher habe ich nur die CSS modifiziert
...
Template Source:
{if !empty($module_message)}{$module_message|escape}{/if}
{if !empty($gallerytitle)}{$gallerytitle}{/if}
{if !empty($gallerycomment)}{$gallerycomment}{/if}
{if $pages > 1}
{$prevpage}
{$nextpage}
{/if}
{if !$hideparentlink && !empty($parentlink)}{$parentlink}{/if}
{if $pages > 1}{$pagelinks}{/if}
{assign var='dirs' value=''}
{assign var='imgs' value=''}
{foreach from=$images item=image}
{if $image->isdir}
{assign var='dirs' value="$dirs
file`\" title=\"`$image->title`\">thumb`\" alt=\"`$image->title`\" />
`$image->title`
"}
{else}
{capture name=images assign=imgs}
{$imgs}
file}">
thumb}" alt="{$image->title}" title="{$image->title}"{if !empty($image->comment)} longdesc="{$image->comment}"{/if} class="image{$image->fileid}">
{/capture}
{/if}
{/foreach}
{if !empty($imgs)}
{$imgs}
{/if}
{$dirs}
...
Template CSS-stylesheet: (gallery styles gelöscht)
.ae-gallery, .ae-gallery * {
margin: 0px;
padding: 0;
}
.ae-gallery {
width: 100%;
margin-bottom: 0px;
margin-top: -30px;
}
.ae-gallery .ae-image-wrapper {
width: 540px;
height: 380px;
margin-bottom: 10px;
position: relative;
overflow: hidden;
}
.ae-gallery .ae-image-wrapper .ae-loader {
position: absolute;
z-index: 10;
top: 48%;
left: 48%;
}
.ae-gallery .ae-image-wrapper .ae-next {
position: absolute;
right: 0;
top: 0;
width: 45%;
height: 100%;
cursor: pointer;
display: block;
z-index: 100;
}
.ae-gallery .ae-image-wrapper .ae-prev {
position: absolute;
left: 0;
top: 0;
width: 45%;
height: 100%;
cursor: pointer;
display: block;
z-index: 100;
}
.ae-gallery .ae-image-wrapper .ae-prev, .ae-gallery .ae-image-wrapper .ae-next {
/* Or else IE will hide it */
background: url(non-existing.jpg)\9
}
.ae-gallery .ae-image-wrapper .ae-prev .ae-prev-image, .ae-gallery .ae-image-wrapper .ae-next .ae-next-image {
background: url(/uploads/images/ad_prev.png);
width: 30px;
height: 30px;
display: none;
position: absolute;
top: 47%;
left: 0;
z-index: 101;
}
.ae-gallery .ae-image-wrapper .ae-next .ae-next-image {
background: url(/uploads/images/ad_next.png);
width: 30px;
height: 30px;
right: 0;
left: auto;
}
.ae-gallery .ae-image-wrapper .ae-image {
position: absolute;
overflow: hidden;
top: 0;
left: 0;
z-index: 9;
}
.ae-gallery .ae-image-wrapper .ae-image .ae-image-description {
position: absolute;
bottom: 1px;
left: 1px;
padding: 7px;
text-align: left;
width: 100%;
z-index: 2;
background: url(../ae-gallery/opa75.png);
color: #000;
}
* html .ae-gallery .ae-image-wrapper .ae-image .ae-image-description {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale, src='../ae-gallery/opa75.png');
}
.ae-gallery .ae-image-wrapper .ae-image .ae-image-description .ae-description-title {
display: block;
}
.ae-gallery .ae-controls {
width:540px;
height: 20px;
font-family : Helvetica, Arial, sans-serif;
font-size : 13px;
font-weight : bold;
color : #666666;
}
.ae-gallery .ae-info {
float: left;
}
.ae-gallery .ae-slideshow-controls {
float: right;
}
.ae-gallery .ae-slideshow-controls .ae-slideshow-start, .ae-gallery .ae-slideshow-controls .ae-slideshow-stop {
padding-left: 7px;
cursor: pointer;
display: inline-block;
text-indent: -500px;
overflow:hidden;
width: 14px;
height: 20px;
background: url(/uploads/images/ad_play.png) 0px -3px no-repeat;
}
.ae-gallery .ae-slideshow-controls .ae-slideshow-stop {
background: url(/uploads/images/ad_stop.png) 0px -3px no-repeat;
}
.ae-gallery .ae-slideshow-controls .ae-slideshow-countdown {
padding-left: 5px;
margin-top:-4px;
font-family : Helvetica, Arial, sans-serif;
font-size : 13px;
font-weight : normal;
color : #999999;
float:right;
}
.ae-gallery .ae-slideshow-running .ae-slideshow-start {
cursor: default;
font-style: italic;
}
.ae-gallery .ae-nav {
width: 540px;
position: relative;
text-align: left;
}
.ae-gallery .ae-forward, .ae-gallery .ae-back {
position: absolute;
top: 0;
height: 70px;
z-index: 10;
}
.ae-gallery .ae-back {
cursor: pointer;
left: -25px;
width: 14px;
display: block;
background: url(/uploads/images/ad_scroll_back.png) 0px 22px no-repeat;
}
.ae-gallery .ae-forward {
cursor: pointer;
display: block;
right: -25px;
width: 14px;
background: url(/uploads/images/ad_scroll_foward.png) 0px 22px no-repeat;
}
.ae-gallery .ae-nav .ae-thumbs {
overflow: hidden;
width: 100%;
padding: 0px 0px;
}
.ae-gallery .ae-thumbs ul {
padding:0px;
}
.ae-gallery .ae-thumbs li {
float: left;
padding:0px 10px 0px 0px !important;
margin:0 0 0 0 !important;
list-style: none;
}
.ae-gallery .ae-thumbs li a {
display: block;
}
.ae-gallery .ae-thumbs li a img {
border: 1px solid #999999;
display: block;
}
.ae-gallery .ae-thumbs li a.ae-active img {
border: 1px solid black;
}
/* Can't do display none, since Opera won't load the images then */
.ae-preloads {
position: absolute;
left: -90000px;
top: -90000px;
}
...
Template JavaScript:
$(function() {
var galleries = $('.ae-gallery').aeGallery({
loader_image: 'modules/Gallery/templates/ae-gallery/loader.gif',
slideshow: {
autostart: false,
speed: 4000,
start_label: 'Start',
stop_label: 'Stop',
stop_on_scroll: false
}
});
});
bisher habe ich nur die CSS modifiziert
...
Template Source:
{if !empty($module_message)}{$module_message|escape}{/if}
{if !empty($gallerytitle)}{$gallerytitle}{/if}
{if !empty($gallerycomment)}{$gallerycomment}{/if}
{if $pages > 1}
{$prevpage}
{$nextpage}
{/if}
{if !$hideparentlink && !empty($parentlink)}{$parentlink}{/if}
{if $pages > 1}{$pagelinks}{/if}
{assign var='dirs' value=''}
{assign var='imgs' value=''}
{foreach from=$images item=image}
{if $image->isdir}
{assign var='dirs' value="$dirs
file`\" title=\"`$image->title`\">thumb`\" alt=\"`$image->title`\" />
`$image->title`
"}
{else}
{capture name=images assign=imgs}
{$imgs}
file}">
thumb}" alt="{$image->title}" title="{$image->title}"{if !empty($image->comment)} longdesc="{$image->comment}"{/if} class="image{$image->fileid}">
{/capture}
{/if}
{/foreach}
{if !empty($imgs)}
{$imgs}
{/if}
{$dirs}
...
Template CSS-stylesheet: (gallery styles gelöscht)
.ae-gallery, .ae-gallery * {
margin: 0px;
padding: 0;
}
.ae-gallery {
width: 100%;
margin-bottom: 0px;
margin-top: -30px;
}
.ae-gallery .ae-image-wrapper {
width: 540px;
height: 380px;
margin-bottom: 10px;
position: relative;
overflow: hidden;
}
.ae-gallery .ae-image-wrapper .ae-loader {
position: absolute;
z-index: 10;
top: 48%;
left: 48%;
}
.ae-gallery .ae-image-wrapper .ae-next {
position: absolute;
right: 0;
top: 0;
width: 45%;
height: 100%;
cursor: pointer;
display: block;
z-index: 100;
}
.ae-gallery .ae-image-wrapper .ae-prev {
position: absolute;
left: 0;
top: 0;
width: 45%;
height: 100%;
cursor: pointer;
display: block;
z-index: 100;
}
.ae-gallery .ae-image-wrapper .ae-prev, .ae-gallery .ae-image-wrapper .ae-next {
/* Or else IE will hide it */
background: url(non-existing.jpg)\9
}
.ae-gallery .ae-image-wrapper .ae-prev .ae-prev-image, .ae-gallery .ae-image-wrapper .ae-next .ae-next-image {
background: url(/uploads/images/ad_prev.png);
width: 30px;
height: 30px;
display: none;
position: absolute;
top: 47%;
left: 0;
z-index: 101;
}
.ae-gallery .ae-image-wrapper .ae-next .ae-next-image {
background: url(/uploads/images/ad_next.png);
width: 30px;
height: 30px;
right: 0;
left: auto;
}
.ae-gallery .ae-image-wrapper .ae-image {
position: absolute;
overflow: hidden;
top: 0;
left: 0;
z-index: 9;
}
.ae-gallery .ae-image-wrapper .ae-image .ae-image-description {
position: absolute;
bottom: 1px;
left: 1px;
padding: 7px;
text-align: left;
width: 100%;
z-index: 2;
background: url(../ae-gallery/opa75.png);
color: #000;
}
* html .ae-gallery .ae-image-wrapper .ae-image .ae-image-description {
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale, src='../ae-gallery/opa75.png');
}
.ae-gallery .ae-image-wrapper .ae-image .ae-image-description .ae-description-title {
display: block;
}
.ae-gallery .ae-controls {
width:540px;
height: 20px;
font-family : Helvetica, Arial, sans-serif;
font-size : 13px;
font-weight : bold;
color : #666666;
}
.ae-gallery .ae-info {
float: left;
}
.ae-gallery .ae-slideshow-controls {
float: right;
}
.ae-gallery .ae-slideshow-controls .ae-slideshow-start, .ae-gallery .ae-slideshow-controls .ae-slideshow-stop {
padding-left: 7px;
cursor: pointer;
display: inline-block;
text-indent: -500px;
overflow:hidden;
width: 14px;
height: 20px;
background: url(/uploads/images/ad_play.png) 0px -3px no-repeat;
}
.ae-gallery .ae-slideshow-controls .ae-slideshow-stop {
background: url(/uploads/images/ad_stop.png) 0px -3px no-repeat;
}
.ae-gallery .ae-slideshow-controls .ae-slideshow-countdown {
padding-left: 5px;
margin-top:-4px;
font-family : Helvetica, Arial, sans-serif;
font-size : 13px;
font-weight : normal;
color : #999999;
float:right;
}
.ae-gallery .ae-slideshow-running .ae-slideshow-start {
cursor: default;
font-style: italic;
}
.ae-gallery .ae-nav {
width: 540px;
position: relative;
text-align: left;
}
.ae-gallery .ae-forward, .ae-gallery .ae-back {
position: absolute;
top: 0;
height: 70px;
z-index: 10;
}
.ae-gallery .ae-back {
cursor: pointer;
left: -25px;
width: 14px;
display: block;
background: url(/uploads/images/ad_scroll_back.png) 0px 22px no-repeat;
}
.ae-gallery .ae-forward {
cursor: pointer;
display: block;
right: -25px;
width: 14px;
background: url(/uploads/images/ad_scroll_foward.png) 0px 22px no-repeat;
}
.ae-gallery .ae-nav .ae-thumbs {
overflow: hidden;
width: 100%;
padding: 0px 0px;
}
.ae-gallery .ae-thumbs ul {
padding:0px;
}
.ae-gallery .ae-thumbs li {
float: left;
padding:0px 10px 0px 0px !important;
margin:0 0 0 0 !important;
list-style: none;
}
.ae-gallery .ae-thumbs li a {
display: block;
}
.ae-gallery .ae-thumbs li a img {
border: 1px solid #999999;
display: block;
}
.ae-gallery .ae-thumbs li a.ae-active img {
border: 1px solid black;
}
/* Can't do display none, since Opera won't load the images then */
.ae-preloads {
position: absolute;
left: -90000px;
top: -90000px;
}
...
Template JavaScript:
$(function() {
var galleries = $('.ae-gallery').aeGallery({
loader_image: 'modules/Gallery/templates/ae-gallery/loader.gif',
slideshow: {
autostart: false,
speed: 4000,
start_label: 'Start',
stop_label: 'Stop',
stop_on_scroll: false
}
});
});
Re: Gallery AE Template Fragen über Fragen
Antwort 1:
Hier sollte plugin parameter rein.
Was meinst Du mit deaktivieren, rufst Du das Gallery modul direkt im Template auf?
Antwort 3:
Weitere Antworten findest Du sicher unter http://coffeescripter.com/code/ad-gallery/
Hier sollte plugin parameter rein.
Antwort 2:
$(function() {
var galleries = $('.ae-gallery').aeGallery({
loader_image: 'modules/Gallery/templates/ae-gallery/loader.gif',
slideshow: {
autostart: false,
speed: 4000,
start_label: 'Start',
stop_label: 'Stop',
countdown: false,
stop_on_scroll: false
}
});
});
Was meinst Du mit deaktivieren, rufst Du das Gallery modul direkt im Template auf?
Antwort 3:
Irgendwo im Gallery template einfügen und mit CSS stylen.
$(function() {
var galleries = $('.ae-gallery').aeGallery({
loader_image: 'modules/Gallery/templates/ae-gallery/loader.gif',
description_wrapper: $('#beschreibung') ,
slideshow: {
autostart: false,
speed: 4000,
start_label: 'Start',
stop_label: 'Stop',
stop_on_scroll: false
}
});
});
Weitere Antworten findest Du sicher unter http://coffeescripter.com/code/ad-gallery/
Re: Gallery AE Template Fragen über Fragen
Vielen Dank für die Hilfe, so langsam krieg ichs hin.