| Autor |
Nachricht |
LadyJay
Threadersteller
Dabei seit: 27.03.2006
Ort: -
Alter: 36
Geschlecht: 
|
Verfasst Do 04.02.2010 14:07
Titel Bildershow Javascript |
  |
|
Hallo ihr lieben,
ich beschäftige mich erst seit kurzem Javascript, d.h. ich kann fertige Scripte zwar auf meine Bedürfnisse anpassen, aber mehr leider auch nicht.
Ich habe folgendes Problem, ich soll eine Art Bildergalerie erstellen mit Vor- und Zurück-Button erstellen in der die Bilder dann jeweils geladen werden. Soweit so gut, das funktioniert jetzt auch 
Jedoch sollen die Bilder nicht einfach nur so erscheinen, sondern einen fliessenden Übergang haben d.h. einblenden oder ins Bild fahren. Wie bekomme ich das den am besten hin?
Hier der bisherige Code, vielleicht hat ja jemand eine unkompilzierte Lösung parat. 
| Zitat: |
<script type="text/javascript">
<!--
var im = new Array(".../images/stories/projekt1/bild1.jpg",
".../images/stories/projekt1/bild2.jpg",
".../images/stories/projekt1/bild3.jpg",
".../images/stories/projekt1/bild4.jpg",
".../images/stories/projekt1/bild5.jpg");
i = 0;
function vorwaerts() {
if (i != 4) {
document.images.dia.src = im[i+1];
i++;
}
}
function zurueck() {
if (i != 0) {
document.images.dia.src = im[i-1];
i--;
}
}
//-->
</script> |
aufgerufen wird das ganze dann so:
| Code: | <img name="dia" src=".../images/stories/projekt1/bild1.jpg" width="600" height="490" border="0" alt="testbild">
<div id="qt"><input class="qt" type="button" value="<<" onClick="zurueck()"> <input class="qt" type="button" value=">>" onClick="vorwaerts()"></div> |
Zuletzt bearbeitet von LadyJay am Do 04.02.2010 14:07, insgesamt 1-mal bearbeitet
|
|
| |
   |
 |
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: 
|
Verfasst Do 04.02.2010 14:33
Titel
|
|
|
Wieso willst Du das Rad neu erfinden obwohl es schon etliche Lösungen gibt?
Lightbox2 kann das doch auch.
|
|
| |
|
|
|
Anzeige
|
|
|
LadyJay
Threadersteller
Dabei seit: 27.03.2006
Ort: -
Alter: 36
Geschlecht:
|
Verfasst Do 04.02.2010 14:40
Titel
|
|
|
eine Lightbox ist doch wenn ich mich nicht irre, eine Variante die aufpoppt?
Ich möchte ja eigentlich eine Slideshow, die manuell zu bedienen ist.
|
|
| |
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Do 04.02.2010 14:45
Titel
|
|
|
CSS
| Code: | <style type="text/css" media="screen">
#slideshow #slidesContainer {
margin:0 auto;
width:35em;
height:16em;
overflow:auto;
position:relative;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:43em;
height:16em;
}
.control {
display:block;
width:3em;
height:16em;
text-indent:-10000em;
position:absolute;
cursor:pointer;
}
#leftControl {
position:absolute;
top:25.5em;
left:2.3em;
background:transparent url(images/control_left.jpg) no-repeat 0 0;
}
#rightControl {
position:absolute;
top:25.5em;
right:17.4em;
background:transparent url(images/control_right.jpg) no-repeat 0 0;
}
</style> |
JavaScript
| Code: | <script type="text/javascript">
<!--
$(document).ready(function() {
var currentPosition = 0;
var slideWidth = 560;
var slides = $('.slide');
var numberOfSlides = slides.length;
$('#slidesContainer').css('overflow','hidden');
slides.wrapAll('<div id="slideInner"></div>').css({
'float':'left',
'width':slideWidth
});
$('#slideInner').css('width', slideWidth * numberOfSlides);
$('#slideshow').prepend('<span class="control" id="leftControl">Links</span>').append('<span class="control" id="rightControl">Rechts</span>');
manageControls(currentPosition);
$('.control').bind('click', function(){
currentPosition = ($(this).attr('id')=='rightControl')?currentPosition + 1 : currentPosition - 1;
manageControls(currentPosition);
//bewegung von #slideInner mittels margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth * (-currentPosition)
});
});
function manageControls(position){
if(position==0){ $('#leftControl').hide() }
else{ $('#leftControl').show() }
if(position==numberOfSlides-1){ $('#rightControl').hide()}
else{ $('#rightControl').show()}
}
});
//-->
</script> |
HTML
| Code: | <div id="slideshow">
<div id="slidesContainer">
<div class="slide">
<img src="01.jpg" alt="" title="" />
</div>
<div class="slide">
<img src="02.jpg" alt="" title="" />
</div>
</div>
</div> |
// jQuery Library wird benötigt 
Zuletzt bearbeitet von Kash am Do 04.02.2010 14:45, insgesamt 1-mal bearbeitet
|
|
| |
|
|
LadyJay
Threadersteller
Dabei seit: 27.03.2006
Ort: -
Alter: 36
Geschlecht:
|
Verfasst Do 04.02.2010 15:56
Titel
|
|
|
mh... das meinte ich glaube ich nicht
habe an so etwas gedacht, klick jedoch mit Bildern die weich einblenden
|
|
| |
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Do 04.02.2010 16:10
Titel
|
|
|
Also erstens kann das die Lightbox2
http://www.huddletogether.com/projects/lightbox2/
Schau dir halt mal die Bsp an
Und zweitens kann das mein Script ähnlich auch. Nur das die Bilder 'smooth' nach links durchgeschoben werden.
So wie du es wolltest.
zeig doch mal das ergebniss mit meinem Script.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[Flash] Slide-/Bildershow
[javascript] mit <select> feld wert an javascript funk
Javascript Uhr
ist das javascript ?
Javascript im XML
JavaScript in PHP
|
|
Willkommen auf dem Portal für Mediengestalter
