mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 13.06.2024 16:06 Benutzername: Passwort: Auto-Login

Thema: Bildershow Javascript vom 04.02.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Bildershow Javascript
Autor Nachricht
LadyJay
Threadersteller

Dabei seit: 27.03.2006
Ort: -
Alter: 36
Geschlecht: Weiblich
Verfasst Do 04.02.2010 14:07
Titel

Bildershow Javascript

Antworten mit Zitat Zum Seitenanfang

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 * Applaus, Applaus *

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. * Ich bin unwürdig *

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="&lt;&lt;" onClick="zurueck()">&nbsp;&nbsp;<input class="qt" type="button" value="&gt;&gt;" onClick="vorwaerts()"></div>


Zuletzt bearbeitet von LadyJay am Do 04.02.2010 14:07, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Do 04.02.2010 14:33
Titel

Antworten mit Zitat Zum Seitenanfang

Wieso willst Du das Rad neu erfinden obwohl es schon etliche Lösungen gibt?
Lightbox2 kann das doch auch.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
LadyJay
Threadersteller

Dabei seit: 27.03.2006
Ort: -
Alter: 36
Geschlecht: Weiblich
Verfasst Do 04.02.2010 14:40
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Do 04.02.2010 14:45
Titel

Antworten mit Zitat Zum Seitenanfang

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 *zwinker*


Zuletzt bearbeitet von Kash am Do 04.02.2010 14:45, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
LadyJay
Threadersteller

Dabei seit: 27.03.2006
Ort: -
Alter: 36
Geschlecht: Weiblich
Verfasst Do 04.02.2010 15:56
Titel

Antworten mit Zitat Zum Seitenanfang

mh... das meinte ich glaube ich nicht


habe an so etwas gedacht, klick jedoch mit Bildern die weich einblenden
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Do 04.02.2010 16:10
Titel

Antworten mit Zitat Zum Seitenanfang

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.
  View user's profile Private Nachricht senden
 
Ähnliche Themen [Flash] Slide-/Bildershow
[javascript] mit <select> feld wert an javascript funk
JavaScript in PHP
javascript im javascript?!
Javascript
javascript in php
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.