Gewusst wie: anzeigen fancybox Titel nur auf das Bild schweben

Ich bin mit dem Fancybox plugin für eine Bild-Galerie, und ich möchte, um das Bild anzuzeigen, nur Titel, wenn der Benutzer mit der Maus über das Bild. Ich kann nicht herausfinden, was Teil des Codes zu ändern, um dies zu erreichen.

Habe ich versucht, die Bearbeitung der CSS hinzufügen a :hover Zustand der folgenden:

.fancybox-title-over-wrap {
}

und ich habe sogar versucht, das spielen mit der CSS visibility-Einstellungen hier:

.fancybox-opened .fancybox-title {
}

Allerdings habe ich kein Glück gehabt.

Muss ich etwas ändern in der aktuellen JS-Datei? Jede Hilfe wäre enorm geschätzt!

Kann aj Js fillde?

InformationsquelleAutor user1186742 | 2012-02-03

Brauchen Sie nicht zu Durcheinander mit der original-js-oder css-Dateien. Sie müssen nur zu erstellen Sie Ihre eigenen benutzerdefinierten Skript und gelten dort einige fancybox API-Optionen und Methoden zu erreichen.

Zum Beispiel, dass Sie diesen html -

<a class="fancyLink" href="images/01.jpg" title="lorem ipsum">open image</a>

müssten Sie ein benutzerdefiniertes Skript, um das Feuer fancybox wie:

<script type="text/javascript">
$(document).ready(function() {
 $(".fancyLink").fancybox();
}); //ready
</script>

nun, im Skript oben, versuchen Sie die folgenden Optionen für die title Effekt, den Sie möchten:

<script type="text/javascript">
$(document).ready(function() {
 $(".fancyLink").fancybox({
  helpers: {
   title : {
    type : 'over'
   }
  },
  afterShow : function() {
   $(".fancybox-title").hide();
   $(".fancybox-wrap").hover(function() {
     $(".fancybox-title").show();
    }, function() {
     $(".fancybox-title").hide();
   });
  }
 });
}); //ready
</script>

Könnten Sie auch hinzufügen, einige schöne animation zu zeigen, die title wie

<script type="text/javascript">
$(document).ready(function() {
 $(".fancyLink").fancybox({
  helpers: {
   title : {
    type : 'over'
   }
  },
  afterShow : function() {
   $(".fancybox-title").hide();
   $(".fancybox-wrap").hover(function() {
     $(".fancybox-title").stop(true,true).slideDown(200);
    }, function() {
     $(".fancybox-title").stop(true,true).slideUp(200);
   });
  }
 });
}); //ready
</script>

HINWEIS: dies ist fancybox v2.x

Vielen, vielen Dank! Dies funktionierte perfekt. 😀
also bitte vergessen Sie nicht, markieren Sie diese als die richtige Antwort 😉

InformationsquelleAutor JFK

-1

Von Ihrer Seite:

Stellen Sie sicher, dass diese in Ihrer Webseite an der Spitze:

<!-- Add jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.0.4"></script>

<!-- Optionaly add button and/or thumbnail helpers -->
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=2.0.4"></script>

<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.4"></script>

Dann fügen Sie diese Art von syntax, um die Bilder, die Sie wollen, dies zu tun mit.

<a class="fancybox" rel="group" href="big_image_1.jpg"><img src="small_image_1.jpg" alt="" /></a>
<a class="fancybox" rel="group" href="big_image_2.jpg"><img src="small_image_2.jpg" alt="" /></a>

Schließlich machen es alle Funktion mit ein bisschen jScript.

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox();
    });
</script>

Und wenn Sie immer noch Schwierigkeiten haben, finden Sie hier: http://docs.jquery.com/Tutorials:How_jQuery_Works

Machen die Beschreibungen erscheinen wie von Ihnen gewünscht, vielleicht versuchen, diese in den javascript:

$(document).ready(function() {
    $(".fancybox").fancybox({
        openEffect  : 'none',
        closeEffect : 'none'
    });
});

Und diese als Bild syntax:

<a class="fancybox" rel="gallery1" href="http://path-to-image.com/images/photo.jpg" title="Some Description Here.">
    <img src="http://path-to-image.com/images/photo.jpg" alt="" />
</a>

es scheint, dass Sie nicht verstehen, die Frage

InformationsquelleAutor ionFish

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.