Druckbare Version
Hallo,
habe bisher die jsGallery2 ganz meinen Wünschen anpassen können, jedoch scheitere ich an 2 Dingen:
1. die Navigationspfeile (#prev/#next) im vergrößerten Bild sollen dauerhaft sichtbar sein und
2. unterhalb des großen Bildes dargestellt werden
Vielen Dank für Hinweise
Hallo moron,
die beiden Pfeile sind Hintergrundbilder innerhalb von a-Tags, die innerhalb von #bigimageContainer liegen. Sie haben leider keine ID oder Klasse; du musst sie in deinem CSS also anderweitig ansprechen.
Mit Firebug kannst du dir die CSS-Eigenschaften, die im Skript selbst definiert sind und in keiner CSS stehen, ansehen. Mit der Sichtbarkeit ist das so eine Sache. Das Skript reagiert auf den Mouse-Zeiger. Je weiter weg er von dem Pfeil ist, desto weniger ist der Pfeil zu sehen. Dazu ändert das Skript die Werte von opacity. Das lässt sich mit Firebug ganz gut beobachten.
Viele Grüße
Daniel
danke für die tipps,
das unsichtbarkeits-problem habe ich dann auch gelöst: ich habe das js (\system\modules\pk_jsgallery2\html\js\jsgallery2. js) verändert und dort den opacity anfangs-wert auf 0,5 gesetzt: die pfeile werden also nie ganz unsichtbar.
mit einem padding des #bigimage-divs nach unten und verschieben der nav-elemente mit "bottom: 0px" im js würde es wohl gehen.
leider muss ich mich aber davon verabschieden, denn um das bild "muss" ein schatten...
gruß
moron
Hallo zusammen,
ich hab das Problem, dass die Pfeile nie sichtbar sind. Ich kann diese nur sichtbar machen, wenn ich von Hand visibility: visible eingebe. Aber ich weis nicht wo ich das verändern muss das es dauerhaft funktioniert.
Bin für entsprechende Tipps Dankbar.
Gruß Dirk
Habs so probiert,
aber das visibility wird durchCode:#prev { visibility: visible;
float: left;
margin-left: 5px;
outline: none;
}
#next {
visibility: visible;
float: right;
margin-right: 5px;
outline: none;
}
überschrieben.Code:element.style {visibility: hidden;opacity: 0;}
ich denke, dass muss im js überschrieben werden. Aber ich weis nicht wo.
Kann mir jemand helfen, danke.
Gruß Dirk
Hab mir den js code mal angesehen und denke es müsste hier zu finden sein???
Code:/** * Navigates to given page and selects the first image of it.
* Also hides the handles (if set).
* @param {Integer} pageNumber, index of the target page (0-n)
* @param {HTMLElement} selectImage, optionally receives a particular image to select
*/
gotoPage: function(pageNumber, selectImage) {
//if we like to select another image on that page than the first one
selectImage = $pick(selectImage, this.thumbs[pageNumber * this.imagesPerPage]);
var lastPage = Math.ceil(this.thumbs.length / this.imagesPerPage);
if(pageNumber >= 0 && pageNumber < lastPage) {
this.pageContainer.set('tween', {
duration: this.options.pageSpeed,
transition: Fx.Transitions.Quint.easeInOut
});
this.pageContainer.tween('margin-left', this.pageContainer.getFirst().getSize().x * pageNumber * -1);
this.currentPageNumber = pageNumber;
this.select(selectImage);
//update handles
if($defined(this.options.prevHandle)) {
new Fx.Tween(this.options.prevHandle, {duration:this.options.fadeSpeed * 2}).start('opacity', pageNumber == 0 ? 0 : 1);
}
if($defined(this.options.nextHandle)) {
new Fx.Tween(this.options.nextHandle, {duration:this.options.fadeSpeed * 2}).start('opacity', pageNumber == lastPage - 1 ? 0 : 1);
}
}
}
Im Backend hab ich noch die Datei mod_jsgallery2_neu.tpl, weis aber nicht wo ich dies ansprechen kann oder wo ich diese finde.
Hier wird das visibility definiert.
Code:<?php if ($this->headline): ?><<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>><?php endif; ?><?php if(is_array($this->elements)): ?>
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<div id="show<?php echo $this->id; ?>" class="jsgallery">
<div id="pagerContainer">
<div id="thumbs">
<div id="pageContainer">
<?php
$count = 0;
?>
<?php for ( $x = 0; $x < $this->siteCount; $x++ ): ?>
<div id="page<?php echo $x; ?>" class="page">
<?php for($y = $count; $y < $count+$this->maxThumbs; $y++): ?>
<?php if($y < $this->ThumbsTotal): ?>
<div id="image<?php echo $this->elements[$y]['id']; ?>" class="thumbnail">
<a href="?image=<?php echo $this->elements[$y]['src']; ?>" rel="<?php echo $this->elements[$y]['src']; ?>"><img src="<?php echo $this->elements[$y]['thumb_src']; ?>" width="<?php echo $this->elements[$y]['thumb_size'][0]; ?>" height="<?php echo $this->elements[$y]['thumb_size'][1]; ?>" alt="<?php echo $this->elements[$y]['alt']; ?>" title="<?php echo $this->elements[$y]['alt']; ?>" /></a>
</div>
<?php endif; ?>
<?php endfor; ?>
</div>
<?php $count+=$this->maxThumbs; ?>
<?php endfor; ?>
</div>
</div>
<?php if($this->Handle): ?>
<a style="visibility: hidden;" href="#" onclick="myGallery.prevPage(); return false;" id="prev"><img src="<?php if($this->ThumbPrevHandle): echo $this->ThumbPrevHandle; ?><?php else: ?>system/modules/pk_jsgallery2/html/prev_page.png<?php endif; ?>" alt="back" style="border: 0px;"/></a>
<a style="visibility: hidden;" href="#" onclick="myGallery.nextPage(); return false;" id="next"><img src="<?php if($this->ThumbNextHandle): echo $this->ThumbNextHandle; ?><?php else: ?>system/modules/pk_jsgallery2/html/next_page.png<?php endif; ?>" alt="back" style="border: 0px;"/></a>
<?php endif; ?>
</div>
<div id="bigimageContainer">
<img src="<?php echo $this->elements[0]['src']; ?>" width="<?php echo $this->elements[0]['img_size'][0]; ?>" height="<?php echo $this->elements[0]['img_size'][1]; ?>" alt="<?php echo $this->elements[0]['alt']; ?>" id="bigImage" />
</div>
<div id="imgDescription"></div>
</div>
</div>
<?php endif; ?>
gelöst und gefunden:
/Contao_01/system/modules/pk_jsgallery2/templates/mod_jsgallery2.tpl
und hier geändert.