lightbox mit mouseover-effekt

[alexanderhey]

Hallo.

Ich bin hier gerade fast am verzweifeln. Ich möchte die allseits bekannte lightbox-funktion mit dieser art mouseover-effekt kombinieren:

(maus über das bild fahren und dann wieder raus).

Es soll dann auf meiner Website so aussehen. In der Rubrik Retouche gibt es die kleinen Vorschaubilder. Bis hier hin ja alles kein Ding, das läuft ja auch. wenn man dann mit der Maus über dieses Bild fährt, soll es sich wie bei dem Link verändern. Ich bekomme es einfach nicht hin. Habt ihr sowas schonmal gemacht, bzw. Tipps für mich ?

Vielen Dank - Gruß Alex

 

[manfred_hst]

AW: lightbox mit mouseover-effekt

hi alex,
suche mal nach adipoli, da müsste was für Dich bei sein.
gruß
Manfred

 

[alexanderhey]

AW: lightbox mit mouseover-effekt

Hallo Manfred.

Vielen Dank für deine Antwort. Ich habe beim nächtlichen Schreiben noch was vergessen.

Es soll so aussehen: kleine Vorschaubilder (kein Ding)
draufklicken (lightbox zeigt eine größere Version an (kein Ding)
Wenn man mit der Maus über die größere Version fährt, soll es sich wie beschrieben verändern. Es soll also nicht in einem extra Fenster aufgemacht werden.

Gruß Alex

 

[Macewar]

AW: lightbox mit mouseover-effekt

Hi Alex,
ich hab so was schon x-mal programmiert:

Hier das Mousover Script:

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

Nartürlich musst du die Namen der Container anpassen und am besten benutzt du als Lightbox die hier -> http://fancybox.net/

Hier die HTML Struktur:

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

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

 

[alexanderhey]

AW: lightbox mit mouseover-effekt

Hallo Marcel.

Vielen Dank für die Mühe. Ich bin irgendwie zu blöd dafür, oder es ist schon zu spät. Jedenfalls bekomme ich das irgendwie nicht zum laufen. Werde das also morgen oder so nochmal probieren.

Gruß Alex

 

[Macewar]

AW: lightbox mit mouseover-effekt

Du kannst mir dan ja sagen wo du nicht weiter kommst, ich helfe dir gerne an der ein oder anderen stelle. Fals es allerdings lebensnotwendig sein sollte, kann ich dir auch ein fertiges Paket schnüren wo du nur noch die Bilder und Verlinkungen austauschen musst.

MFG Marcel

 

[woodoo]

AW: lightbox mit mouseover-effekt

Hallo Marcel,
ich habe in der suche nach änliches dein post gefunden, aber bei der anpassung breche ich mir finger in der nase...
wie muss ich dein script anpassen, wenn auf der seite mehrere thumbs als teaser zu großbilder stünden. und die größen sollen in fancybox-thumbs erscheinen?

jetzt stehen sie in einem div-container abe ohne mousover effekt:

<div id="content">
<a class="fancybox-thumbs" data-fancybox-group="thumb" href="res/images/01_b_paint.jpg" ><img alt="thumb01" src="res/images/01_s_paint.jpg">
</a>

<a class="fancybox-thumbs" data-fancybox-group="thumb" href="res/images/02_b_paint.jpg"><img src="res/images/02_s_paint.jpg" alt="thumb_02" />
</a>

<a class="fancybox-thumbs" data-fancybox-group="thumb" href="res/images/03_b_paint.jpg"><img src="res/images/03_s_paint.jpg" alt="thumb_03" />
</a>
</div>

gruß
woo

 

[Macewar]

AW: lightbox mit mouseover-effekt

Hi woodoo,

Du musst die Container anpassen die im Script sind, hier stehen <a> und Image tag in einem DIV dieses div ist mit dem Script verknüpft. Dieses DIV musst du anlegen und im Namen nach deinem Wunsch anpassen.

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

MFG Marcel