Auf Thema antworten 2026

Beitrag

<blockquote data-quote="Macewar" data-source="post: 1996176" data-attributes="member: 513601">AW: lightbox mit mouseover-effektHi Alex,ich hab so was schon x-mal programmiert:Hier das Mousover Script:[CODE]&lt;script type=&quot;text/javascript&quot;&gt;$(document).ready(function(){&nbsp; &nbsp; $(&#039;#videoContainer IMG&#039;).each(function(){&nbsp; &nbsp; &nbsp; &nbsp; if ($(this).attr(&#039;rel&#039;)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).mouseenter(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).stop();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(&#039;#textblockContainer .&#039;+$(this).attr(&#039;rel&#039;)).stop();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //if ($(this).css(&#039;opacity&#039;) &lt; 1) { return false; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).animate({opacity:0},500,function(){});&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //$(&#039;#textblockContainer .&#039;+$(this).attr(&#039;rel&#039;)).css(&#039;display&#039;,&#039;block&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //$(&#039;#textblockContainer .text&#039;).css(&#039;display&#039;,&#039;none&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(&#039;#textblockContainer .&#039;+$(this).attr(&#039;rel&#039;)).animate({height:&#039;toggle&#039;},500);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).mouseleave(function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).stop();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(&#039;#textblockContainer .&#039;+$(this).attr(&#039;rel&#039;)).stop();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //if ($(this).css(&#039;opacity&#039;) &gt; 0) { return false; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).animate({opacity:1},500,function(){});&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(&#039;#textblockContainer .&#039;+$(this).attr(&#039;rel&#039;)).animate({height:&#039;toggle&#039;},500,function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).css(&#039;height&#039;,&#039;&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});&lt;/script&gt;[/CODE]Nartürlich musst du die Namen der Container anpassen und am besten benutzt du als Lightbox die hier -&gt; <a href="http://fancybox.net/" target="_blank">http://fancybox.net/</a> Hier die HTML Struktur:[HTML]&lt;div id=&quot;videoContainer&quot;&gt;&nbsp; &lt;a class=&quot;fancybox-media&quot; href=&quot;http://www.youtube.com&nbsp; /watch?v=C4AQVjwis4o&amp;list=UU1149B-W0eHs_XWBq_8gBzw&amp;index=9&amp;feature=plcp&quot;&gt;&lt;img style=&quot;position:relative;top:-80px;&quot; src=&quot;Images/video1_farbe.jpg&quot; alt=&quot;laub&quot; rel=&quot;text1&quot;/&gt;&lt;/a&gt;&nbsp;&lt;div id=&quot;hover-bottom-con-1&quot;&gt;&lt;a class=&quot;fancybox-media&quot; href=&quot;http://www.youtube.com/watch?v=C4AQVjwis4o&amp;list=UU1149B-W0eHs_XWBq_8gBzw&amp;index=9&amp;feature=plcp&quot;&gt;&lt;img style=&quot;position:relative; top:-199px;&quot; src=&quot;Images/video1_sw.jpg&quot; alt=&quot;sw&quot; rel=&quot;text1&quot;/&gt;&lt;/a&gt;&lt;/div&gt;[/HTML]Das währe wen du z.b ein Video einbinden willst, jetzt must du nur noch die Container Stylen und die fancybox auf die Bilder anpassen die Beschreibung dazu findest du auf der Seite.MFG Marcel</blockquote>

[QUOTE="Macewar, post: 1996176, member: 513601"] [b]AW: lightbox mit mouseover-effekt[/b] Hi Alex, ich hab so was schon x-mal programmiert: Hier das Mousover Script: [CODE]<script type="text/javascript"> $(document).ready(function(){ $('#videoContainer IMG').each(function(){ if ($(this).attr('rel')) { $(this).mouseenter(function(){ $(this).stop(); $('#textblockContainer .'+$(this).attr('rel')).stop(); //if ($(this).css('opacity') < 1) { return false; } $(this).animate({opacity:0},500,function(){}); //$('#textblockContainer .'+$(this).attr('rel')).css('display','block'); //$('#textblockContainer .text').css('display','none'); $('#textblockContainer .'+$(this).attr('rel')).animate({height:'toggle'},500); }); $(this).mouseleave(function(){ $(this).stop(); $('#textblockContainer .'+$(this).attr('rel')).stop(); //if ($(this).css('opacity') > 0) { return false; } $(this).animate({opacity:1},500,function(){}); $('#textblockContainer .'+$(this).attr('rel')).animate({height:'toggle'},500,function(){ $(this).css('height',''); }); }); } }); }); </script>[/CODE]Nartürlich musst du die Namen der Container anpassen und am besten benutzt du als Lightbox die hier -> [URL]http://fancybox.net/[/URL] Hier die HTML Struktur: [HTML] <div id="videoContainer"> <a class="fancybox-media" href="http://www.youtube.com /watch?v=C4AQVjwis4o&list=UU1149B-W0eHs_XWBq_8gBzw&index=9&feature=plcp"> <img style="position:relative;top:-80px;" src="Images/video1_farbe.jpg" alt="laub" rel="text1"/></a> <div id="hover-bottom-con-1"> <a class="fancybox-media" href="http://www.youtube.com/watch?v=C4AQVjwis4o&list=UU1149B-W0eHs_XWBq_8gBzw&index=9&feature=plcp"><img style="position:relative; top:-199px;" src="Images/video1_sw.jpg" alt="sw" rel="text1"/></a> </div>[/HTML]Das währe wen du z.b ein Video einbinden willst, jetzt must du nur noch die Container Stylen und die fancybox auf die Bilder anpassen die Beschreibung dazu findest du auf der Seite. MFG Marcel [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?