Warnung: file_put_contents(/home/www/web1/html/php_dev/test.txt) [function.file-put-contents]: failed to open stream: Permission denied in /home/www/web1/html/php_dev/sys/lib.activity.php (Zeile 58)
jQuery Overlay: Kann Element nicht ansteuern [Archiv] - PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr

- Ad -
php-resource




Archiv verlassen und diese Seite im Standarddesign anzeigen :
jQuery Overlay: Kann Element nicht ansteuern


 
kerbstone
28-11-2010, 16:03 
 
Hallo,

ich habe das Problem, dass der Trigger nicht zu funktionieren scheint!

Zur Zeit sieht mein Code so aus:


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


Hiermit komme ich aber nicht an die jeweiligen Images
oder zumindest passiert nichts...


<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>


Ich hoffe es kann mir jemand sagen, wie ich den JavaScript Code
anzupassen habe bzw. was hier falsch ist.

 
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

$('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>

<!-- 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>

<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>

<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

<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 
 
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 
 
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

$('#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. :respekt:

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 (http://www.diemusikagentur.com/webhome/referenzen.php)

 
wahsaga
04-12-2010, 12:53 
 
Die aktuelle URL ist: die.musikagentur (http://www.diemusikagentur.com/webhome/referenzen.php)
Firebug Console sagt:
uncaught exception: Could not find Overlay: #ref03

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

- -

Alle Zeitangaben in WEZ +2. Es ist jetzt 07:58 Uhr.