Lightbox und Tooltipscript funktioniert und auch nicht...

**counter18** · 30.11.2010, 10:42

Hi zusammen,

ich hab eine Seite in der mehrere Scripte nicht ausführen. So hab ich sie eingebunden:

Code:

<script src="http://www.***.de/js/prototype.js" type="text/javascript"></script>
	<script src="http://www.***.de/js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
	<script src="http://www.***.de/js/lightbox.js" type="text/javascript"></script>
	<script src="http://www.***.de/js/scroll.js" type="text/javascript"></script>
	
<link rel="stylesheet" href="http://www.***.de/js/lightbox.css" type="text/css" media="screen" />

Dann noch die Verknüpfung zum Bild:

Code:

<a href="http://www.***.de/produkte/image.php?f=../gross/99512/99512_4.jpg&amp;d=1" rel="lightbox[99512]"><img class="imgscroll" border="0" src="http://www.***.de/produkte/image.php?f=../gross/99512/99512_4.jpg&amp;d=3" alt="" /></a>

Zudem hab ich noch einen manuellen Script im Footer, der auf manchen Seiten ausgeführt wird und auf manchen nicht:

Code:

<script type="text/javascript" language="JavaScript">


$.easing.bouncy = function (x, t, b, c, d) {
    var s = 0.30158;
    if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
    return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}

$.tools.tooltip.addEffect("bouncy",

	// opening animation
	function(done) {
		this.getTip().animate({top: '+=5'}, 500, 'bouncy', done).show();
	},

	// closing animation
	function(done) {
		this.getTip().animate({top: '-=5'}, 200, 'bouncy', function()  {
			$(this).hide();
			done.call();
		});
	}
);


$("#fuut img[title]").tooltip({effect: 'bouncy',offset: [10, 0]});
</script>

Woran kann es liegen, dass der Lightboxscript nicht ausgeführt wird? Warum funktioniert der Tooltipscript manchmal und manchmal nicht?

Gruß

Counter

**pidd** · 30.11.2010, 14:55

ich hatte so ein ähnliches problem auch schon,.. bin einfach auf jQuery umgestiegen. Vielleicht kommt das ja auch für dich in frage...

**counter18** · 30.11.2010, 14:58

Hast du da eine gute Alternative?

**pidd** · 30.11.2010, 15:41

ja jQuery,.. hat sich bei mir bewährt und ich kanns nur weiterempfehlen,.. vieeeeel einfacher! Nur falls du mehrere Frameworks nutzt beachte die noConflict() regel...

EDIT:

http://line25.com/articles/rounding-...ghtbox-scripts

http://speckyboy.com/2009/09/16/25-u...and-tutorials/

**counter18** · 01.12.2010, 10:03

Danke pidd für die Hilfe und den Tipp mit jQuery und noConflict. Bei noConflict steige ich nicht so durch, doch hab ich mich ein wenig erkundigt wie ich z. B. so etwas ähnliches mache mit jQuery wie mit Lightbox. Das Problem ist nur, dass ich jetzt keine Bilder mit dem Script öffnet. Ich versuche mich gerade mit Shadowbox. Hier ist mal mein Quelltext:

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>
<title>###</title>
  <script src="http://www.###.de/js/scroll.js" type="text/javascript"></script>


<!--[if IE ]>
<link rel="stylesheet" href="../style/ie.css" />
<![endif]-->
<!--[if !IE ]>
<link rel="stylesheet" href="../style/allbrowsers.css" />
<![endif]-->
<!--[if SAFARI ]>
<link rel="stylesheet" href="../style/safari.css" />
<![endif]-->

<link rel="shortcut icon" href="http://www.###/favicon.ico" type="image/x-icon" />
<meta name="description" content="###" />


<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);


function zeigen(id) {
    for (var i = 1; i<=12; i++) {
        if (document.getElementById("submenue"+i)) {document.getElementById("submenue"+i).style.display="none";}
    }
  if (document.getElementById(id)) {document.getElementById(id).style.display="block";}
}

function schliessen(id){
  document.getElementById(id).style.display="none";
}


//-->
</script>
<script type="text/javascript" src="http://www.###.de/js/prototype.js"></script>
<script type="text/javascript" src="http://www.###.de/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://www.###.de/js/shadowbox.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.###.de/js/shadowbox.css" media="screen" />
<script src="http://cdn.jquerytools.org/1.2.3/jquery.tools.min.js"></script>
<link rel="stylesheet" type="text/css" href="http//www.###.de/js/shadowbox.css">
<script type="text/javascript" src="http://www.###.de/js/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
 
</head>

<body background="../bilder/gras_4.jpg" onload="javascript:zeigen('submenue1');" onUnload="GUnload()">

     
   <div id="rahmen">
   
      <table cellpadding="0" cellspacing="0" width="802">
     
      <td width="621" id="window" valign="top" style="top:0px;height: 600px;" bgcolor="#FFF193">
<a style="height: 130px;" href="http://www.traum-projekt.com/forum/produkte/produkte_aktion.php?los=Aktionsangebote&amp;seite=1" id="aktion"></a><div style="height: 15px;"></div><div class="preis_body" style="z-index: 10;"><div class="preis_top" id="Viereck-Palisadenraufe für Rundballen 2m x 2m "Plus""><h1><a name="99512">Viereck-Palisadenraufe für Rundballen 2m x 2m "Plus"</a></h1><span class="artnr">Artikel Nr.:99512</span></div><div class="preis_footer"></div><div class="bild" id="bild_99512"><a href="http://www.###.de/produkte/image.php?f=../gross/99512/99512.jpg&amp;d=1" rel="shadowbox"><img border="0" src="http://www.###.de/produkte/image.php?f=../gross/99512/99512.jpg&amp;d=2" alt="" /></a>
<div style="width: 270px; height: 80px; position:relative; top:0px; left:0px;"><div class="scrollleft"><a href="#null" onmouseover="scrollDivRight('ScrollContainer_99512')" onmouseout="stopMe()"><img src="http://www.traum-projekt.com/forum/grafik/scrollleft.png" height="80" width="35" title="left" style="border-width:0" /></a></div><div class="scrollright"><a  href="#null" onmouseover="scrollDivLeft('ScrollContainer_99512')" onmouseout="stopMe()"><img src="http://www.traum-projekt.com/forum/grafik/scrollright.png" height="80" width="35" style="border-width:0" title="right" /></a></div><div class="ScrollContainer" id="ScrollContainer_99512"><div id="scroller"><div class="ScrollContent"><a href="http://www.###.de/produkte/image.php?f=../gross/99512/99512_2.jpg&amp;d=1" rel="shadowbox[99512]"><img class="imgscroll" border="0" src="http://www.###.de/produkte/image.php?f=../gross/99512/99512_2.jpg&amp;d=3" alt="" /></a></div>
<div class="ScrollContent"><a href="http://www.###.de/produkte/image.php?f=../gross/99512/99512_3.jpg&amp;d=1" rel="shadowbox[99512]"><img class="imgscroll" border="0" src="http://www.###.de/produkte/image.php?f=../gross/99512/99512_3.jpg&amp;d=3" alt="" /></a></div>
<div class="ScrollContent"><a href="http://www.###.de/produkte/image.php?f=../gross/99512/99512_4.jpg&amp;d=1" rel="shadowbox[99512]"><img class="imgscroll" border="0" src="http://www.###.de/produkte/image.php?f=../gross/99512/99512_4.jpg&amp;d=3" alt="" /></a></div>
<div class="ScrollContent"><a href="http://www.###.de/produkte/image.php?f=../gross/99512/99512_5.jpg&amp;d=1" rel="shadowbox[99512]"><img class="imgscroll" border="0" src="http://www.###.de/produkte/image.php?f=../gross/99512/99512_5.jpg&amp;d=3" alt="" /></a></div>
<div class="ScrollContent"><a href="http://www.###.de/produkte/image.php?f=../gross/99512/99512_6.jpg&amp;d=1" rel="shadowbox[99512]"><img class="imgscroll" border="0" src="http://www.###.de/produkte/image.php?f=../gross/99512/99512_6.jpg&amp;d=3" alt="" /></a></div>
<div class="ScrollContent"><a href="http://www.###.de/produkte/image.php?f=../gross/99512/99512_7.jpg&amp;d=1" rel="shadowbox[99512]"><img class="imgscroll" border="0" src="http://www.###.de/produkte/image.php?f=../gross/99512/99512_7.jpg&amp;d=3" alt="" /></a></div>
<div class="ScrollContent"><a href="http://www.###.de/produkte/image.php?f=../gross/99512/99512_8.jpg&amp;d=1" rel="shadowbox[99512]"><img class="imgscroll" border="0" src="http://www.###.de/produkte/image.php?f=../gross/99512/99512_8.jpg&amp;d=3" alt="" /></a></div>
<div class="ScrollContent"><a href="http://www.###.de/produkte/image.php?f=../gross/99512/99512_9.jpg&amp;d=1" rel="shadowbox[99512]"><img class="imgscroll" border="0" src="http://www.###.de/produkte/image.php?f=../gross/99512/99512_9.jpg&amp;d=3" alt="" /></a></div>
<div class="ScrollContent"><a href="http://www.###.de/produkte/image.php?f=../gross/99512/99512_10.jpg&amp;d=1" rel="shadowbox[99512]"><img class="imgscroll" border="0" src="http://www.###.de/produkte/image.php?f=../gross/99512/99512_10.jpg&amp;d=3" alt="" /></a></div>
</div></div></div></div><div style="float: right; margin: 5px 15px 5px 5px;"><hr /><table class="pr_table"><tr  style="height: 20px; font-size: 1.2em; font-weight: bold;"><td class="anzahl">Anzahl</td><td class="einheit">Einheit</td><td class="prpr">netto*</td><td class="prpr">brutto*</td></tr><tr style="background-color: #e1e1e1;"><td class="anzahl">1.00</td><td class="einheit">Stück</td><td class="prpr">839,00&nbsp;€</td><td class="prpr">998,41&nbsp;€</td></tr></table><br /><div style="float: right; margin: 5px;">*Preis pro Einheit</div><hr></div><div class="pr_text">Maße: 2m x 2m<br>
Höhe: max. 2,50 m<br>
Gewicht: ca. 450 kg<br>
12 Fressplätze<br/><br />
<li> feuerverzinkt<li> stabil <li> zum Befüllen kann eine Seite komplett geöffnet werden<li> geschützte Dreipunktanhängung<li> höhenverstellbare Kufen (an die Tiergröße anpassbar)
<li>umlaufend geschützte Dachkanten beugen Verletzungen vor und erhöhen die Stabilität
<li> zwei Vierkantrohr-Unterzüge als Verstärkung<li> abgerundete Palisadenfressgitter für verletzungsfreie Futteraufnahme<li> Lieferung als Bausatz</li><br>
<br>
<b>Beim Kauf von 3 Raufen (2x2m) bekommen sie ein Futtersparnetz geschenkt!</b>
</div><div id="spacer"></div>
     <tr>
        <td height="55" width="140" style="background:url(../grafik/unten.png);"><img src="http://www.traum-projekt.com/forum/grafik/rahmen_neu.png" alt="unterer Rahmen" /></td>
       <td width="621" height="55" id="hinweis_test">
      </td>
      <td height="55"><img src="http://www.traum-projekt.com/forum/grafik/rahmen.png" alt="ecke" /></td>      
     </tr>
    </table>
   </div>
     <div id="fuut">
  <div id="###-link">
    <a href="http://www.###.de">
      <img src="http://www.###.de/grafik/footer/##.png" title="###" alt="###" width="120" height="75" />
    </a>
  </div>
  <div id="###-agrifarm">
    <a href="#">
      <img src="http://www.###.de/grafik/footer/###.png" title="###" alt="###" width="120" height="75" />
    </a>
  </div>
  <div id="######">
    <a href="http://www.######.de">
      <img src="http://www.###.de/grafik/footer/###.png" title="###" alt="###" width="120" height="75" />
    </a>
  </div>
  <div id="###">
    <a href="http://www.######.de">
      <img src="http://www.###.de/grafik/footer/###.png" title="###" alt="###" width="120" height="75" />
    </a>
  </div>
  <div id="panel">
    <a href="http://www.###.de">
      <img src="http://www.###.de/grafik/footer/###.png" title="###" alt="###" width="120" height="75" />
    </a>
  </div>
  <div id="safety">
    <a href="http://www.safety-system.de">
      <img src="http://www.###.de/grafik/footer/###.png" title="###" alt="###" width="120" height="75" />
    </a>
  </div>
  <div id="cow">
    <a href="http://www.###.de">
      <img src="http://www.###.de/grafik/footer/###.png" title="###" alt="###" width="120" height="75" />
    </a>
  </div>
  <div id="horse">
    <a href="http://www.###.info">
      <img src="http://www.###.de/grafik/footer/###.png" title="###" alt="###" width="120" height="75" />
    </a>  
  </div>
  <div id="trailer">
    <a href="http://www.###.de">
      <img src="http://www.###.de/grafik/footer/###.png" title="###" alt="Link Trailer-Cam" width="120" height="75" />
    </a>
  </div>
</div>

<script type="text/javascript" language="JavaScript">


$.easing.bouncy = function (x, t, b, c, d) {
    var s = 0.30158;
    if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
    return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
}

$.tools.tooltip.addEffect("bouncy",

  // opening animation
  function(done) {
    this.getTip().animate({top: '+=5'}, 500, 'bouncy', done).show();
  },

  // closing animation
  function(done) {
    this.getTip().animate({top: '-=5'}, 200, 'bouncy', function()  {
      $(this).hide();
      done.call();
    });
  }
);


$("#fuut img[title]").tooltip({effect: 'bouncy',offset: [10, 0]});
</script>    

<!--
|  chCounter 3.1.3
|  a counter and statistics script written in PHP
|  (c) Christoph Bachner and Bert Koern 2007 - released under the GNU GPL
|  see at [ http://chCounter.org/ ]
-->


                                                                                                                                                                                                                                                                                                                                                             
</body>
</html>

**pidd** · 01.12.2010, 10:28

noConflict ist dazu da das beide Frameworks, jQuery und Prototype das Kürzel "$". Hast du vermutlich schon gesehn. Was du jetzt amchen solltest, wenn du das prototype Framework nicht mehr nutzt, es auch rauslöschen damit es nicht mehr angesprochen wird.
Sprich die ersten drei Zeilen kannst du nun löschen: (<script type="text/javascript" src="http://www.###.de/js/prototype.js"></script>
<script type="text/javascript" src="http://www.###.de/js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="http://www.###.de/js/shadowbox.js"></script>)

Wobei die dicke Zeile sowieso doppelt vorkommt. Schau mal obs nun funktioniert..

**pidd** · 01.12.2010, 10:30

Ach und noch eine kleine Anmerkung: Es macht einen unterschied, wann du deine Frameworks einbindest. mein tipp: Grundsätzlich am anfang bevor du JavaScript überhaupt anwendest.

zur Startseite vom TP

Thema: Lightbox und Tooltipscript funktioniert und auch nicht...

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Lightbox und Tooltipscript funktioniert und auch nicht...

Aktive Benutzer

Aktive Benutzer

Ähnliche Themen

[Sonstige] Lightbox lädt nicht

Auch das Kontaktformular funktioniert nicht

Lightbox - finde den Fehler nicht

DHTML Menu v5.7 All NS6 funktioniert es auch mit Frames?

Funktioniert revealTransFilter auch im Frame ?

Aktive Benutzer

Aktive Benutzer

Berechtigungen