Autor |
Nachricht |
JoeMelRamos
Threadersteller
Dabei seit: 11.02.2012
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 29.07.2013 14:02
Titel jQuery Fade Effekt |
|
|
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
|
|
|
|
|
sebastian.maier
Dabei seit: 25.07.2013
Ort: Mannheim
Alter: 45
Geschlecht:
|
Verfasst Mo 29.07.2013 14:07
Titel
|
|
|
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.
|
|
|
|
|
Anzeige
|
|
|
JoeMelRamos
Threadersteller
Dabei seit: 11.02.2012
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 29.07.2013 14:12
Titel
|
|
|
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
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
|
|
|
|
|
sebastian.maier
Dabei seit: 25.07.2013
Ort: Mannheim
Alter: 45
Geschlecht:
|
Verfasst Mo 29.07.2013 14:47
Titel
|
|
|
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 )
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.
|
|
|
|
|
JoeMelRamos
Threadersteller
Dabei seit: 11.02.2012
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 29.07.2013 15:30
Titel
|
|
|
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 )
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!
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
|
|
|
|
|
JoeMelRamos
Threadersteller
Dabei seit: 11.02.2012
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 29.07.2013 15:42
Titel
|
|
|
OKKKKAY ich habs !!!!
DANKE NOCHMALS !!!!
|
|
|
|
|
sebastian.maier
Dabei seit: 25.07.2013
Ort: Mannheim
Alter: 45
Geschlecht:
|
Verfasst Mo 29.07.2013 16:38
Titel
|
|
|
Gerne Schön wenn es geholfen hat.
|
|
|
|
|
|
|
|
Ä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... ?
|
|