jQuery Overlay: Kann Element nicht ansteuern

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • jQuery Overlay: Kann Element nicht ansteuern

    Hallo,

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

    Zur Zeit sieht mein Code so aus:

    Code:
    <script>
    $(document).ready(function() {
        $("img[rel]").overlay();
    });
    </script>
    Hiermit komme ich aber nicht an die jeweiligen Images
    oder zumindest passiert nichts...

    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>
    Ich hoffe es kann mir jemand sagen, wie ich den JavaScript Code
    anzupassen habe bzw. was hier falsch ist.
    Zuletzt geändert von kerbstone; 28.11.2010, 19:56.

  • #2
    Hallo kerbstone,

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

    Kommentar


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

      Kommentar


      • #4
        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?
        Bitte Beachten.
        Foren-Regeln
        Danke

        Kommentar


        • #5
          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.

          Kommentar


          • #6
            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.
            Bitte Beachten.
            Foren-Regeln
            Danke

            Kommentar


            • #7
              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: ...“
              I don't believe in rebirth. Actually, I never did in my whole lives.

              Kommentar


              • #8
                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.

                Kommentar


                • #9
                  ok du hast mich nicht verstanden. In deinen hier gezeigtem Quellcode gibt es kein
                  Code:
                  $('#overlay')
                  Bitte Beachten.
                  Foren-Regeln
                  Danke

                  Kommentar


                  • #10
                    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.

                    Kommentar


                    • #11
                      tolle Antwort.

                      und jetzt führst du bitte das was wahsaga gesagt hat aus ...
                      denn so kann ich dir nicht mehr helfen.
                      Bitte Beachten.
                      Foren-Regeln
                      Danke

                      Kommentar


                      • #12
                        Die aktuelle URL ist: die.musikagentur

                        Kommentar


                        • #13
                          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.
                          Zuletzt geändert von wahsaga; 04.12.2010, 12:58.
                          I don't believe in rebirth. Actually, I never did in my whole lives.

                          Kommentar

                          Lädt...
                          X