Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

collapse

* Alles hat ein Ende...

Eine Weisheit der Dakota-Indianer sagt:
"Wenn Du entdeckst, dass Du ein totes Pferd reitest, steig ab!"

Vor fast fünf Jahren habe ich die NOF-Community gegründet und nachdem just zu diesem Zeitpunkt das „alte NOF-Forum“ quasi über Nacht vom Betreiber geschlossen wurde, war mein Forum für viele Nutzer von NetObjects Fusion eine willkommene Alternative.

Inzwischen sind weit über 5000 NetObjects-Nutzer in der NOF-Community registriert und täglich kommen weitere hinzu. An interessierten Mitgliedern fehlt es also nicht. Was aber fehlt, sind Mitglieder, die Lust haben, anderen Nutzern bei der Lösung ihrer vielfältigen Probleme in der Anwendung von NetObjects Fusion zu helfen. Vielleicht, weil viele von ihnen - ebenso wie ich - das Interesse an NOF verloren haben und zwischenzeitlich mit anderen Programmen arbeiten.

Aktuell ist es so, dass der Support wie die Kosten für den Betrieb der NOF-Community fast ausschließlich von mir übernommen werden. Dies, und die Tatsache, dass ich die Arbeit mit NetObjects Fusion nicht mehr für zeitgemäß halte, veranlasst mich, den aktiven Forenbetrieb zu beenden. Die Beiträge, Tipps und Anleitungen aus den letzten Jahren stehen ab heute nur noch als Nachschlagewerk zur Verfügung.

Ich bedanke mich an dieser Stelle ganz herzlich bei allen, die mich und die NOF-Community in den vergangenen Jahren unterstützt haben.

Beste Grüße nettesekel

Die letzten Beiträge

Autor Thema: Polaroid-Photobar-Gallery in NetObjects Fusion einbinden  (Gelesen 2524 mal)

0 Mitglieder und 1 Gast betrachten dieses Thema.

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Polaroid-Photobar-Gallery in NetObjects Fusion einbinden
« am: 12. September 2013, 23:11:57 »
Kürzlich hat Dada für Euch diese Galerie im Web ausgegraben. Ich finde sie eigentlich ganz nett und möchte im folgenden Tutorial für alle Interessierten erläutern, wie man diese Galerie in NetObjects Fusion einbinden kann.

Dass die Galerie auch in NOF-Projekten funktioniert und wie sie dann aussieht, kann man in diesem Beispielprojekt sehen und testen. (erstellt mit NOF9)

« Letzte Änderung: 13. September 2013, 13:45:22 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Polaroid-Photobar-Gallery in NetObjects Fusion einbinden
« Antwort #1 am: 13. September 2013, 13:51:20 »
Die Fotos für eure Bildgalerie müsst ihr in einem Fotobearbeitungsprogramm so vorbereiten, dass ihr von jedem Bild, das präsentiert werden soll, eine kleine und eine große Version zur Verfügung habt.



« Letzte Änderung: 15. September 2013, 22:18:30 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Polaroid-Photobar-Gallery in NetObjects Fusion einbinden
« Antwort #2 am: 13. September 2013, 23:01:28 »
Damit die Galerie funktionieren kann, benötigt ihr zunächst einige Dateien und Ordner.
Da die ursprünglichen Dateien (Quelle) für NOF ein wenig modifiziert werden mussten, könnt ihr euch diese Dateien hier herunterladen

Entpackt nach dem Download bitte die Zip-Datei. Der Inhalt der Zip-Datei sollte wie folgt aussehen:




Bevor wir diese Dateien nun auf den Server laden, legen wir erst noch die notwendigen Ordner für die Bilder unserer Galerie an.
Zuerst erstellt ihr einen Ordner und gebt ihm den Namen "images".
In diesem Ordner platziert ihr alle Alben die ihr in eurer Galerie anzeigen lassen möchtet.




Öffnet also nun den neu angelegten Ordner und erstellt darin den Ordner für euer erstes Album und nennt ihn "album1".
In diesen Ordner fügt ihr später alle Fotos ein, die in Album 1 präsentiert werden sollen.




Und noch einmal das selbe Spiel, öffnet auch diesen neu angelegten Ordner und erstellt in diesem Ordner wieder einen neuen Ordner, für welchen ihr den Namen "thumbs" vergebt.
In diesem Ordner müssen alle Vorschaubilder für Album 1 abgelegt werden, also die verkleinerten Versionen der Fotos aus Album 1.




Da jedes Album in einem extra Ordner liegt, könnt ihr es euch mit den Dateinamen der Bilder ruhig einfach machen und sie einfach durchnummerieren. So habe ich es zumindest gemacht.
« Letzte Änderung: 03. August 2015, 19:55:02 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Polaroid-Photobar-Gallery in NetObjects Fusion einbinden
« Antwort #3 am: 14. September 2013, 23:00:27 »
Für jedes weiter Album legt ihr im Orner "images" einen weiteren Ordner "album..." an und in jedem Albenordner einen Ordner "thumbs" für die jeweiligen Miniaturbilder.

Eure Fotos ordnet ihr dann den entsprechenden Ordnern zu.
« Letzte Änderung: 15. September 2013, 22:22:51 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Polaroid-Photobar-Gallery in NetObjects Fusion einbinden
« Antwort #4 am: 14. September 2013, 23:12:10 »
Nachdem all diese Vorbereitungen getroffen sind, ladet ihr die Dateien auf euren Webserver ins Rootverzeichnis. Woran erkennt ihr das Rootverzeichnis? Das Rootverzeichnis ist das Verzeichnis in welchem auch die "index.html" liegt.



Wenn ihr eure Galerie auch offline, also bei lokaler Publizierung testen möchtet, dann kopiert ihr die Dateien ebenfalls in den Ordner lokale Publizierung eures Projekts.
« Letzte Änderung: 15. September 2013, 23:21:40 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Polaroid-Photobar-Gallery in NetObjects Fusion einbinden
« Antwort #5 am: 14. September 2013, 23:39:46 »
Nun benötigt ihr einige Einfügungen im Seiten-html der zukünftigen Galerieseite. Da man eine solche Galerie wahrscheinlich nicht auf mehreren Seiten einbinden wird - zumindest nicht ein und die selbe Galerie - empfiehlt es sich, diese Einfügungen im Layout-html vorzunehmen. Ihr öffnet also die Seitenansicht der Seite, in welche ihr die Galerie einbinden möchtet und ruft dann die Layouteigenschaften auf. Das funktioniert mit einem einfachen Klick ins Layout oder durch drücken der Taste F9 auf eurer Tastatur. Die Eigenschaftenpalette zeigt nun die Layouteigenschaften an und ihr klickt als Nächstes den html-Button auf der EP an.


« Letzte Änderung: 15. September 2013, 22:37:52 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Polaroid-Photobar-Gallery in NetObjects Fusion einbinden
« Antwort #6 am: 14. September 2013, 23:40:23 »
Es öffnet sich das Fenster zur Eingabe des Codes.

Wenn ihr die Galerie auf der Startseite eures Projekts einbinden wollt, benutzt für die erste Einfügung bitte folgenden Code: (zutreffend bei Publizierung nach Assettyp)

Code: HTML5
  1. <script type="text/javascript" src="js/cufon-yui.js"></script>
  2. <script type="text/javascript" src="js/Note_this_400.font.js"></script>
  3. <script type="text/javascript">
  4.                 Cufon.replace('span');
  5.                 Cufon.replace('h1', {
  6.                 textShadow: '0px 1px #ddd'
  7.                 });
  8. <link media="screen" type="text/css" href="polaroid.css" rel="stylesheet" />

Soll die Galerie auf einer Unterseite laufen, müsst ihr diesen Code verwenden:

Code: HTML5
  1. <script type="text/javascript" src="../js/cufon-yui.js"></script>
  2. <script type="text/javascript" src="../js/Note_this_400.font.js"></script>
  3. <script type="text/javascript">
  4.                 Cufon.replace('span');
  5.                 Cufon.replace('h1', {
  6.                 textShadow: '0px 1px #ddd'
  7.                 });
  8. <link media="screen" type="text/css" href="../polaroid.css" rel="stylesheet" />

Er beinhaltet die Verknüpfungen zu allen notwendigen Script- und CSS-Dateien.
Diesen Code platziert ihr zwischen den Head-Tags.

NOF hat hier eine Hilfestellung für den Anwender integriert um die passende Stelle für die Einfügung zu finden.

In älteren NOF-Versionen ist das Fenster zweigeteilt und verschiedene Reiter sorgen für eine übersichtliche Einteilung. Man wählt also den Reiter "Zwischen den Head-tags" und fügt darunter den Code ein. Die Eingabe muss noch nicht mit OK bestätigt werden, da noch eine zweite Einfügung an anderer Stelle nötig ist.




In den neueren NOF-Versionen gibt es die Reiter nicht mehr, dafür gibt es Icons am oberen Fensterrand, welche man anklicken kann. Bei Klick auf das Icon "Zwischen head-Tags" positioniert das Programm den Cursor dann an der für die Einfügung richtigen Stelle. Man fügt den Code dort ein, wo der Cursor blinkt.



« Letzte Änderung: 15. September 2013, 20:02:31 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Polaroid-Photobar-Gallery in NetObjects Fusion einbinden
« Antwort #7 am: 14. September 2013, 23:42:54 »
Dann kommen wir auch gleich zur zweiten notwendigen Einfügung, welche ihr am Ende des Haupttextes paltzieren müsst.

Die Nutzer älterer NOF-Versionen aktivieren für die zweite Einfügung also den Reiter "Ende des Haupttextes" und fügen im unteren Teil des Fensters den Code ein.

Nutzer neuerer NOF-Versionen klicken das 5. Icon der oberen Symbolleiste an und fügen den Code dort ein, wo nun der Cursor blinkt.


Der einzufügende Code sieht wie folgt aus...
----------------------------------------------------------------------------------------------------------
Code für Startseite:
----------------------------------------------------------------------------------------------------------
Code: Javascript
  1. <!-- The JavaScript -->
  2.     <script src="js/jquery.transform-0.8.0.min.js"></script>
  3.     <script type="text/javascript">
  4.             $(function() {
  5.                                 var ie                  = false;
  6.                                 if ($.browser.msie) {
  7.                                         ie = true;
  8.                                 }
  9.                                 //current album/image displayed
  10.                                 var enableshow  = true;
  11.                                 var current             = -1;
  12.                                 var album               = -1;
  13.                                 //windows width
  14.                                 var w_width     = $(window).width();
  15.                                 //caching
  16.                                 var $albums     = $('#pp_thumbContainer div.album');
  17.                                 var $loader             = $('#pp_loading');
  18.                                 var $next               = $('#pp_next');
  19.                                 var $prev               = $('#pp_prev');
  20.                                 var $images             = $('#pp_thumbContainer div.content img');
  21.                                 var $back               = $('#pp_back');
  22.                                
  23.                                 //we wnat to spread the albums through the page equally
  24.                                 //number of spaces to divide with:number of albums plus 1
  25.                                 var nmb_albums  = $albums.length;
  26.                                 var spaces              = w_width/(nmb_albums+1);
  27.                                 var cnt                 = 0;
  28.                                 //preload all the images (thumbs)
  29.                                 var nmb_images  = $images.length;
  30.                                 var loaded      = 0;
  31.                                 $images.each(function(i){
  32.                                         var $image = $(this);
  33.                                         $('<img />').load(function(){
  34.                                                 ++loaded;
  35.                                                 if(loaded == nmb_images){
  36.                                                         //let's spread the albums equally on the bottom of the page
  37.                                                         $albums.each(function(){
  38.                                                                 var $this       = $(this);
  39.                                                                 ++cnt;
  40.                                                                 var left        = spaces*cnt - $this.width()/2;
  41.                                                                 $this.css('left',left+'px');
  42.                                                                 $this.stop().animate({'bottom':'0px'},500);
  43.                                                         }).unbind('click').bind('click',spreadPictures);
  44.                                                         //also rotate each picture of an album with a random number of degrees
  45.                                                         $images.each(function(){
  46.                                                                 var $this       = $(this);
  47.                                                                 var r           = Math.floor(Math.random()*41)-20;
  48.                                                                 $this.transform({'rotate'       : r + 'deg'});
  49.                                                         });
  50.                                                 }
  51.                                         }).attr('src', $image.attr('src'));
  52.                                 });
  53.                                
  54.                                 function spreadPictures(){
  55.                                         var $album      = $(this);
  56.                                         //track which album is opened
  57.                                         album           = $album.index();
  58.                                         //hide all the other albums
  59.                                         $albums.not($album).stop().animate({'bottom':'-90px'},300);
  60.                                         $album.unbind('click');
  61.                                         //now move the current album to the left
  62.                                         //and at the same time spread its images through
  63.                                         //the window, rotating them randomly. Also hide the description of the album
  64.                                        
  65.                                         //store the current left for the reverse operation
  66.                                         $album.data('left',$album.css('left'))
  67.                                                   .stop()
  68.                                                   .animate({'left':'0px'},500).find('.descr').stop().animate({'bottom':'-30px'},200);
  69.                                         var total_pic   = $album.find('.content').length;
  70.                                         var cnt                 = 0;
  71.                                         //each picture
  72.                                         $album.find('.content')
  73.                                                   .each(function(){
  74.                                                 var $content = $(this);
  75.                                                 ++cnt;
  76.                                                 //window width
  77.                                                 var w_width     = $(window).width();
  78.                                                 var spaces              = w_width/(total_pic+1);
  79.                                                 var left                = (spaces*cnt) - (140/2);
  80.                                                 var r                   = Math.floor(Math.random()*41)-20;
  81.                                                 //var r = Math.floor(Math.random()*81)-40;
  82.                                                 $content.stop().animate({'left':left+'px'},500,function(){
  83.                                                         $(this).unbind('click')
  84.                                                                    .bind('click',showImage)
  85.                                                                    .unbind('mouseenter')
  86.                                                                    .bind('mouseenter',upImage)
  87.                                                                    .unbind('mouseleave')
  88.                                                                    .bind('mouseleave',downImage);
  89.                                                 }).find('img')
  90.                                                   .stop()
  91.                                                   .animate({'rotate': r+'deg'},300);
  92.                                                 $back.stop().animate({'left':'0px'},300);
  93.                                         });
  94.                                 }
  95.                                
  96.                                 //back to albums
  97.                                 //the current album gets its innitial left position
  98.                                 //all the other albums slide up
  99.                                 //the current image slides out
  100.                                 $back.bind('click',function(){
  101.                                         $back.stop().animate({'left':'-100px'},300);
  102.                                         hideNavigation();
  103.                                         //there's a picture being displayed
  104.                                         //lets slide the current one up
  105.                                         if(current != -1){
  106.                                                 hideCurrentPicture();
  107.                                         }
  108.                                        
  109.                                         var $current_album = $('#pp_thumbContainer div.album:nth-child('+parseInt(album+1)+')');
  110.                                         $current_album.stop()
  111.                                                                   .animate({'left':$current_album.data('left')},500)
  112.                                                                   .find('.descr')
  113.                                                                   .stop()
  114.                                                                   .animate({'bottom':'0px'},500);
  115.                                        
  116.                                         $current_album.unbind('click')
  117.                                                                   .bind('click',spreadPictures);
  118.                                        
  119.                                         $current_album.find('.content')
  120.                                                           .each(function(){
  121.                                                                 var $content = $(this);
  122.                                                                 $content.unbind('mouseenter mouseleave click');
  123.                                                                 $content.stop().animate({'left':'0px'},500);
  124.                                                                 });
  125.                                                                
  126.                                         $albums.not($current_album).stop().animate({'bottom':'0px'},500);
  127.                                 });
  128.                                
  129.                                 //displays an image (clicked thumb) in the center of the page
  130.                                 //if nav is passed, then displays the next / previous one of the
  131.                                 //current album
  132.                                 function showImage(nav){
  133.                                         if(!enableshow) return;
  134.                                         enableshow = false;
  135.                                         if(nav == 1){
  136.                                                 //reached the first one
  137.                                                 if(current==0){
  138.                                                         enableshow = true;
  139.                                                         return;
  140.                                                 }
  141.                                                 var $content                    = $('#pp_thumbContainer div.album:nth-child('+parseInt(album+1)+')')
  142.                                                                                                   .find('.content:nth-child('+parseInt(current)+')');
  143.                                                 //reached the last one
  144.                                                 if($content.length==0){
  145.                                                         enableshow = true;
  146.                                                         current-=2;
  147.                                                         return;
  148.                                                 }      
  149.                                         }
  150.                                         else
  151.                                                 var $content                    = $(this);
  152.                                        
  153.                                         //show ajax loading image
  154.                                         $loader.show();
  155.                                        
  156.                                         //there's a picture being displayed
  157.                                         //lets slide the current one up
  158.                                         if(current != -1){
  159.                                                 hideCurrentPicture();
  160.                                         }
  161.                                        
  162.                                         current                                 = $content.index();
  163.                                         var $thumb                              = $content.find('img');
  164.                                         var imgL_source                 = $thumb.attr('alt');
  165.                                         var imgL_description    = $thumb.next().html();
  166.                                         //preload the large image to show
  167.                                         $('<img style=""/>').load(function(){
  168.                                                 var $imgL       = $(this);
  169.                                                 //resize the image based on the windows size
  170.                                                 resize($imgL);
  171.                                                 //create an element to include the large image
  172.                                                 //and its description
  173.                                                 var $preview = $('<div />',{
  174.                                                         'id'            : 'pp_preview',
  175.                                                         'className'     : 'pp_preview',
  176.                                                         'html'          : '<div class="pp_descr"><span>'+imgL_description+'</span></div>',
  177.                                                         'style'         : 'visibility:hidden;'
  178.                                                 });
  179.                                                 $preview.prepend($imgL);
  180.                                                 $('#pp_gallery').prepend($preview);
  181.                                                
  182.                                                 var largeW                              = $imgL.width()+20;
  183.                                                 var largeH                              = $imgL.height()+10+45;
  184.                                                 //change the properties of the wrapping div
  185.                                                 //to fit the large image sizes
  186.                                                 $preview.css({
  187.                                                         'width'                 :largeW+'px',
  188.                                                         'height'                :largeH+'px',
  189.                                                         'marginTop'             :-largeH/2-20+'px',
  190.                                                         'marginLeft'    :-largeW/2+'px',
  191.                                                         'visibility'    :'visible'
  192.                                                 });
  193.                                                 Cufon.replace('.pp_descr');
  194.                                                 //show navigation
  195.                                                 showNavigation();
  196.                                                
  197.                                                 //hide the ajax image loading
  198.                                                 $loader.hide();
  199.                                                
  200.                                                 //slide up (also rotating) the large image
  201.                                                 var r                   = Math.floor(Math.random()*41)-20;
  202.                                                 if(ie)
  203.                                                         var param = {
  204.                                                                 'top':'50%'
  205.                                                         };
  206.                                                 else
  207.                                                         var param = {
  208.                                                                 'top':'50%',
  209.                                                                 'rotate': r+'deg'
  210.                                                         };
  211.                                                 $preview.stop().animate(param,500,function(){
  212.                                                         enableshow = true;
  213.                                                 });
  214.                                         }).error(function(){
  215.                                                 //error loading image. Maybe show a message : 'no preview available'?
  216.                                         }).attr('src',imgL_source);    
  217.                                 }
  218.                                
  219.                                 //click next image
  220.                                 $next.bind('click',function(){
  221.                                         current+=2;
  222.                                         showImage(1);
  223.                                 });
  224.                                
  225.                                 //click previous image
  226.                                 $prev.bind('click',function(){
  227.                                         showImage(1);
  228.                                 });
  229.                                
  230.                                 //slides up the current picture
  231.                                 function hideCurrentPicture(){
  232.                                         current = -1;
  233.                                         var r   = Math.floor(Math.random()*41)-20;
  234.                                         if(ie)
  235.                                                 var param = {
  236.                                                         'top':'-150%'
  237.                                                 };
  238.                                         else
  239.                                                 var param = {
  240.                                                         'top':'-150%',
  241.                                                         'rotate': r+'deg'
  242.                                                 };
  243.                                         $('#pp_preview').stop()
  244.                                                                         .animate(param,500,function(){
  245.                                                                                 $(this).remove();
  246.                                                                         });
  247.                                 }
  248.                                
  249.                                 //shows the navigation buttons
  250.                                 function showNavigation(){
  251.                                         $next.stop().animate({'right':'0px'},100);
  252.                                         $prev.stop().animate({'left':'0px'},100);
  253.                                 }
  254.                                
  255.                                 //hides the navigation buttons
  256.                                 function hideNavigation(){
  257.                                         $next.stop().animate({'right':'-40px'},300);
  258.                                         $prev.stop().animate({'left':'-40px'},300);
  259.                                 }
  260.                                
  261.                                 //mouseenter event on each thumb
  262.                                 function upImage(){
  263.                                         var $content    = $(this);
  264.                                         $content.stop().animate({
  265.                                                 'marginTop'             : '-70px'
  266.                                         },400).find('img')
  267.                                                   .stop()
  268.                                                   .animate({'rotate': '0deg'},400);
  269.                                 }
  270.                                
  271.                                 //mouseleave event on each thumb
  272.                                 function downImage(){
  273.                                         var $content    = $(this);
  274.                                         var r                   = Math.floor(Math.random()*41)-20;
  275.                                         $content.stop().animate({
  276.                                                 'marginTop'             : '0px'
  277.                                         },400).find('img').stop().animate({'rotate': r + 'deg'},400);
  278.                                 }
  279.                                
  280.                                 //resize function based on windows size
  281.                                 function resize($image){
  282.                                         var widthMargin         = 50
  283.                                         var heightMargin        = 200;
  284.                                        
  285.                                         var windowH      = $(window).height()-heightMargin;
  286.                                         var windowW      = $(window).width()-widthMargin;
  287.                                         var theImage     = new Image();
  288.                                         theImage.src     = $image.attr("src");
  289.                                         var imgwidth     = theImage.width;
  290.                                         var imgheight    = theImage.height;
  291.  
  292.                                         if((imgwidth > windowW)||(imgheight > windowH)){
  293.                                                 if(imgwidth > imgheight){
  294.                                                         var newwidth = windowW;
  295.                                                         var ratio = imgwidth / windowW;
  296.                                                         var newheight = imgheight / ratio;
  297.                                                         theImage.height = newheight;
  298.                                                         theImage.width= newwidth;
  299.                                                         if(newheight>windowH){
  300.                                                                 var newnewheight = windowH;
  301.                                                                 var newratio = newheight/windowH;
  302.                                                                 var newnewwidth =newwidth/newratio;
  303.                                                                 theImage.width = newnewwidth;
  304.                                                                 theImage.height= newnewheight;
  305.                                                         }
  306.                                                 }
  307.                                                 else{
  308.                                                         var newheight = windowH;
  309.                                                         var ratio = imgheight / windowH;
  310.                                                         var newwidth = imgwidth / ratio;
  311.                                                         theImage.height = newheight;
  312.                                                         theImage.width= newwidth;
  313.                                                         if(newwidth>windowW){
  314.                                                                 var newnewwidth = windowW;
  315.                                                                 var newratio = newwidth/windowW;
  316.                                                                 var newnewheight =newheight/newratio;
  317.                                                                 theImage.height = newnewheight;
  318.                                                                 theImage.width= newnewwidth;
  319.                                                         }
  320.                                                 }
  321.                                         }
  322.                                         $image.css({'width':theImage.width+'px','height':theImage.height+'px'});
  323.                                 }
  324.             });
  325.         </script>

----------------------------------------------------------------------------------------------------------
Code für Unterseiten:
----------------------------------------------------------------------------------------------------------
Code: Javascript
  1. <!-- The JavaScript -->
  2.     <script src="../js/jquery.transform-0.8.0.min.js"></script>
  3.     <script type="text/javascript">
  4.             $(function() {
  5.                                 var ie                  = false;
  6.                                 if ($.browser.msie) {
  7.                                         ie = true;
  8.                                 }
  9.                                 //current album/image displayed
  10.                                 var enableshow  = true;
  11.                                 var current             = -1;
  12.                                 var album               = -1;
  13.                                 //windows width
  14.                                 var w_width     = $(window).width();
  15.                                 //caching
  16.                                 var $albums     = $('#pp_thumbContainer div.album');
  17.                                 var $loader             = $('#pp_loading');
  18.                                 var $next               = $('#pp_next');
  19.                                 var $prev               = $('#pp_prev');
  20.                                 var $images             = $('#pp_thumbContainer div.content img');
  21.                                 var $back               = $('#pp_back');
  22.                                
  23.                                 //we wnat to spread the albums through the page equally
  24.                                 //number of spaces to divide with:number of albums plus 1
  25.                                 var nmb_albums  = $albums.length;
  26.                                 var spaces              = w_width/(nmb_albums+1);
  27.                                 var cnt                 = 0;
  28.                                 //preload all the images (thumbs)
  29.                                 var nmb_images  = $images.length;
  30.                                 var loaded      = 0;
  31.                                 $images.each(function(i){
  32.                                         var $image = $(this);
  33.                                         $('<img />').load(function(){
  34.                                                 ++loaded;
  35.                                                 if(loaded == nmb_images){
  36.                                                         //let's spread the albums equally on the bottom of the page
  37.                                                         $albums.each(function(){
  38.                                                                 var $this       = $(this);
  39.                                                                 ++cnt;
  40.                                                                 var left        = spaces*cnt - $this.width()/2;
  41.                                                                 $this.css('left',left+'px');
  42.                                                                 $this.stop().animate({'bottom':'0px'},500);
  43.                                                         }).unbind('click').bind('click',spreadPictures);
  44.                                                         //also rotate each picture of an album with a random number of degrees
  45.                                                         $images.each(function(){
  46.                                                                 var $this       = $(this);
  47.                                                                 var r           = Math.floor(Math.random()*41)-20;
  48.                                                                 $this.transform({'rotate'       : r + 'deg'});
  49.                                                         });
  50.                                                 }
  51.                                         }).attr('src', $image.attr('src'));
  52.                                 });
  53.                                
  54.                                 function spreadPictures(){
  55.                                         var $album      = $(this);
  56.                                         //track which album is opened
  57.                                         album           = $album.index();
  58.                                         //hide all the other albums
  59.                                         $albums.not($album).stop().animate({'bottom':'-90px'},300);
  60.                                         $album.unbind('click');
  61.                                         //now move the current album to the left
  62.                                         //and at the same time spread its images through
  63.                                         //the window, rotating them randomly. Also hide the description of the album
  64.                                        
  65.                                         //store the current left for the reverse operation
  66.                                         $album.data('left',$album.css('left'))
  67.                                                   .stop()
  68.                                                   .animate({'left':'0px'},500).find('.descr').stop().animate({'bottom':'-30px'},200);
  69.                                         var total_pic   = $album.find('.content').length;
  70.                                         var cnt                 = 0;
  71.                                         //each picture
  72.                                         $album.find('.content')
  73.                                                   .each(function(){
  74.                                                 var $content = $(this);
  75.                                                 ++cnt;
  76.                                                 //window width
  77.                                                 var w_width     = $(window).width();
  78.                                                 var spaces              = w_width/(total_pic+1);
  79.                                                 var left                = (spaces*cnt) - (140/2);
  80.                                                 var r                   = Math.floor(Math.random()*41)-20;
  81.                                                 //var r = Math.floor(Math.random()*81)-40;
  82.                                                 $content.stop().animate({'left':left+'px'},500,function(){
  83.                                                         $(this).unbind('click')
  84.                                                                    .bind('click',showImage)
  85.                                                                    .unbind('mouseenter')
  86.                                                                    .bind('mouseenter',upImage)
  87.                                                                    .unbind('mouseleave')
  88.                                                                    .bind('mouseleave',downImage);
  89.                                                 }).find('img')
  90.                                                   .stop()
  91.                                                   .animate({'rotate': r+'deg'},300);
  92.                                                 $back.stop().animate({'left':'0px'},300);
  93.                                         });
  94.                                 }
  95.                                
  96.                                 //back to albums
  97.                                 //the current album gets its innitial left position
  98.                                 //all the other albums slide up
  99.                                 //the current image slides out
  100.                                 $back.bind('click',function(){
  101.                                         $back.stop().animate({'left':'-100px'},300);
  102.                                         hideNavigation();
  103.                                         //there's a picture being displayed
  104.                                         //lets slide the current one up
  105.                                         if(current != -1){
  106.                                                 hideCurrentPicture();
  107.                                         }
  108.                                        
  109.                                         var $current_album = $('#pp_thumbContainer div.album:nth-child('+parseInt(album+1)+')');
  110.                                         $current_album.stop()
  111.                                                                   .animate({'left':$current_album.data('left')},500)
  112.                                                                   .find('.descr')
  113.                                                                   .stop()
  114.                                                                   .animate({'bottom':'0px'},500);
  115.                                        
  116.                                         $current_album.unbind('click')
  117.                                                                   .bind('click',spreadPictures);
  118.                                        
  119.                                         $current_album.find('.content')
  120.                                                           .each(function(){
  121.                                                                 var $content = $(this);
  122.                                                                 $content.unbind('mouseenter mouseleave click');
  123.                                                                 $content.stop().animate({'left':'0px'},500);
  124.                                                                 });
  125.                                                                
  126.                                         $albums.not($current_album).stop().animate({'bottom':'0px'},500);
  127.                                 });
  128.                                
  129.                                 //displays an image (clicked thumb) in the center of the page
  130.                                 //if nav is passed, then displays the next / previous one of the
  131.                                 //current album
  132.                                 function showImage(nav){
  133.                                         if(!enableshow) return;
  134.                                         enableshow = false;
  135.                                         if(nav == 1){
  136.                                                 //reached the first one
  137.                                                 if(current==0){
  138.                                                         enableshow = true;
  139.                                                         return;
  140.                                                 }
  141.                                                 var $content                    = $('#pp_thumbContainer div.album:nth-child('+parseInt(album+1)+')')
  142.                                                                                                   .find('.content:nth-child('+parseInt(current)+')');
  143.                                                 //reached the last one
  144.                                                 if($content.length==0){
  145.                                                         enableshow = true;
  146.                                                         current-=2;
  147.                                                         return;
  148.                                                 }      
  149.                                         }
  150.                                         else
  151.                                                 var $content                    = $(this);
  152.                                        
  153.                                         //show ajax loading image
  154.                                         $loader.show();
  155.                                        
  156.                                         //there's a picture being displayed
  157.                                         //lets slide the current one up
  158.                                         if(current != -1){
  159.                                                 hideCurrentPicture();
  160.                                         }
  161.                                        
  162.                                         current                                 = $content.index();
  163.                                         var $thumb                              = $content.find('img');
  164.                                         var imgL_source                 = $thumb.attr('alt');
  165.                                         var imgL_description    = $thumb.next().html();
  166.                                         //preload the large image to show
  167.                                         $('<img style=""/>').load(function(){
  168.                                                 var $imgL       = $(this);
  169.                                                 //resize the image based on the windows size
  170.                                                 resize($imgL);
  171.                                                 //create an element to include the large image
  172.                                                 //and its description
  173.                                                 var $preview = $('<div />',{
  174.                                                         'id'            : 'pp_preview',
  175.                                                         'className'     : 'pp_preview',
  176.                                                         'html'          : '<div class="pp_descr"><span>'+imgL_description+'</span></div>',
  177.                                                         'style'         : 'visibility:hidden;'
  178.                                                 });
  179.                                                 $preview.prepend($imgL);
  180.                                                 $('#pp_gallery').prepend($preview);
  181.                                                
  182.                                                 var largeW                              = $imgL.width()+20;
  183.                                                 var largeH                              = $imgL.height()+10+45;
  184.                                                 //change the properties of the wrapping div
  185.                                                 //to fit the large image sizes
  186.                                                 $preview.css({
  187.                                                         'width'                 :largeW+'px',
  188.                                                         'height'                :largeH+'px',
  189.                                                         'marginTop'             :-largeH/2-20+'px',
  190.                                                         'marginLeft'    :-largeW/2+'px',
  191.                                                         'visibility'    :'visible'
  192.                                                 });
  193.                                                 Cufon.replace('.pp_descr');
  194.                                                 //show navigation
  195.                                                 showNavigation();
  196.                                                
  197.                                                 //hide the ajax image loading
  198.                                                 $loader.hide();
  199.                                                
  200.                                                 //slide up (also rotating) the large image
  201.                                                 var r                   = Math.floor(Math.random()*41)-20;
  202.                                                 if(ie)
  203.                                                         var param = {
  204.                                                                 'top':'50%'
  205.                                                         };
  206.                                                 else
  207.                                                         var param = {
  208.                                                                 'top':'50%',
  209.                                                                 'rotate': r+'deg'
  210.                                                         };
  211.                                                 $preview.stop().animate(param,500,function(){
  212.                                                         enableshow = true;
  213.                                                 });
  214.                                         }).error(function(){
  215.                                                 //error loading image. Maybe show a message : 'no preview available'?
  216.                                         }).attr('src',imgL_source);    
  217.                                 }
  218.                                
  219.                                 //click next image
  220.                                 $next.bind('click',function(){
  221.                                         current+=2;
  222.                                         showImage(1);
  223.                                 });
  224.                                
  225.                                 //click previous image
  226.                                 $prev.bind('click',function(){
  227.                                         showImage(1);
  228.                                 });
  229.                                
  230.                                 //slides up the current picture
  231.                                 function hideCurrentPicture(){
  232.                                         current = -1;
  233.                                         var r   = Math.floor(Math.random()*41)-20;
  234.                                         if(ie)
  235.                                                 var param = {
  236.                                                         'top':'-150%'
  237.                                                 };
  238.                                         else
  239.                                                 var param = {
  240.                                                         'top':'-150%',
  241.                                                         'rotate': r+'deg'
  242.                                                 };
  243.                                         $('#pp_preview').stop()
  244.                                                                         .animate(param,500,function(){
  245.                                                                                 $(this).remove();
  246.                                                                         });
  247.                                 }
  248.                                
  249.                                 //shows the navigation buttons
  250.                                 function showNavigation(){
  251.                                         $next.stop().animate({'right':'0px'},100);
  252.                                         $prev.stop().animate({'left':'0px'},100);
  253.                                 }
  254.                                
  255.                                 //hides the navigation buttons
  256.                                 function hideNavigation(){
  257.                                         $next.stop().animate({'right':'-40px'},300);
  258.                                         $prev.stop().animate({'left':'-40px'},300);
  259.                                 }
  260.                                
  261.                                 //mouseenter event on each thumb
  262.                                 function upImage(){
  263.                                         var $content    = $(this);
  264.                                         $content.stop().animate({
  265.                                                 'marginTop'             : '-70px'
  266.                                         },400).find('img')
  267.                                                   .stop()
  268.                                                   .animate({'rotate': '0deg'},400);
  269.                                 }
  270.                                
  271.                                 //mouseleave event on each thumb
  272.                                 function downImage(){
  273.                                         var $content    = $(this);
  274.                                         var r                   = Math.floor(Math.random()*41)-20;
  275.                                         $content.stop().animate({
  276.                                                 'marginTop'             : '0px'
  277.                                         },400).find('img').stop().animate({'rotate': r + 'deg'},400);
  278.                                 }
  279.                                
  280.                                 //resize function based on windows size
  281.                                 function resize($image){
  282.                                         var widthMargin         = 50
  283.                                         var heightMargin        = 200;
  284.                                        
  285.                                         var windowH      = $(window).height()-heightMargin;
  286.                                         var windowW      = $(window).width()-widthMargin;
  287.                                         var theImage     = new Image();
  288.                                         theImage.src     = $image.attr("src");
  289.                                         var imgwidth     = theImage.width;
  290.                                         var imgheight    = theImage.height;
  291.  
  292.                                         if((imgwidth > windowW)||(imgheight > windowH)){
  293.                                                 if(imgwidth > imgheight){
  294.                                                         var newwidth = windowW;
  295.                                                         var ratio = imgwidth / windowW;
  296.                                                         var newheight = imgheight / ratio;
  297.                                                         theImage.height = newheight;
  298.                                                         theImage.width= newwidth;
  299.                                                         if(newheight>windowH){
  300.                                                                 var newnewheight = windowH;
  301.                                                                 var newratio = newheight/windowH;
  302.                                                                 var newnewwidth =newwidth/newratio;
  303.                                                                 theImage.width = newnewwidth;
  304.                                                                 theImage.height= newnewheight;
  305.                                                         }
  306.                                                 }
  307.                                                 else{
  308.                                                         var newheight = windowH;
  309.                                                         var ratio = imgheight / windowH;
  310.                                                         var newwidth = imgwidth / ratio;
  311.                                                         theImage.height = newheight;
  312.                                                         theImage.width= newwidth;
  313.                                                         if(newwidth>windowW){
  314.                                                                 var newnewwidth = windowW;
  315.                                                                 var newratio = newwidth/windowW;
  316.                                                                 var newnewheight =newheight/newratio;
  317.                                                                 theImage.height = newnewheight;
  318.                                                                 theImage.width= newnewwidth;
  319.                                                         }
  320.                                                 }
  321.                                         }
  322.                                         $image.css({'width':theImage.width+'px','height':theImage.height+'px'});
  323.                                 }
  324.             });
  325.         </script>

Nach dieser Einfügung kann das Fenster mit einem Klick auf den OK-Button am unteren Fensterrand geschlossen werden.
« Letzte Änderung: 15. September 2013, 23:21:05 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Polaroid-Photobar-Gallery in NetObjects Fusion einbinden
« Antwort #8 am: 14. September 2013, 23:43:54 »
Nachdem die Einfügungen im Seiten-html platziert wurden, benötigen wir nun noch den Code für die eigentliche Bildgalerie. Dazu fügt ihr an einer beliebigen Stelle in eurem Layout ein Textfeld ein und im html dieses Textfeldes fügt ihr nun den Galeriecode ein. Wer nicht weiß, wie er dabei vorgehen muss, kann dies hier nocheinmal nachlesen: http://www.nof-community.de/index.php/topic,47.0.html

Der hier angebotene Code beinhaltet wie in der Beispielseite 5 Alben. Natürlich kann man Alben entfernen oder weitere hinzufügen.

----------------------------------------------------------------------------------------------------------
Code für Startseite
----------------------------------------------------------------------------------------------------------

Code: HTML5
  1.       <div class="pp_gallery" id="pp_gallery">
  2.       <div class="pp_loading" id="pp_loading"></div>
  3.       <div class="pp_next" id="pp_next"></div>
  4.       <div class="pp_prev" id="pp_prev"></div>
  5.       <div id="pp_thumbContainer">
  6.       <!--Beginn Album 1-->
  7.         <div class="album">
  8.           <div class="content"> <img alt="images/album1/1.jpg" src="images/album1/thumbs/1.jpg" />
  9.             <span>Spiraea</span> </div>
  10.           <div class="content"> <img alt="images/album1/2.jpg" src="images/album1/thumbs/2.jpg" />
  11.             <span>Hagebutte</span> </div>
  12.           <div class="content"> <img alt="images/album1/3.jpg" src="images/album1/thumbs/3.jpg" />
  13.             <span>Klatschmohn</span> </div>
  14.           <div class="content"> <img alt="images/album1/4.jpg" src="images/album1/thumbs/4.jpg" />
  15.             <span>Goldregen</span> </div>
  16.           <div class="content"> <img alt="images/album1/5.jpg" src="images/album1/thumbs/5.jpg" />
  17.             <span>Wiesenklee</span> </div>
  18.           <div class="descr"> Pflanzen </div>
  19.         </div>
  20.       <!--Beginn Album 2-->
  21.         <div class="album">
  22.           <div class="content"> <img alt="images/album2/1.jpg" src="images/album2/thumbs/1.jpg" />
  23.             <span>Rotrücken-Skalar</span> </div>
  24.           <div class="content"> <img alt="images/album2/2.jpg" src="images/album2/thumbs/2.jpg" />
  25.             <span>Denison-Barbe</span> </div>
  26.           <div class="content"> <img alt="images/album2/3.jpg" src="images/album2/thumbs/3.jpg" />
  27.             <span>Kongosalmler</span> </div>
  28.           <div class="content"> <img alt="images/album2/4.jpg" src="images/album2/thumbs/4.jpg" />
  29.             <span>Amanogarnele</span> </div>
  30.           <div class="content"> <img alt="images/album2/5.jpg" src="images/album2/thumbs/5.jpg" />
  31.             <span>Rauchskalar</span> </div>
  32.           <div class="descr"> Zierfische </div>
  33.         </div>
  34.       <!--Beginn Album 3-->
  35.         <div class="album">
  36.           <div class="content"> <img alt="images/album3/1.jpg" src="images/album3/thumbs/1.jpg" />
  37.             <span>Gartenrotschwanz</span> </div>
  38.           <div class="content"> <img alt="images/album3/2.jpg" src="images/album3/thumbs/2.jpg" />
  39.             <span>Kohlmeise</span> </div>
  40.           <div class="content"> <img alt="images/album3/3.jpg" src="images/album3/thumbs/3.jpg" />
  41.             <span>Spatz</span> </div>
  42.           <div class="content"> <img alt="images/album3/4.jpg" src="images/album3/thumbs/4.jpg" />
  43.             <span>Storch</span> </div>
  44.           <div class="content"> <img alt="images/album3/5.jpg" src="images/album3/thumbs/5.jpg" />
  45.             <span>Moewe</span> </div>
  46.           <div class="descr"> Vögel </div>
  47.         </div>
  48.       <!--Beginn Album 4-->
  49.         <div class="album">
  50.           <div class="content"> <img alt="images/album4/1.jpg" src="images/album4/thumbs/1.jpg" />
  51.             <span>Wackelbruecke</span> </div>
  52.           <div class="content"> <img alt="images/album4/2.jpg" src="images/album4/thumbs/2.jpg" />
  53.             <span>Wackelbruecke</span> </div>
  54.           <div class="content"> <img alt="images/album4/3.jpg" src="images/album4/thumbs/3.jpg" />
  55.             <span>Kletternetz</span> </div>
  56.           <div class="content"> <img alt="images/album4/4.jpg" src="images/album4/thumbs/4.jpg" />
  57.             <span>Rutsche</span> </div>
  58.           <div class="content"> <img alt="images/album4/5.jpg" src="images/album4/thumbs/5.jpg" />
  59.             <span>Wasserrad</span> </div>
  60.           <div class="descr"> Spielplätze </div>
  61.         </div>
  62.       <!--Beginn Album 5-->
  63.         <div class="album">
  64.           <div class="content"> <img alt="images/album5/1.jpg" src="images/album5/thumbs/1.jpg" />
  65.             <span>Haeschen</span> </div>
  66.           <div class="content"> <img alt="images/album5/2.jpg" src="images/album5/thumbs/2.jpg" />
  67.             <span>Zwergkaninchen</span> </div>
  68.           <div class="content"> <img alt="images/album5/3.jpg" src="images/album5/thumbs/3.jpg" />
  69.             <span>Schaf</span> </div>
  70.           <div class="content"> <img alt="images/album5/4.jpg" src="images/album5/thumbs/4.jpg" />
  71.             <span>Fohlen</span> </div>
  72.           <div class="content"> <img alt="images/album5/5.jpg" src="images/album5/thumbs/5.jpg" />
  73.             <span>Pferd</span> </div>
  74.           <div class="descr"> Haustiere </div>
  75.         </div>
  76.         <div class="pp_back" id="pp_back">Alben</div>
  77.       </div>
  78.     </div>



----------------------------------------------------------------------------------------------------------
Code für Unterseiten
----------------------------------------------------------------------------------------------------------

Code: HTML5
  1.       <div class="pp_gallery" id="pp_gallery">
  2.       <div class="pp_loading" id="pp_loading"></div>
  3.       <div class="pp_next" id="pp_next"></div>
  4.       <div class="pp_prev" id="pp_prev"></div>
  5.       <div id="pp_thumbContainer">
  6.       <!--Beginn Album 1-->
  7.         <div class="album">
  8.           <div class="content"> <img alt="../images/album1/1.jpg" src="../images/album1/thumbs/1.jpg" />
  9.             <span>Spiraea</span> </div>
  10.           <div class="content"> <img alt="../images/album1/2.jpg" src="../images/album1/thumbs/2.jpg" />
  11.             <span>Hagebutte</span> </div>
  12.           <div class="content"> <img alt="../images/album1/3.jpg" src="../images/album1/thumbs/3.jpg" />
  13.             <span>Klatschmohn</span> </div>
  14.           <div class="content"> <img alt="../images/album1/4.jpg" src="../images/album1/thumbs/4.jpg" />
  15.             <span>Goldregen</span> </div>
  16.           <div class="content"> <img alt="../images/album1/5.jpg" src="../images/album1/thumbs/5.jpg" />
  17.             <span>Wiesenklee</span> </div>
  18.           <div class="descr"> Pflanzen </div>
  19.         </div>
  20.       <!--Beginn Album 2-->
  21.         <div class="album">
  22.           <div class="content"> <img alt="../images/album2/1.jpg" src="../images/album2/thumbs/1.jpg" />
  23.             <span>Rotrücken-Skalar</span> </div>
  24.           <div class="content"> <img alt="../images/album2/2.jpg" src="../images/album2/thumbs/2.jpg" />
  25.             <span>Denison-Barbe</span> </div>
  26.           <div class="content"> <img alt="../images/album2/3.jpg" src="../images/album2/thumbs/3.jpg" />
  27.             <span>Kongosalmler</span> </div>
  28.           <div class="content"> <img alt="../images/album2/4.jpg" src="../images/album2/thumbs/4.jpg" />
  29.             <span>Amanogarnele</span> </div>
  30.           <div class="content"> <img alt="../images/album2/5.jpg" src="../images/album2/thumbs/5.jpg" />
  31.             <span>Rauchskalar</span> </div>
  32.           <div class="descr"> Zierfische </div>
  33.         </div>
  34.       <!--Beginn Album 3-->
  35.         <div class="album">
  36.           <div class="content"> <img alt="../images/album3/1.jpg" src="../images/album3/thumbs/1.jpg" />
  37.             <span>Gartenrotschwanz</span> </div>
  38.           <div class="content"> <img alt="../images/album3/2.jpg" src="../images/album3/thumbs/2.jpg" />
  39.             <span>Kohlmeise</span> </div>
  40.           <div class="content"> <img alt="../images/album3/3.jpg" src="../images/album3/thumbs/3.jpg" />
  41.             <span>Spatz</span> </div>
  42.           <div class="content"> <img alt="../images/album3/4.jpg" src="../images/album3/thumbs/4.jpg" />
  43.             <span>Storch</span> </div>
  44.           <div class="content"> <img alt="../images/album3/5.jpg" src="../images/album3/thumbs/5.jpg" />
  45.             <span>Moewe</span> </div>
  46.           <div class="descr"> Vögel </div>
  47.         </div>
  48.       <!--Beginn Album 4-->
  49.         <div class="album">
  50.           <div class="content"> <img alt="../images/album4/1.jpg" src="../images/album4/thumbs/1.jpg" />
  51.             <span>Wackelbruecke</span> </div>
  52.           <div class="content"> <img alt="../images/album4/2.jpg" src="../images/album4/thumbs/2.jpg" />
  53.             <span>Wackelbruecke</span> </div>
  54.           <div class="content"> <img alt="../images/album4/3.jpg" src="../images/album4/thumbs/3.jpg" />
  55.             <span>Kletternetz</span> </div>
  56.           <div class="content"> <img alt="../images/album4/4.jpg" src="../images/album4/thumbs/4.jpg" />
  57.             <span>Rutsche</span> </div>
  58.           <div class="content"> <img alt="../images/album4/5.jpg" src="../images/album4/thumbs/5.jpg" />
  59.             <span>Wasserrad</span> </div>
  60.           <div class="descr"> Spielplätze </div>
  61.         </div>
  62.       <!--Beginn Album 5-->
  63.         <div class="album">
  64.           <div class="content"> <img alt="../images/album5/1.jpg" src="../images/album5/thumbs/1.jpg" />
  65.             <span>Haeschen</span> </div>
  66.           <div class="content"> <img alt="../images/album5/2.jpg" src="../images/album5/thumbs/2.jpg" />
  67.             <span>Zwergkaninchen</span> </div>
  68.           <div class="content"> <img alt="../images/album5/3.jpg" src="../images/album5/thumbs/3.jpg" />
  69.             <span>Schaf</span> </div>
  70.           <div class="content"> <img alt="../images/album5/4.jpg" src="../images/album5/thumbs/4.jpg" />
  71.             <span>Fohlen</span> </div>
  72.           <div class="content"> <img alt="../images/album5/5.jpg" src="../images/album5/thumbs/5.jpg" />
  73.             <span>Pferd</span> </div>
  74.           <div class="descr"> Haustiere </div>
  75.         </div>
  76.         <div class="pp_back" id="pp_back">Alben</div>
  77.       </div>
  78.     </div>

In diesem Code sind einige Anpassungen nötig/möglich, welche ich im nächsten Post anhand einer Grafik erläutern möchte.
« Letzte Änderung: 15. September 2013, 23:16:23 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Polaroid-Photobar-Gallery in NetObjects Fusion einbinden
« Antwort #9 am: 15. September 2013, 22:49:54 »
Um den Code besser überblicken zu können, fügt ihn am besten zuerst in einen Editor - z.B. den Windows-Editor - ein...

« Letzte Änderung: 16. September 2013, 10:53:50 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Offline nettesekel

  • Administrator
  • *****
  • Beiträge: 8181
    • Schatznasen- Der Katzenblog
  • NOF-Version: NOF 11
  • System: Windows Vista
  • System-Typ: 32bit
Re: Polaroid-Photobar-Gallery in NetObjects Fusion einbinden
« Antwort #10 am: 15. September 2013, 23:20:10 »
Wenn ihr den Code angepasst und eingefügt habt, alle Dateien per FTP auf den Server geschoben habt und die fertige Galerie-Seite ebenfalls auf euren Server publiziert habt, dann sollte eure Galerie in voller Pracht zu sehen sein.

Ich wünsche euch viel Erfolg!

« Letzte Änderung: 14. März 2014, 11:32:54 von nettesekel »
Der neue Katzenblog mit vielen Tipps und Ideen für Katzenhalter.

Fragen - die inhaltlich ins Forum gehören - sind im Forum zu stellen und werden nur dort beantwortet. Anfragen dieser Art per PN bleiben unbeantwortet!


Avatar: fotolia.com  rat © Oleg Kozlov

Deutschsprachiges NOF - Forum

Support und Tutorials rund um das Thema NetObjects Fusion

 


Wenn dir dieser Artikel gefallen hat, dann empfehle ihn doch weiter... ;)