| Autor |
Nachricht |
mitapita
Threadersteller
Dabei seit: 02.08.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 25.08.2010 02:15
Titel jquery galerie anpassen |
  |
|
schönen guten tag,
nachdem ich mich durch galerien noch und nöcher gekämpft habe, fand ich eine möglichkeit ohne flash, die mir sehr gefällt und mit meinem noch recht begrenztem wissen sehr gut auf mein layout anpassbar ist.
die galerie nennt sich "simple photo viewer" (hat nichts mit "simpleviewer" und verwandten zu tun) und ist mit jquery zu bewerkstelligen. ich habe jetzt also den vorteil, dass ein galeriethema nur eine pogrammierte seite braucht, einen schönen fadein/fadeout effekt hat und kein flash enthalten ist.
bis jetzt kann ich zwischen den bilden mit den thumbs wechseln.
was ich nun gern hätte:
die navigation zum nächsten bild soll der einfachheit halber auch (zusätzlich zu den htumbs) über das grosse bild geschehen. zurück brauch ich nicht. nur vor.
wie kann ich das machen?
| Code: |
<body>
<div id="obenmenue">
<img src="img/fv_2_solo25.png" />
</div>
<div id="seitenmenue">
<table width="150" border="0" bordercolor="" cellpadding="0" cellspacing="10" >
... menü eben ...
</div>
<ul id="inhalt">
<li><img src="img/remade_1.jpg"/></li>
<li><img src="img/remade_2.jpg"/></li>
<li><img src="img/remade_3.jpg"/></li>
<li><img src="img/remade_4.jpg"/></li>
<li><img src="img/remade_5.jpg"/></li>
<li><img src="img/remade_6.jpg"/></li>
<li><img src="img/remade_7.jpg"/></li>
<li><img src="img/remade_8.jpg"/></li>
</ul>
<ul id="untenmenue">
<li><a href="javascript:void(0);"><img src="img/thumbs/remade_1.jpg"/> </a></li>
<li><a href="javascript:void(0);"><img src="img/thumbs/remade_2.jpg"/> </a></li>
<li><a href="javascript:void(0);"><img src="img/thumbs/remade_3.jpg"/> </a></li>
<li><a href="javascript:void(0);"><img src="img/thumbs/remade_4.jpg"/> </a></li>
<li><a href="javascript:void(0);"><img src="img/thumbs/remade_5.jpg"/> </a></li>
<li><a href="javascript:void(0);"><img src="img/thumbs/remade_6.jpg"/> </a></li>
<li><a href="javascript:void(0);"><img src="img/thumbs/remade_7.jpg"/> </a></li>
<li><a href="javascript:void(0);"><img src="img/thumbs/remade_8.jpg"/> </a></li>
</body>
</html>
|
sieht so schön einfach aus. so sollte es nach mögichkeit auch bleiben. 
freu mich auf tipps.
|
|
| |
  |
 |
mitapita
Threadersteller
Dabei seit: 02.08.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mi 25.08.2010 22:10
Titel
|
|
|
|
keiner ne idee?!
|
|
| |
|
|
|
Anzeige
|
|
|
DerM
Dabei seit: 18.01.2009
Ort: -
Alter: 42
Geschlecht: 
|
Verfasst Do 26.08.2010 10:24
Titel
|
|
|
mal ganz davon abgsehen, das dein letztes "UL" nicht geschlossen ist!!!
Wieso legst Du nicht einfach ne "Weiter" Grafik über deinen Inhalt? Der gibts Du dann einfach den Click / Live / Delegate Aufruf den aktuellen Bildindex plus 1 darzustellen. Wenn der Aktuelle Index = Anzahl Bilder ist, dann wieder auf den Anfang zurück ..
|
|
| |
|
|
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht:
|
Verfasst Do 26.08.2010 10:32
Titel
|
|
|
Wenn er eine vorgefertigte galerie benutzt, wird es aller Wahrscheinlichkeit nach eine "next()" funktion geben, die diese Dinge automatisch tut.
@mitapita: Da fehlt einiges in deinem Sourcecode (nämlich vor allem der Javascript Teil). Bitte poste den Rest auch noch.
|
|
| |
|
|
mitapita
Threadersteller
Dabei seit: 02.08.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 26.08.2010 15:32
Titel
|
|
|
@derm: mein </ul> ist wohl weggehoppelt. jedenfalls ist es jetzt wieder da. schussel ich. kannst du mir vielleicht deinen aufruf mal als code geben? ich bin noch nicht soweit das selbst zu können.
@sahnemuh: die galerie ist wirklich sehr einfach gehalten und soweit ich das bei dem kurzen code überblicke, gibts da eben keine "next" funktion.
hier einfach mal der code für simle-thumbs. der rest ist die jquery-datei.
| Code: |
/* http://jamesvec.com
simple thumbs v1
Written by james vecchio (jamesvec[at]gmail.com) June 2010.
Feel free to use this on any project.
I would love to see what people do with it, so drop me a line
if you use it.
*/
$(document).ready (function(){
$("#inhalt li").each(function(index, element){$(element).attr("class", 'hide');});
$("#inhalt li").each(function(index, element){$(element).attr("id", 'img'+index);});
$("#untenmenue li a").each(function(index, element){$(element).attr("rel", 'img'+index);});
var mainImg ='img0';
var current = 'img0';
$('#img0').css('display', 'inline');
$('#img0').addClass('current');
$('#untenmenue li a').click (function(){
mainImg = $(this).attr('rel');
if(mainImg != current){
$('.current').fadeOut('slow');
$('#'+mainImg).fadeIn('slow', function(){
$(this).addClass('current');
current = mainImg;
});
}
});
});
|
|
|
| |
|
|
mitapita
Threadersteller
Dabei seit: 02.08.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 29.08.2010 01:18
Titel
|
|
|
mmmhhh... ich wüsst ja immer noch so gerne eine lösung für mein problem...
idee irgendeiner?!
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
JQuery Galerie
Polaroid Flash - Galerie Script - Größe anpassen
jQuery Plugin - Slider als Input wie in jQuery UI
jquery - hide content in jquery object
PHP Galerie
DMS Galerie
|
|
Willkommen auf dem Portal für Mediengestalter
