keine annzeige meines banners in verbindung mit lightbox / warum ist das so?

nilius

Grünschnabel

Dabei seit: 08.07.2011

Beiträge: 9

1

Freitag, 8. Juli 2011, 07:24

Hallo liebe Leute,

ich habe bin noch sehr sehr frisch was die erstellung einer homepage angeht. Jetzt habe ich jedoch einen fehler den ich mir nicht erklären kann.
ich habe mit einem template diese seite erstellt: Das template funktioniert ohne die lightbox v2.05 sehr gut (das bannerslider wechselt wie ich es will. Die lightbox habe ich habe ich nun in den editierbaren bereich eingefügt.
Das resultat ist folgendes: Die lightbox funktioniert, jedoch wird das beim laden der seite das banner slider nicht mehr angezeigt.

Ich kann nur höflichst um Hilfe bitten. Ich hoffe ich habe alles nötige gepostet: die seite ist mit hilfe von youtube tutorials entstanden. Daher kann es duechaus sein, dass überflüssiger code vorhanden ist.
leider muss ich etwas vom quellcode weglassen, da der platz hier begrenzt ist.

<!DOCTYPE html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

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

<script type="text/javascript" src="JS/slider.js"></script>

<script type="text/javascript"> // This is the script for the banner slider
$(document).ready(function() {
$('#slider').s3Slider({
timeOut: 6000
});
});
</script>

<link href="CSS/style.css" rel="stylesheet" type="text/css" media="screen">

<link href="CSS/slider.css" rel="stylesheet" type="text/css" media="screen">


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

<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

<link rel="stylesheet" type="text/css" href="CSS/mini.css" />

<link rel="stylesheet" href="CSS/gallery.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />


</head>

<body>
<div id="outer">

<div id="wrapper">

<div id="logo">
<img src="images/happiness label.jpg">
</div>

<div id="facebookbutton"> <a href="http://www.facebook.com"><img src="images/facebook.png"></a>
</div>

<div id="topnav">

<ul>
<li><a href="impressum english.html">IMPRESSUM</a></li>
<li><a href="contact.html">Contact Us</a></li>
<li></li>

<li><a href="products.html"><img src="images/union-jack-icon.jpg"></a></li>
<li><a href="index.html"><img src="images/Deutschlandfahne.jpg"></a></li>

</ul>
</div>

<div id="slider">

<ul id="sliderContent">


<li class="sliderImage">
<img src="images/Mainpicture hats hats hats.jpg" />
<span class="top"><strong>First Slide Heading</strong>

</span>
</li>

<li class="sliderImage">
<img src="images/Mainpicture hats hats hats2.jpg" />
<span class="top"><strong>This is an image title</strong>

</span>
</li>

<div class="clear sliderImage"></div>
</ul>
</div>


<div id="maincontent">
<h1> Happiness Hats</h1>
<p> This is the describtion </p>

<div class="thumbscontainer">
<ul class="thumbs">

<li>
<a href="Product pictures/hat1.jpg" rel="lightbox[maxigallery]" title=" Pinklady Artikelnummer 20039 ">

<div class="custom-thumb">

<img src="Product pictures/hat1.jpg" class="thumbnail" title=" » Click to zoom ->" alt=" » Click to zoom ->" />
</div>
</a>
</li>
<li>
<a href="Product pictures/hat2.jpg" rel="lightbox[maxigallery]" title=" - ">

<div class="custom-thumb">

<img src="Product pictures/hat2.jpg" class="thumbnail" title=" » Click to zoom ->" alt=" » Click to zoom ->" />
</div>
</a>
</li>
<li>
<a href="Product pictures/hat3.jpg" rel="lightbox[maxigallery]" title=" - ">
<div class="custom-thumb">

<img src="Product pictures/hat3.jpg" class="thumbnail" title=" » Click to zoom ->" alt=" » Click to zoom ->" />
</div>
</a>

</li>
</ul>
<ul class="thumbs">

<li>
<a href="Product pictures/hat4.jpg" rel="lightbox[maxigallery]" title=" - ">
<div class="custom-thumb">

<img src="Product pictures/hat4.jpg" class="thumbnail" title=" » Click to zoom ->" alt=" » Click to zoom ->" />
</div>

</a>

</li>

</li>
</ul>
<ul class="thumbs">

</ul>
<ul class="thumbs">
</ul>
</div>
</div>


<div id="footer">
<p class="footer-text">Copyright 2011 Happiness-Clothing</p>
</div>

</body>



javascriptprogrammierung für das banner :slider.js

(function($){

$.fn.s3Slider = function(vars) {

var element = this;
var timeOut = (vars.timeOut != undefined) ? vars.timeOut : 4000;
var current = null;
var timeOutFn = null;
var faderStat = true;
var mOver = false;
var items = $("#" + element[0].id + "Content ." + element[0].id + "Image");
var itemsSpan = $("#" + element[0].id + "Content ." + element[0].id + "Image span");

items.each(function(i) {

$(items).mouseover(function() {
mOver = true;
});

$(items[i]).mouseout(function() {
mOver = false;
fadeElement(true);
});

});

var fadeElement = function(isMouseOut) {
var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
thisTimeOut = (faderStat) ? 10 : thisTimeOut;
if(items.length > 0) {
timeOutFn = setTimeout(makeSlider, thisTimeOut);
} else {
console.log("Poof..");
}
}

var makeSlider = function() {
current = (current != null) ? current : items[(items.length-1)];
var currNo = jQuery.inArray(current, items) + 1
currNo = (currNo == items.length) ? 0 : (currNo - 1);
var newMargin = $(element).width() * currNo;
if(faderStat == true) {
if(!mOver) {
$(items[currNo]).fadeIn((timeOut/6), function() {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
} else {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
faderStat = false;
current = items[currNo];
if(!mOver) {
fadeElement(false);
}
});
}
});
}
} else {
if(!mOver) {
if($(itemsSpan[currNo]).css('bottom') == 0) {
$(itemsSpan[currNo]).slideDown((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
} else {
$(itemsSpan[currNo]).slideUp((timeOut/6), function() {
$(items[currNo]).fadeOut((timeOut/6), function() {
faderStat = true;
current = items[(currNo+1)];
if(!mOver) {
fadeElement(false);
}
});
});
}
}
}
}

makeSlider();

};

})(jQuery);

nilius

Grünschnabel

Dabei seit: 08.07.2011

Beiträge: 9

2

Freitag, 8. Juli 2011, 07:29

hier noch mal die problemstellung

ich bin noch sehr sehr frisch was die erstellung einer homepage angeht. Jetzt habe ich jedoch einen fehler den ich mir nicht erklären kann.
ich habe mit einem template diese seite erstellt: Das template funktioniert ohne die lightbox v2.05 sehr gut (das bannerslider wechselt wie ich es will. Die lightbox habe ich nun in den editierbaren bereich eingefügt.
Das resultat ist folgendes: Die lightbox funktioniert, jedoch wird nach dem laden der seite das banner slider nicht mehr angezeigt.

Mckbrother

Haudegen

Dabei seit: 04.02.2010

Beiträge: 515

3

Freitag, 8. Juli 2011, 07:29

Hast Du vielleicht Deine Homepage irgendwo hochgeladen sodass man sich das mal online snschauen kann? Das ist deutlich leichter

Wo kämen wir hin,
wenn jeder sagen würde:
"wo kämen wir hin",
und niemand ginge um zu schauen,
wohin wir kämen,
wenn wir gingen.

nilius

Grünschnabel

Dabei seit: 08.07.2011

Beiträge: 9

4

Freitag, 8. Juli 2011, 16:53

hm.. das Problem stellt sich auf der Homepage nun anders da

Hallo,

die Homepage ist unter folgendem link zu finden

http://sarablanco.pf-control.de

es geht um das rot grüne banner welches ständig wechselt. Das ist bei dreamweaver auf meinem computer unter "preview/ debug in browser" auf der homepage die man durch klicken auf hap(index seite) errreicht nicht vorhanden. es bleibt weiß. Die lightbox funktioniert so wie sie soll.

Nun habe ich das ganze auf einem webserver plaziert. und es stellt sich genau andersherum da. Das banner auf der seite http://sarablanco.pf-control.de/index.html

ist da und bewegt sich, jedoch funktioniert die lightbox mit den bildern nicht? Wie kann das sein?

Was muss ich ändern, damit ich das Banner rotieren sehe und außerdem nach Klicken auf ein Bild die lightbox ausgeführt wird?

Ich bitte um Hilfe

Mckbrother

Haudegen

Dabei seit: 04.02.2010

Beiträge: 515