jQuery Overlay: Kann Element nicht ansteuern

**mephisto111** · 28.11.2010, 20:57

Hallo kerbstone,

wo und wie sind die "anzusteuernden Elemente" definiert?
Sind die jQuery-Tools richtig eingebunden?

**kerbstone** · 28.11.2010, 22:09

Die Einbindungen der Libraries können vernachlässigt werden,
denn sobald der div-Container "<div class="jMyCarousel">"
entfernt wird funktioniert es...

**Wyveres** · 29.11.2010, 09:09

1.) lass dir einfach mal die länge von

Code:

$('img[rel]')

ausgeben.

2.) irgendwelche JS Meldungen irgendetwas anderes außer ... es passiert nichts ;D

3.)
JQuery version?
JQuery im head bereich oder am body ende?
laut jQuery docu gibt es keine overlay() funktion. also welches Plugin soll das sein?

**kerbstone** · 29.11.2010, 15:10

Um keine Frage offen zu lassen gehe ich das Originaldokument
nun systematisch durch:

1. Die Einbindung von jQuery, jQuery Tools und jMyCarousel
(inkl. MouseWheel) im Header <head> ... </head>

Code:

<!-- javascript -->
<script type="text/javascript" src="http://localhost/javascripts/jquery.js"></script>
<script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js?foo"></script> 
<script type="text/javascript" src="http://localhost/javascripts/jMyCarousel.js"></script>
<script type="text/javascript" src="http://localhost/javascripts/jquery.mousewheel.js"></script>
<script type="text/javascript">
		$(function() {
		
		    $('#activator').click(function(){
                        $('#overlay').fadeIn('fast',function(){
                            $('#box').animate({'top':'50px'},500);
                        });
                    });

                    $('#boxclose').click(function(){
                        $('#box').animate({'top':'-600px'},500,function(){
                            $('#overlay').fadeOut('fast');
                        });
                    });

		    $(".jMyCarousel").jMyCarousel({
		        visible: '4',
		        eltByElt: true,
		        evtStart: 'mousedown',
		        evtStop: 'mouseup'
		    });

		});
</script>

2. Das Styling für jMyCarousel und explizit das jQuery Overlay Fenster,
dass ebenfalls im Header eingebunden ist <head> ... </head>

Code:

<link rel="stylesheet" type="text/css" href="http://localhost/css/jMyCarousel.css" />  
    <style>
        /* Style for overlay and box */
        .overlay{
            /*background:transparent url(http://localhost/images/overlay.png) repeat top left;*/
            position:fixed;
            top:0px;
            bottom:0px;
            left:0px;
            right:0px;
            z-index:100;
        }
        .box{
            position:fixed;
            top:-600px;
            left:30%;
            right:30%;
            background-color:#fff;
            color:#7F7F7F;
            padding:20px;
            border:2px solid #ccc;
            -moz-border-radius: 20px;
            -webkit-border-radius:20px;
            -khtml-border-radius:20px;
            -moz-box-shadow: 0 1px 5px #333;
            -webkit-box-shadow: 0 1px 5px #333;
            z-index:101;
        }
        .box h1{
            border-bottom: 1px dashed #7F7F7F;
            margin:-20px -20px 0px -20px;
            padding:10px;
            background-color:#A5A2A5;
            color:#FFFFFF;
            -moz-border-radius:20px 20px 0px 0px;
            -webkit-border-top-left-radius: 20px;
            -webkit-border-top-right-radius: 20px;
            -khtml-border-top-left-radius: 20px;
            -khtml-border-top-right-radius: 20px;
        }
        a.boxclose{
            float:right;
            width:26px;
            height:26px;
            background:transparent url(http://localhost/images/cancel.png) repeat top left;
            margin-top:-30px;
            margin-right:-30px;
            cursor:pointer;
        }

/* the overlayed element */
.simple_overlay {
	
	/* must be initially hidden */
	display:none;
	
	/* place overlay on top of other elements */
	z-index:10000;
	
	/* styling */
	background-color:#333;
	
	width:675px;	
	min-height:200px;
	border:1px solid #666;
	
	/* CSS3 styling for latest browsers */
	-moz-box-shadow:0 0 90px 5px #000;
	-webkit-box-shadow: 0 0 90px #000;	
}

/* close button positioned on upper right corner */
.simple_overlay .close {
	background-image:url(http://localhost/images/cancel.jpg);
	position:absolute;
	right:-15px;
	top:-15px;
	cursor:pointer;
	height:35px;
	width:35px;
}

/* styling for elements inside overlay */
	.details {
		position:absolute;
		top:15px;
		right:15px;
		font-size:11px;
		color:#fff;
		width:150px;
	}
	
	.details h3 {
		color:#aba;
		font-size:15px;
		margin:0 0 -10px 0;
	}
    </style>

3. Die Einbindung des Carousels für Image Slides im Body <body> ... </body>

Code:

<div class="jMyCarousel">
    <ul>
        <li><img rel="#ref01" src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_m.jpg" width="200" height="150"></li>
        <li><img rel="#ref02" src="http://farm4.static.flickr.com/3346/3449388113_71a06b8548_m.jpg" width="200" height="150"></li>
 	<li><img rel="#ref03" src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_m.jpg" width="200" height="150"></li>
        <li><img rel="#ref04" src="http://farm4.static.flickr.com/3346/3449388113_71a06b8548_m.jpg" width="200" height="150"></li>
  </ul>
</div>

4. Die Einbindung der Overlays im Body <body> ... </body> mit
jQuery Javascript Code

Code:

<div class="simple_overlay" id="ref01">
	<img src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9.jpg" />

	<div class="details">
		<h3>The Barcelona Pavilion</h3>

		<h4>Barcelona, Spain</h4>

		<p>
			The Barcelona Pavilion, designed by Ludwig Mies van
 der Rohe, was the German Pavilion for the 1929 International Exposition in
 Barcelona, Spain. It was an important building in the history of modern
 architecture.
		</p>

		<p>
			Several critics, historians and modernists have
 declared it "the most beautiful building of the century"
		</p>
	</div>
</div>

<div class="simple_overlay" id="ref02">
	<img src="http://farm4.static.flickr.com/3346/3449388113_71a06b8548.jpg" />
	<div class="details">
		<h3>The Barcelona Pavilion</h3>

		<h4>Barcelona, Spain</h4>

		<p>
			Another unique feature of this building is the
 <em>exotic materials Mies chose to use</em>.
		</p>

		<p>
			Plates of high-grade stone materials like veneers of
 Tinos verde antico marble and golden onyx as well as tinted glass of grey,
 green, white, in addition to translucent glass, perform exclusively as spatial
 dividers.
		</p>
	</div>
</div>

<script>
$(document).ready(function() {
    $("img[rel]").overlay();
});
</script>

Und das ist das ganze Dokument.
Sobald ich den DIV-Tag für das Carousel entferne funktioniert das Overlay
von jQuery Tools, was aber nicht Sinn der Sache ist.
Ich möchte die Thumb-Bilder im Overlay vergrößert darstellen
inklusive einer kurzen Beschreibung.

**Wyveres** · 29.11.2010, 15:30

1.) ich seh keine id mit dem namen overlay ...
2.) würde ich alle JS scripts an das Ende des Bodys setzen ...
3.) FF firebug ... JS errors.

**wahsaga** · 29.11.2010, 15:40

Zitat von kerbstone Beitrag anzeigen

Um keine Frage offen zu lassen gehe ich das Originaldokument nun systematisch durch:

Da fehlt noch was viel essentielleres: „Und um euch zu keiner Copy&Paste-Orgie zu zwingen, wenn ihr das Problem nachvollziehen wollte, hier der Link zum Online-Beispiel: ...“

**kerbstone** · 29.11.2010, 21:23

Zitat von Wyveres Beitrag anzeigen

1.) ich seh keine id mit dem namen overlay ...
2.) würde ich alle JS scripts an das Ende des Bodys setzen ...
3.) FF firebug ... JS errors.

Das Overlay wird mit einer Methode overlay() aufgerufen.
Das Overlay wird referenziert mit ref01, ref02, ref03, ref04.

Libraries werden im Header eingebunden.

FF Firebug lade ich mir herunter und probiere es gleich mal aus.

**Wyveres** · 30.11.2010, 08:21

ok du hast mich nicht verstanden. In deinen hier gezeigtem Quellcode gibt es kein

Code:

$('#overlay')

**kerbstone** · 01.12.2010, 10:57

Das Overlay ist jQuery nativ. Also das Standard-Overlay.
Die ID ist zu finden in meiner include() Datei für das Impressum.
Hier benötige ich kein besonderes Overlay.
Für die Bilder benötige ich aber das jQuery Tools Simple Overlay.
Und das funktioniert nicht. Das Standard Overlay funktioniert.

**Wyveres** · 01.12.2010, 11:02

tolle Antwort.

und jetzt führst du bitte das was wahsaga gesagt hat aus ...
denn so kann ich dir nicht mehr helfen.

**kerbstone** · 04.12.2010, 12:47

Die aktuelle URL ist: die.musikagentur

**wahsaga** · 04.12.2010, 12:53

Zitat von kerbstone Beitrag anzeigen

Die aktuelle URL ist: die.musikagentur

Firebug Console sagt:

Code:

uncaught exception: Could not find Overlay: #ref03

P.S.: Absolut fiese DIV-Suppe, bäh.

jQuery Overlay: Kann Element nicht ansteuern