mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Do 18.04.2024 09:52 Benutzername: Passwort: Auto-Login

Thema: Simple JQuery Image Slide Show with Semi-Transparent Caption vom 19.02.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Simple JQuery Image Slide Show with Semi-Transparent Caption
Autor Nachricht
DerUnterfranke
Threadersteller

Dabei seit: 19.02.2011
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Sa 19.02.2011 20:04
Titel

Simple JQuery Image Slide Show with Semi-Transparent Caption

 Antworten mit Zitat Zum Seitenanfang
Hi Mediengestalter *zwinker*,

ich hab dieses Skript hier gefunden:

Simple JQuery Image Slide Show with Semi-Transparent Caption
Seite: http://www.queness.com/post/152/simple-jquery-image-slide-show-with-semi-transparent-caption
Demo: http://www.queness.com/resources/html/slideshow/jquery-slideshow.html

leider scheitere ich an der Anpassung fuer meine Zwecke. Vielleicht kann mir hier jemand helfen?

Was das Sktipt macht
- Animation von Bild (Fade) und Text (Animation von unten eingeblendet)

Was es nach Moeglichkeit machen sollte:
- Der Text soll sich genau wie das Bild einfach fest (mit dem gleichen Hintergrund) einblenden

Die Show spielt sich glaube ich hier ab. Ich bekomm auch die Animation raus, leider "flackert" es dann nur kurz auf.

Code:
$(document).ready(function() {     
     
    //Execute the slideShow
    slideShow();
 
});
 
function slideShow() {
 
    //Set the opacity of all images to 0
    $('#gallery a').css({opacity: 0.0});
     
    //Get the first image and display it (set it to full opacity)
    $('#gallery a:first').css({opacity: 1.0});
     
    //Set the caption background to semi-transparent
    $('#gallery .caption').css({opacity: 0.7});
 
    //Resize the width of the caption according to the image width
    $('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
     
    //Get the caption of the first image from REL attribute and display it
    $('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
    .animate({opacity: 0.7}, 400);
     
    //Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
    setInterval('gallery()',6000);
     
}
 
function gallery() {
     
    //if no IMGs have the show class, grab the first image
    var current = ($('#gallery a.show')?  $('#gallery a.show') : $('#gallery a:first'));
 
    //Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));   
     
    //Get next image caption
    var caption = next.find('img').attr('rel');
     
    //Set the fade in effect for the next image, show class has higher z-index
    next.css({opacity: 0.0})
    .addClass('show')
    .animate({opacity: 1.0}, 1000);
 
    //Hide the current image
    current.animate({opacity: 0.0}, 1000)
    .removeClass('show');
     
    //Set the opacity to 0 and height to 1px
    $('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });
     
    //Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
    $('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
     
    //Display the content
    $('#gallery .content').html(caption);
         
}
  View user's profile Private Nachricht senden
DerUnterfranke
Threadersteller

Dabei seit: 19.02.2011
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 24.02.2011 00:14
Titel

Antworten mit Zitat Zum Seitenanfang
echt keiner Au weia! eine Idee ...
  View user's profile Private Nachricht senden
Anzeige
Anzeige
DerM

Dabei seit: 18.01.2009
Ort: -
Alter: 42
Geschlecht: Männlich
Verfasst Do 24.02.2011 09:05
Titel

Antworten mit Zitat Zum Seitenanfang
Ohne HTML Code können wir auch nix machen.. Glaskugel
  View user's profile Private Nachricht senden
SimonDerDude

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht: Männlich
Verfasst Do 24.02.2011 09:30
Titel

Antworten mit Zitat Zum Seitenanfang
Nimm doch einfach mehr Niv(o)eau Grins
http://nivo.dev7studios.com/
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
DerUnterfranke
Threadersteller

Dabei seit: 19.02.2011
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 25.02.2011 00:13
Titel

Antworten mit Zitat Zum Seitenanfang
DerM hat geschrieben:
Ohne HTML Code können wir auch nix machen.. Glaskugel


... besonders viel HTML ist da auch nicht zu finden.

Code:
<div id="gallery">
 
   <a href="#" class="show">
      <img src="images/flowing-rock.jpg" alt="Flowing Rock" width="580" height="360" title="" alt=""
                rel=" <h3>Flowing Rock</h3>Lorem ipsum dolor incididunt ut labore et dolore magna aliqua. "/>
   </a>
</div>
  View user's profile Private Nachricht senden
 
Ähnliche Themen Slide-Show / Slider
image show creator ?
Bilder wechsel mit Image Slide
jQuery slide selber basteln
Problem mit Jquery Fx.Slide (mootolols)
Flash slide show "Revolvereffekt"
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.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB