Kleines Modul: JQuery InnerFade Header

Gesperrt
matt.loker
Beiträge: 203
Registriert: Mo 7. Mai 2007, 09:05
Kontaktdaten:
Kontaktdaten von matt.loker

Kleines Modul: JQuery InnerFade Header

Beitrag von matt.loker »

Dieses kleine Modul basiert auf dem "Modul: Lightbox-Gallery" von Phillip Baumgärtner/baumpaul und Christian Müller/GaMbIt aus diesem Beitrag und dem "InnerFade with JQuery"-Script von Medienfreunde.com (medienfreunde.com/lab/innerfade/) und unterschiedlichen Code-Schnippseln aus anderen Modulen.

Ich bin kein PHP-Profi deshalb bitte ich um Nachsicht falls es nicht perfekt ist oder noch Fehler versteckt liegen. Bei mir funktioniert es und deshalb poste ich es!

Beschreibung:

Code: Alles auswählen

*************** Ausgangsmodul: Lightbox-Gallery ***************
*                                                             *
* Version     :  1.2                                          *
* Autor       :  Phillip Baumgärtner (www.ittool.de)          *
* Erstellt am :  19.02.2007                                   *
* Last Update :  09.03.2007                                   *
*                                                             *
* Version     :  1.2.1                                        *
* Autor       :  Christian Müller / GaMbIt (www.impigra.de)   *
* Erstellt am :  15.03.2008                                   *
*                                                             *
***************************************************************

********* Modulmodifikation: JQuery InnerFade Header **********
*                                                             *
* Version     :  1.0                                          *
* Autor       :  Matt.loker                                   *
* Erstellt am :  27.10.2009                                   *
* Last Update :  28.10.2009                                   *
*                                                             *
***************************************************************
INPUT:

Code: Alles auswählen

/*************************** INPUT ****************************/
?>
<table>
  <tr>
    <td valign="top"><b><?php echo mi18n("Skalieren");?></b><br /><?php echo mi18n("Breite").' x '.mi18n("H&ouml;he"); ?></td>
    <td valign="top"><input type="text" name="<?php echo "CMS_VAR[0]"; ?>" value="<?php echo "CMS_VALUE[0]"; ?>" style="width:40px;"> x <input type="text" name="<?php echo "CMS_VAR[1]"; ?>" value="<?php echo "CMS_VALUE[1]"; ?>" style="width:40px;"></td>
    <td valign="top"><div style="border:1px solid #999;background-color:#EDDBEB;padding:3px;width:250px;"><?php echo mi18n("Wird keine Größe zur Skalierung der Bilder angegeben so werden die Vorschaubilder auf eine Größe von 300 x 300px skaliert.");?></div></td>
  </tr>
<!-- Skalierung -->
<tr>
    <td valign="top"><b><?php echo mi18n("Beschneiden");?></b><br /><?php echo mi18n("Breite").' x '.mi18n("H&ouml;he"); ?></td>
    <td valign="top"><input type="text" name="<?php echo "CMS_VAR[7]"; ?>" value="<?php echo "CMS_VALUE[7]"; ?>" style="width:40px;"> x <input type="text" name="<?php echo "CMS_VAR[8]"; ?>" value="<?php echo "CMS_VALUE[8]"; ?>" style="width:40px;"></td>
    <td valign="top"><div style="border:1px solid #999;background-color:#EDDBEB;padding:3px;width:250px;"><?php echo mi18n("Wird keine Größe zur Beschneidung angegeben werden die Vorschaubilder auch nicht beschnitten.");?></div></td>
  </tr>
<!-- Ende Skalierung -->
  <?php
  $sql = "SELECT DISTINCT dirname FROM ".$cfg['tab']['upl']." ORDER BY dirname";
  $db->query($sql);
  echo '<tr><td>'.mi18n("Verzeichnis auswählen").'</td><td colspan="2">
        <select name="CMS_VAR[4]" size="1" style="width: 320px">
            <option value="">'.mi18n("Nichts ausgewählt").'</option>';
            while ($db->next_record()) {
                if ( stristr($db->f("dirname"),'CVS/') === FALSE ) {
                    if ($db->f("dirname")=="CMS_VALUE[4]") {
                        echo '<option value="'.$db->f("dirname").'" selected="selected">'.$db->f("dirname").'</option>';
                    } else {
                        echo '<option value="'.$db->f("dirname").'">'.$db->f("dirname").'</option>';
                    }
                }
            }
    echo '</select></td></tr>';?>
<?php
$sort = "";
if("CMS_VALUE[5]" == "shuffle" || "CMS_VALUE[5]" == "") {
 $shuffle = "checked";
} else {
 $shuffle = "";
}
?>
    <tr>
        <td><?php echo mi18n("Ausgabe");?></td>
        <td colspan="2">
            <input name="CMS_VAR[5]" type="checkbox" value="shuffle" <?php echo $shuffle; ?>/>  <?php echo mi18n("Zufällige Ausgabe"); ?>
        </td>
    </tr>
<tr>
    <td valign="top"><?php echo mi18n("Max. Anzahl der geladenen Bilder (0=Alles Bilder) ");?></td>
    <td valign="top"><input type="text" name="<?php echo "CMS_VAR[6]"; ?>" value="<?php echo "CMS_VALUE[6]"; ?>" style="width:40px;"></td>
  </tr>
</table>
<?php
OUTPUT:

Code: Alles auswählen

<?php 
/*************************** OUTPUT ****************************/
cInclude("includes", "functions.api.images.php");

echo '<ul id="kopfgrafik">';

/* Bildbeschnitt */
$iWidth_crop = "CMS_VALUE[7]";
$iHeight_crop = "CMS_VALUE[8]";
if ($iWidth_crop == 0) {
  $iWidth_crop = '';
}
if ($iHeight_crop == 0) {
  $iHeight_crop = '';
}
/* Maximale Anzahl von Bilder im Fade */
$anzahl = "CMS_VALUE[6]";

/* Bildgröße */
$iWidth = "CMS_VALUE[0]";
$iHeight = "CMS_VALUE[1]";
if ($iWidth == 0) {
  $iWidth = 300;
}
if ($iHeight == 0) {
  $iHeight = 300;
}
/* Link zum Bilderordner */
$sPath = "CMS_VALUE[4]"; 
if ($sPath=='') {
    $sPath = $cfgClient[$client]["path"]["frontend"] . $cfgClient[$client]["upl"]["frontendpath"] . "kopfgrafik/";
} else {
    $sPath = $cfgClient[$client]["path"]["frontend"] . $cfgClient[$client]["upl"]["frontendpath"] . "CMS_VALUE[4]";
    $sPath_normal = "CMS_VALUE[4]";
}
$bilder = glob( "$sPath/{*.gif,*.jpg,*.png,*.bmp}", GLOB_BRACE );
$imganzahl= count($bilder);

/* Zufällige Ausgabe */
$shuffle = "CMS_VALUE[5]";
if ( $shuffle == "shuffle"){ shuffle( $bilder );  } else {$bilder;}
if ($anzahl <= $imganzahl){ $anzahl;} else if($anzahl == 0){$anzahl = $imganzahl;} else{ $anzahl = $imganzahl;}

for ($i=0; $i<$anzahl; $i++)
{
 $sScaledImage_cr = cApiImgScale($bilder[$i], $iWidth, $iHeight, false, false);
 $sScaledImage_cr = str_replace($cfgClient[$client]["path"]["htmlpath"],"",$sScaledImage_cr);
 $sScaledImage = cApiImgScale($sScaledImage_cr, $iWidth_crop, $iHeight_crop, true, true); 
 /* path */
 $sScaledImage = str_replace($cfgClient[$client]["path"]["htmlpath"],"",$sScaledImage);
 echo '<li><img src="' .$sScaledImage .'" alt="Bild" border="0"></li>';
}
echo '</ul>';
?>
Dann muss man noch in den Head-Bereich der HTML-Seite die jQuery-Scripte anziehen die da wären:
DIE JQUERY-LIBRARY

Code: Alles auswählen

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
Das InnerFade-Script von Medienfreunde abzuspeichern als jquery.innerfade.js

Code: Alles auswählen

/* =========================================================

// jquery.innerfade.js

// Datum: 2008-02-14
// Firma: Medienfreunde Hofmann & Baldes GbR
// Author: Torsten Baldes
// Mail: t.baldes@medienfreunde.com
// Web: http://medienfreunde.com

// based on the work of Matt Oakes http://portfolio.gizone.co.uk/applications/slideshow/
// and Ralf S. Engelschall http://trainofthoughts.org/

 *
 *  <ul id="news"> 
 *      <li>content 1</li>
 *      <li>content 2</li>
 *      <li>content 3</li>
 *  </ul>
 *  
 *  $('#news').innerfade({ 
 *	  animationtype: Type of animation 'fade' or 'slide' (Default: 'fade'), 
 *	  speed: Fading-/Sliding-Speed in milliseconds or keywords (slow, normal or fast) (Default: 'normal'), 
 *	  timeout: Time between the fades in milliseconds (Default: '2000'), 
 *	  type: Type of slideshow: 'sequence', 'random' or 'random_start' (Default: 'sequence'), 
 * 		containerheight: Height of the containing element in any css-height-value (Default: 'auto'),
 *	  runningclass: CSS-Class which the container get’s applied (Default: 'innerfade'),
 *	  children: optional children selector (Default: null)
 *  }); 
 *

// ========================================================= */


(function($) {

    $.fn.innerfade = function(options) {
        return this.each(function() {   
            $.innerfade(this, options);
        });
    };

    $.innerfade = function(container, options) {
        var settings = {
        		'animationtype':    'fade',
            'speed':            'normal',
            'type':             'sequence',
            'timeout':          2000,
            'containerheight':  'auto',
            'runningclass':     'innerfade',
            'children':         null
        };
        if (options)
            $.extend(settings, options);
        if (settings.children === null)
            var elements = $(container).children();
        else
            var elements = $(container).children(settings.children);
        if (elements.length > 1) {
            $(container).css('position', 'relative').css('height', settings.containerheight).addClass(settings.runningclass);
            for (var i = 0; i < elements.length; i++) {
                $(elements[i]).css('z-index', String(elements.length-i)).css('position', 'absolute').hide();
            };
            if (settings.type == "sequence") {
                setTimeout(function() {
                    $.innerfade.next(elements, settings, 1, 0);
                }, settings.timeout);
                $(elements[0]).show();
            } else if (settings.type == "random") {
            		var last = Math.floor ( Math.random () * ( elements.length ) );
                setTimeout(function() {
                    do { 
												current = Math.floor ( Math.random ( ) * ( elements.length ) );
										} while (last == current );             
										$.innerfade.next(elements, settings, current, last);
                }, settings.timeout);
                $(elements[last]).show();
						} else if ( settings.type == 'random_start' ) {
								settings.type = 'sequence';
								var current = Math.floor ( Math.random () * ( elements.length ) );
								setTimeout(function(){
									$.innerfade.next(elements, settings, (current + 1) %  elements.length, current);
								}, settings.timeout);
								$(elements[current]).show();
						}	else {
							alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');
						}
				}
    };

    $.innerfade.next = function(elements, settings, current, last) {
        if (settings.animationtype == 'slide') {
            $(elements[last]).slideUp(settings.speed);
            $(elements[current]).slideDown(settings.speed);
        } else if (settings.animationtype == 'fade') {
            $(elements[last]).fadeOut(settings.speed);
            $(elements[current]).fadeIn(settings.speed, function() {
							removeFilter($(this)[0]);
						});
        } else
            alert('Innerfade-animationtype must either be \'slide\' or \'fade\'');
        if (settings.type == "sequence") {
            if ((current + 1) < elements.length) {
                current = current + 1;
                last = current - 1;
            } else {
                current = 0;
                last = elements.length - 1;
            }
        } else if (settings.type == "random") {
            last = current;
            while (current == last)
                current = Math.floor(Math.random() * elements.length);
        } else
            alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');
        setTimeout((function() {
            $.innerfade.next(elements, settings, current, last);
        }), settings.timeout);
    };

})(jQuery);

// **** remove Opacity-Filter in ie ****
function removeFilter(element) {
	if(element.style.removeAttribute){
		element.style.removeAttribute('filter');
	}
}
und die
InnerFade Steuerung

Code: Alles auswählen

<script type="text/javascript">
    //<![CDATA[
    jQuery.noConflict();
 
    // Benutze jQuery über jQuery(...)
jQuery(document).ready(function(){
    jQuery('#kopfgrafik').innerfade({ 
        speed: 1500,
        timeout: 5000,
        type: 'sequence',
        containerheight: '200px'
        }); 
    });
 
    // Benutze Prototype über $(...), etc.
    $('someid').hide();
    //]]>
</script>
Die Steuereinheit ist so eingebaut, dass meistens zu keine Konflikte mit Prototype kommen sollte.
alle 3 Scripte sehen eingebunden so aus

Code: Alles auswählen

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="js/jquery.innerfade.js" type="text/javascript"></script>
<script type="text/javascript">
    //<![CDATA[
    jQuery.noConflict();
 
    // Benutze jQuery über jQuery(...)
jQuery(document).ready(function(){
    jQuery('#kopfgrafik').innerfade({ 
        speed: 1500,
        timeout: 5000,
        type: 'sequence',
        containerheight: '200px'
        }); 
    });
 
    // Benutze Prototype über $(...), etc.
    $('someid').hide();
    //]]>
</script>
</head>
Sollte es Fragen zur Ansteuerung des jQuery-Scripts geben geht einfach auf die Seite von Medienfreunde.com - den Link findet ihr oben.
Ich denke ansonsten ist das Modul selbsterklärend!

Ich hoffe das kleine Script funktioniert auch - bin kein PHP-Crack - zumindest funktioniert es bei mir

Viele Grüße
Matt.loker

EDIT: HABE DEN VERMEINLICHEN LINK ENTFERNTE!
Zuletzt geändert von matt.loker am Mi 28. Okt 2009, 21:58, insgesamt 2-mal geändert.
Nach oben
BagHira
Beiträge: 486
Registriert: Do 23. Feb 2006, 19:42
Wohnort: Tirschenreuth / Oberpfalz / Bayern
Kontaktdaten:
Kontaktdaten von BagHira

Re: Kleines Modul: JQuery InnerFade Header

Beitrag von BagHira »

Mein Virenscanner (Avira Antivir Premium) hat bei der folgenden Seite angeschlagen: medienfreunde.com/lab/innerfade/
Laut Antivir enthält sie den/die Trojaner / Malware "HTML/Infected.WebPage.Gen".

Edit: AVG Free hingegen findet nichts.
Zuletzt geändert von BagHira am Mi 28. Okt 2009, 18:41, insgesamt 1-mal geändert.
Gruß Holger

Träumer haben vielleicht keinen Plan, aber Realisten haben keine Vision.

Handgewickelte Glasperlen Facebook Google+
Nach oben
Oldperl
Beiträge: 4316
Registriert: Do 30. Jun 2005, 22:56
Wohnort: Eltmann, Unterfranken, Bayern
Hat sich bedankt: 6 Mal
Danksagung erhalten: 4 Mal
Kontaktdaten:
Kontaktdaten von Oldperl

Re: Kleines Modul: JQuery InnerFade Header

Beitrag von Oldperl »

Hallo,

@BagHira
da war der Ersteller des Threads wohl etwas schneller wie ich. 8)
Wobei mein Virenscanner keinerlei Bauchweh bei der Seite hatte. Da dort aber viel generische Javascripte eingebunden werden, kann die Virenmeldung recht gut damit zu tun haben.

@Matt.loker
hat es einen besonderen Grund warum du zu Beginn deines Posts so groß schreibst? Wenn dir das so wichtig erscheint, dann hätte z.B. das Icon :!: auch geholfen.
Und keine Angst, bei uns bekommt keiner den Kopf abgerissen, egal ob Anfänger oder Profi. Lob und Kritik ist das Einzige was man hier bekommt, zumindest wenn es nach mir geht. :-)

Gruß aus Franken

Ortwin

PS: Um Admins oder Moderatoren auf einen Beitrag hinzuweisen, gibt es die Möglichkeit den Beitrag zu melden. Dafür hat jeder Beitrag oben rechts ein Schild mit Ausrufezeichen.
ConLite 3.0.0-dev, alternatives und stabiles Update von Contenido 4.8.x unter PHP 8.x - Download und Repo auf Gitport.de
phpBO Search Advanced - das Suchwort-Plugin für CONTENIDO 4.9
Mein Entwickler-Blog
Nach oben
matt.loker
Beiträge: 203
Registriert: Mo 7. Mai 2007, 09:05
Kontaktdaten:
Kontaktdaten von matt.loker

Re: Kleines Modul: JQuery InnerFade Header

Beitrag von matt.loker »

Oldperl hat geschrieben: @Matt.loker
hat es einen besonderen Grund warum du zu Beginn deines Posts so groß schreibst? Wenn dir das so wichtig erscheint, dann hätte z.B. das Icon :!: auch geholfen.
Und keine Angst, bei uns bekommt keiner den Kopf abgerissen, egal ob Anfänger oder Profi. Lob und Kritik ist das Einzige was man hier bekommt, zumindest wenn es nach mir geht. :-)
Nein eigentlich nicht :) - deswegen habe ich es abgeändert :)

Viele Grüße
Matt.loker
Nach oben
Gesperrt

Zurück zu „Module und Plugins“