Lösungen zu Bibliotheken und Libraries

Aufgabe 1

Eine erste Lösung könnte z.B. wie folgt aussehen:
<!DOCTYPE html>
<html>
 
<head>
 
  <title>FancyBox Test</title>
  <meta charset="utf-8">
 
  <!-- jQuery einbinden -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 
  <!-- Fancybox einbinden -->
  <link type="text/css" rel="stylesheet" href="inc/fancybox/jquery.fancybox-1.3.4.css" media="screen" />
  <script type="text/javascript" src="inc/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
  <script type="text/javascript" src="inc/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
  <script type="text/javascript" src="inc/fancybox/jquery.easing-1.3.pack.js"></script>
 
  <script type="text/javascript">
 
    $(document).ready(function() {
 
      $("a.fancy").fancybox({
        'overlayShow': false,
        'transitionIn': 'elastic',
        'transitionOut': 'elastic',
        'titlePosition': 'inside'
      });
 
    });
 
  </script>
 
</head>
 
<body>
 
  <a class="fancy" href="./bilder/Hund.jpg"  title="schließt auch mit Klick außerhalb">           <img alt="Hund"  src="./bilder/Hund_s.jpg" /> </a>
  <a class="fancy" href="./bilder/Adler.jpg" title="schließt nur mit Klick auf Schließen-Symbol"> <img alt="Adler" src="./bilder/Adler_s.jpg"/> </a>
  <a class="fancy" href="./bilder/Affe.jpg"  title="Fenster folgt dem Scroll der Seite">          <img alt="Affe"  src="./bilder/Affe_s.jpg" /> </a>
 
</body>
 
</html>
Achten Sie bei der Verwendung von Fotos darauf, dass Sie diese kostenfrei verwenden dürfen!