lightbox mit mouseover-effekt

lightbox mit mouseover-effekt | PSD-Tutorials.de

Erstellt von alexanderhey, 29.06.2012.

  1. alexanderhey

    alexanderhey Aktives Mitglied

    Dabei seit:
    14.09.2007
    Beiträge:
    1.682
    Geschlecht:
    männlich
    Ort:
    Sachsen-Anhalt
    Kameratyp:
    5D Mark III / Exa 1 SLR
    lightbox mit mouseover-effekt
    Hallo.

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

    http://www.designhey.de/retouche-test.htm (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
     
    #1      
  2. TutKit

    TutKit Vollzugriff

    Vollzugriff auf sämtliche Inhalte für Photoshop, InDesign, Affinity, 3D, Video & Office

    Suchst du einen effektiven Weg, um deine Geschäftsideen aber auch persönlichen Kenntnisse zu fördern? Teste unsere Lösung mit Vollzugriff auf Tutorials und Vorlagen/Erweiterungen, die dich schneller zum Ziel bringen. Klicke jetzt hier und teste uns kostenlos!

  3. manfred_hst

    manfred_hst Nicht mehr ganz neu hier

    Dabei seit:
    01.12.2010
    Beiträge:
    56
    Geschlecht:
    männlich
    lightbox mit mouseover-effekt
    AW: lightbox mit mouseover-effekt

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

    alexanderhey Aktives Mitglied

    Dabei seit:
    14.09.2007
    Beiträge:
    1.682
    Geschlecht:
    männlich
    Ort:
    Sachsen-Anhalt
    Kameratyp:
    5D Mark III / Exa 1 SLR
    lightbox mit mouseover-effekt
    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
     
    #3      
  5. Macewar

    Macewar Pixelschubser

    1
    Dabei seit:
    15.04.2011
    Beiträge:
    103
    Geschlecht:
    männlich
    Ort:
    Midgard
    Software:
    Photoshop,After Effects,Flash,Coda und Schnittprogramme
    Kameratyp:
    ich hasse Fotoapparate
    lightbox mit mouseover-effekt
    AW: lightbox mit mouseover-effekt

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

    Hier das Mousover Script:
    Code (Text):
    1. <script type="text/javascript">
    2. $(document).ready(function(){
    3.     $('#videoContainer IMG').each(function(){
    4.         if ($(this).attr('rel')) {
    5.            
    6.             $(this).mouseenter(function(){
    7.                 $(this).stop();
    8.                 $('#textblockContainer .'+$(this).attr('rel')).stop();
    9.                 //if ($(this).css('opacity') < 1) { return false; }
    10.                 $(this).animate({opacity:0},500,function(){});
    11.                 //$('#textblockContainer .'+$(this).attr('rel')).css('display','block');
    12.                 //$('#textblockContainer .text').css('display','none');
    13.                 $('#textblockContainer .'+$(this).attr('rel')).animate({height:'toggle'},500);
    14.             });
    15.             $(this).mouseleave(function(){
    16.                 $(this).stop();
    17.                 $('#textblockContainer .'+$(this).attr('rel')).stop();
    18.                 //if ($(this).css('opacity') > 0) { return false; }
    19.                 $(this).animate({opacity:1},500,function(){});
    20.                
    21.                 $('#textblockContainer .'+$(this).attr('rel')).animate({height:'toggle'},500,function(){
    22.                     $(this).css('height','');
    23.                 });
    24.             });            
    25.         }
    26.     });
    27. });
    28. </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:

    HTML:
    1.  
    2. <div id="videoContainer">
    3.   <a class="fancybox-media" href="http://www.youtube.com  /watch?v=C4AQVjwis4o&list=UU1149B-W0eHs_XWBq_8gBzw&index=9&feature=plcp">
    4. <img style="position:relative;top:-80px;" src="Images/video1_farbe.jpg" alt="laub" rel="text1"/></a>
    5.  <div id="hover-bottom-con-1">
    6. <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>
    7. </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
     
    #4      
  6. alexanderhey

    alexanderhey Aktives Mitglied

    Dabei seit:
    14.09.2007
    Beiträge:
    1.682
    Geschlecht:
    männlich
    Ort:
    Sachsen-Anhalt
    Kameratyp:
    5D Mark III / Exa 1 SLR
    lightbox mit mouseover-effekt
    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
     
    #5      
  7. Macewar

    Macewar Pixelschubser

    1
    Dabei seit:
    15.04.2011
    Beiträge:
    103
    Geschlecht:
    männlich
    Ort:
    Midgard
    Software:
    Photoshop,After Effects,Flash,Coda und Schnittprogramme
    Kameratyp:
    ich hasse Fotoapparate
    lightbox mit mouseover-effekt
    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
     
    #6      
  8. woodoo

    woodoo Noch nicht viel geschrieben

    Dabei seit:
    22.11.2006
    Beiträge:
    1
    lightbox mit mouseover-effekt
    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
     
    #7      
  9. Macewar

    Macewar Pixelschubser

    1
    Dabei seit:
    15.04.2011
    Beiträge:
    103
    Geschlecht:
    männlich
    Ort:
    Midgard
    Software:
    Photoshop,After Effects,Flash,Coda und Schnittprogramme
    Kameratyp:
    ich hasse Fotoapparate
    lightbox mit mouseover-effekt
    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.

    HTML:
    1. <div id="videoContainer">
    2.   <a class="fancybox-media" href="http://www.youtube.com  /watch?v=C4AQVjwis4o&list=UU1149B-W0eHs_XWBq_8gBzw&index=9&feature=plcp">
    3. <img style="position:relative;top:-80px;" src="Images/video1_farbe.jpg" alt="laub" rel="text1"/></a>
    4.  <div id="hover-bottom-con-1">
    5. <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>
    6. </div>
    MFG Marcel
     
    #8      
Seobility SEO Tool
x
×
×