Fancybox einbinden

[marck49]

Hallo,
ich habe folgendes vor:
ich möchte zwei galerien auf einer webseite einfügen, die geteilt mit der fancybox angezeigt werden.
Im head-bereich:

<script type="text/javascript" src=">
 <script>
  !window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
 </script>
 <script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
 <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
 <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
 <script type="text/javascript">
  $(document).ready(function() {
   /*
   *   Examples - images
   */
   $("a#example1").fancybox();
   $("a#example2").fancybox({
    'overlayShow' : false,
    'transitionIn' : 'elastic',
    'transitionOut' : 'elastic'
   });
   $("a#example3").fancybox({
    'transitionIn' : 'none',
    'transitionOut' : 'none'
   });
   $("a#example4").fancybox({
    'opacity'  : true,
    'overlayShow' : false,
    'transitionIn' : 'elastic',
    'transitionOut' : 'none'
   });
   $("a#example5").fancybox();
   $("a#example6").fancybox({
    'titlePosition'  : 'outside',
    'overlayColor'  : '#000',
    'overlayOpacity' : 0.9
   });
   $("a#example7").fancybox({
    'titlePosition' : 'inside'
   });
   $("a#example8").fancybox({
    'titlePosition' : 'over'
   });
   $("a[rel=example_group]").fancybox({
    'transitionIn'  : 'none',
    'transitionOut'  : 'none',
    'titlePosition'  : 'over',
    'titleFormat'  : function(title, currentArray, currentIndex, currentOpts) {
     return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
    }
   });
   /*
   *   Examples - various
   */
   $("#various1").fancybox({
    'titlePosition'  : 'inside',
    'transitionIn'  : 'none',
    'transitionOut'  : 'none'
   });
   $("#various2").fancybox();
   $("#various3").fancybox({
    'width'    : '75%',
    'height'   : '75%',
    'autoScale'   : false,
    'transitionIn'  : 'none',
    'transitionOut'  : 'none',
    'type'    : 'iframe'
   });
   $("#various4").fancybox({
    'padding'   : 0,
    'autoScale'   : false,
    'transitionIn'  : 'none',
    'transitionOut'  : 'none'
   });
  });
 </script>

<p>
<a rel="example_group" href="./example/bild01.jpg" title="Erste Galerie"><img border="0" alt="example1" src="./example/bild-thub01.jpg" /></a>
<a rel="example_group" href="./example/bild02.jpg" title="Erste Galerie"><img border="0" alt="example2" src="example/bild-thub02.jpg" /></a>
<a rel="example_group" href="./example/bild03.jpg" title="Erste Galerie"><img border="0" alt="example3" src="./example/bild-thub03.jpg" /></a>
</p>
 
<p>
<a rel="example_group" href="./example/bild04.jpg" title="Zweite Galerie"><img border="0" alt="example1" src="./example/bild-thub04.jpg" /></a>
<a rel="example_group" href="./example/bild05.jpg" title="Zweite Galerie"><img border="0" alt="example2" src="example/bild-thub05.jpg" /></a>
<a rel="example_group" href="./example/bild06.jpg" title="Zweite Galerie"><img border="0" alt="example3" src="./example/bild-thub06.jpg" /></a>
</p>

Ich möchte erreichen das die bilder 1-3 in einer Galerie mit fancybox angezeigt werden und die bilder 4-6 in einer zweiten galerie mit fancybox angezeigt werden.

Das ist für euch sicher eine einfache Sache, für mich ein Problem

Vielen dank und gruß
marck

 

[Jonnsn]

AW: Fancybox einbinden

Hi,

http://fancybox.net/howto

Note - Galleries are created from elements who have the same "rel" tag

Du musst bei dir also in etwa so etwas machen:

<p>
<a rel="example_group" href="./example/bild01.jpg" title="Erste Galerie"><img border="0" alt="example1" src="./example/bild-thub01.jpg" /></a>
<a rel="example_group" href="./example/bild02.jpg" title="Erste Galerie"><img border="0" alt="example2" src="example/bild-thub02.jpg" /></a>
<a rel="example_group" href="./example/bild03.jpg" title="Erste Galerie"><img border="0" alt="example3" src="./example/bild-thub03.jpg" /></a>
</p>
 
<p>
<a rel="meineGruppe2" href="./example/bild04.jpg" title="Zweite Galerie"><img border="0" alt="example1" src="./example/bild-thub04.jpg" /></a>
<a rel="meineGruppe2" href="./example/bild05.jpg" title="Zweite Galerie"><img border="0" alt="example2" src="example/bild-thub05.jpg" /></a>
<a rel="meineGruppe2" href="./example/bild06.jpg" title="Zweite Galerie"><img border="0" alt="example3" src="./example/bild-thub06.jpg" /></a>
</p>

und im Head:

<script type="text/javascript">
  $(document).ready(function() {
   $("a[rel=example_group]").fancybox({
    'transitionIn'  : 'none',
    'transitionOut'  : 'none',
    'titlePosition'  : 'over',
    'titleFormat'  : function(title, currentArray, currentIndex, currentOpts) {
     return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
    }
   });
   $("a[rel=meineGruppe2]").fancybox({
    'transitionIn'  : 'none',
    'transitionOut'  : 'none',
    'titlePosition'  : 'over',
    'titleFormat'  : function(title, currentArray, currentIndex, currentOpts) {
     return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
    }
   });
  });
 </script>

Von Fancybox gibt es übrigens auch schon Version 2:
http://fancyapps.com/fancybox/

Gruß

 

[marck49]

AW: Fancybox einbinden

Vielen Dank für die Hilfe
Gruß marck