mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 07:09 Benutzername: Passwort: Auto-Login

Thema: jQuery Fade Effekt vom 29.07.2013


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> jQuery Fade Effekt
Autor Nachricht
JoeMelRamos
Threadersteller

Dabei seit: 11.02.2012
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 29.07.2013 14:02
Titel

jQuery Fade Effekt

Antworten mit Zitat Zum Seitenanfang

Einen wunderschönen guten Tag.

Folgendes Problem: Hab einen Bildbereich, in dem die Bilder wechseln sollen.

Das hab ich soweit hinbekommen. Jedoch sieht man beim Übergang eine weiße Fläche.

Weiß jemand von euch, wie ich das gerade biegen kann?

Ich hab von $('#fade').cycle(); gehört, sagt mir jetzt aber nichts :/

Hier mein Code:

Code:
$(function(){
   $(document).ready(function() {
   $('a[href*=#]').bind("click", function(event) {
      event.preventDefault();
      var ziel = $(this).attr("href");

      $('html,#normal').animate({
         scrollTop: $(ziel).offset().top
      }, 2000 , function (){location.hash = ziel;});
});
return false;
});

$(document).ready(function(){
  slideShow();
});

function slideShow() {
 
  var showing = $("td .is-showing");
  var next = showing.next().length ? showing.next() : showing.parent().children(':first');

  showing.fadeOut(700, function() { next.fadeIn(700).addClass('is-showing'); }).removeClass('is-showing');
 
  setTimeout(slideShow, 7000);
}


});



DANKE IM VORAUS...

//edit by smooth-graphics: Code-Tags hinzugefügt


Zuletzt bearbeitet von Smooth-Graphics am Di 30.07.2013 20:13, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sebastian.maier

Dabei seit: 25.07.2013
Ort: Mannheim
Alter: 45
Geschlecht: Männlich
Verfasst Mo 29.07.2013 14:07
Titel

Antworten mit Zitat Zum Seitenanfang

Du meinst vermutlich das Plugin cycle hier:
http://jquery.malsup.com/cycle/

Hast Du auch noch den HTML Code dazu, dann ist es ein bißchen leichter dir zu helfen.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
JoeMelRamos
Threadersteller

Dabei seit: 11.02.2012
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 29.07.2013 14:12
Titel

Antworten mit Zitat Zum Seitenanfang

sebastian.maier hat geschrieben:
Du meinst vermutlich das Plugin cycle hier:
http://jquery.malsup.com/cycle/

Hast Du auch noch den HTML Code dazu, dann ist es ein bißchen leichter dir zu helfen.



Die Seite hab ich auch schon gesehen, nur ich weiß nicht wo ich das einbinden kann / soll Grins


Klar, hier:


Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Titel</title>
 <link rel="stylesheet" type="text/css" href="style.css" />
 <script type="text/javascript" src="jquery-1.7.1.min.js">
 </script>
 <script type="text/javascript" src="jQuery.js">
 </script>

</head>


<body style="margin:0;padding:0;">

   
<div id="normal">
   

</div>



    <div id="bw-scaling-background">   
      <div id="hnt-bild">
      <table cellpadding="0" cellspacing="0">
         <tbody>
            <tr>
               <td>
                  <img src="kaffee.jpg" class="is-showing" />
                        <img src="neu.jpg" />
                        <img src="puppe.jpg" />
                        <img src="wood.jpg" />
               </td>
            </tr>
         </tbody>
   </table>
   </div>
</div>

</body>



CSS:

Code:
* { margin: 0; padding: 0; }

#bild2{z-index:0;}
html, body, #bw-scaling-background, #bw-scaling-background table, #bw-scaling-background td { height:100%; width:100%; overflow:hidden; }
#bw-scaling-background { z-index: 1;}
#bw-scaling-background div { height:200%; left:-50%; position:absolute; top:-50%; width:200%; }
#bw-scaling-background td { text-align:center; vertical-align:middle; }
#bw-scaling-background img { margin:0 auto; min-height:50%; min-width:50%; }

#normal{ position:absolute; top:0; left:0; z-index:70; overflow:auto; width:100%; height:100%}


#hnt-bild img{
display:none;}

#hnt .is-showing{display:inline;}


Zuletzt bearbeitet von Smooth-Graphics am Di 30.07.2013 20:13, insgesamt 2-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sebastian.maier

Dabei seit: 25.07.2013
Ort: Mannheim
Alter: 45
Geschlecht: Männlich
Verfasst Mo 29.07.2013 14:47
Titel

Antworten mit Zitat Zum Seitenanfang

Ah sag mal, du bist nicht zufällig auf der Suche nach einem Full-Background Image Skript wie hier:
http://www.sebastianmaier.net (Disclaimer: die Seite ist inhaltlich noch im Aufbau *zwinker* )

Hier hab ich nämlich das Skript verwendet:
http://vegas.jaysalvat.com/

Der Vorteil wäre, es ist recht einfach einzubauen, es ist responsive (Klappt also auch ordentlich auf den mobilen Geräten) und du musst dich nicht selbst mit dem Übergang rumschlagen.

Reicht dir die Dokumentation:
http://vegas.jaysalvat.com/documentation/setup/

Sonst sag Bescheid, falls Du Fragen hast.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
JoeMelRamos
Threadersteller

Dabei seit: 11.02.2012
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 29.07.2013 15:30
Titel

Antworten mit Zitat Zum Seitenanfang

sebastian.maier hat geschrieben:
Ah sag mal, du bist nicht zufällig auf der Suche nach einem Full-Background Image Skript wie hier:
http://www.sebastianmaier.net (Disclaimer: die Seite ist inhaltlich noch im Aufbau *zwinker* )

Hier hab ich nämlich das Skript verwendet:
http://vegas.jaysalvat.com/

Der Vorteil wäre, es ist recht einfach einzubauen, es ist responsive (Klappt also auch ordentlich auf den mobilen Geräten) und du musst dich nicht selbst mit dem Übergang rumschlagen.

Reicht dir die Dokumentation:
http://vegas.jaysalvat.com/documentation/setup/

Sonst sag Bescheid, falls Du Fragen hast.







Seeehr gut. Danke Dir! Lächel


Ich habs mit dem Hintergrundbild geändert, jedoch weiß ich nicht, wo ich die anderen Bilder hinpacken muss?



HTML

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Titel</title>
 <link rel="stylesheet" type="text/css" href="style.css" />


 <script type="text/javascript" src="jquery-1.10.2.js">
 </script>

<script
  type="text/javascript" src="jquery.vegas.js">
</script>

<link rel="stylesheet" type="text/css" href="jquery.vegas.css" />


<script type="text/javascript">
$(function()
{
   $.vegas
   ({
    src:'images/neu.jpg',
   fade: 5000
   })
   ('overlay',
   {src:'/vegas/overlays/13.png'
   
  });
});
</script>



</head>


<body>

   
</body>

</html>


Zuletzt bearbeitet von Smooth-Graphics am Di 30.07.2013 20:14, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
JoeMelRamos
Threadersteller

Dabei seit: 11.02.2012
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 29.07.2013 15:42
Titel

Antworten mit Zitat Zum Seitenanfang

OKKKKAY ich habs !!!!



DANKE NOCHMALS !!!! * huduwudu! * * huduwudu! * * huduwudu! *
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
sebastian.maier

Dabei seit: 25.07.2013
Ort: Mannheim
Alter: 45
Geschlecht: Männlich
Verfasst Mo 29.07.2013 16:38
Titel

Antworten mit Zitat Zum Seitenanfang

Gerne Lächel Schön wenn es geholfen hat.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Img fade in CSS gestyltem Menü? (jQuery/JS)
Random PHP Script mit jquery fade
Hilfe bei JQuery fade in and out durch laden von Meta Tag
[SWISH] Rollover i.V.m. Fade-Effekt
Fade-In Effekt soll im FF auch funktionieren
Fade-Out Effekt beim Scrollen - aber wie... ?
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.