• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hilfestellung bei "PrettyPhoto" (JQuery)

Hase

Mitglied
hallo alle zusammen.

Bin gerade dabei eine Galerie in meine noch nicht fertige website einzubauen.

Benutze "PrettyPhoto":
jQuery lightbox for images, videos, YouTube, iframes, ajax | Stéphane Caron

Funktioniert auch soweit. Nur wollte ich nicht wie gezeigt jedes bild in klein dahaben, sondern vll nur 3 oder 4, aber trozdem dann z.b. 15 in der Galerie.

In der Dokumentation
prettyPhoto documentation | Stéphane Caron
steht zwar, dass man sowas mit Public API machen kann, nur werde ich daraus nicht schlau...

Hoffe jemand kann mir weiterhelfen
MFG Hase
 
Werbung:
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html><!-- InstanceBegin template="/Templates/vorlage.dwt" codeOutsideHTMLIsLocked="false" -->
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <title>HMB Schweisstechnik</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link rel="icon" type="image/png" href="favicon.png">
        <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
        <script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
        <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
    </head>
<body>
    <div id="wrap">
        <h1 id="header"></h1>
        <div id="main">
            <div id="sidebar">
               <ul id="sidebar_list">
                <!-- InstanceBeginEditable name="sidebar" -->
                <li><a href="index.html" class="sidebar-menue">Home</a></li>
                <li><a href="weld.html" class="sidebar-menue_active">Schweissen</a></li>
                <li><ul id="sidebar_under">
                        <li><a href="mma.html"class="sidebar-menue_under_active">Elektrode</a></li>
                        <li><a href="gmaw.html"class="sidebar-menue_under">MIG/MAG</a></li>
                        <li><a href="tig.html"class="sidebar-menue_under">WIG</a></li>
                        <li><a href="weld_other.html"class="sidebar-menue_under">Sonstiges</a></li>
                    </ul></li>
                    <li class="abstand-top">
                <li><a href="cut.html" class="sidebar-menue">Schneiden</a></li>
                <li><a href="auto.html" class="sidebar-menue">Automatisieren</a></li>
                <li class="abstand-top"><a href="unternehmen.html" class="sidebar-menue">Unternehmen</a></li>
                <li><a href="kontakt.html" class="sidebar-menue">Kontakt</a></li>
                <li><a href="anfahrt.html" class="sidebar-menue">Anfahrt</a></li>
                <li><a href="sonstiges.html" class="sidebar-menue">Sonstiges</a></li>
          <!-- InstanceEndEditable -->
            </ul>
            <ul id="sidebar_downloads">
                <li>Downloads:</li>
                <li class="abstand-top"><a href="arc200_manual.html">Bedinungsanleitung (200KB)</a></li>
                <li><a href="arc200_manual.html">Bild (56KB)</a></li>
                <li><a href="arc200_manual.html">Flyer (128KB)</a></li>
                <li><a href="arc200_manual.html">Nix wichtiges (1,2GB)</a></li>
            </ul>
            </div>
            <!-- InstanceBeginEditable name="content" -->
            <div id="content">
                <p id="navigator">
                    <a href="weld.html">Schweissen</a> > 
                    <a href="mma.html">Elektrode</a> > 
                    <a href="arc200.html">Arc 200</a>
                </p>
                <h2 class="abstand-top">Arc 200 Elektrodenschweißgerät</h2>
                <div class="product_pic">
                    <p class="product_pic_big"><a href="images/fullscreen/arc200.jpg" rel="prettyPhoto[gallery1]" title="Arc 200 Elektrodeninverter"><img src="images/thumbnails/arc200.jpg" width="298" height="298" alt="ARC 200"></a></p>
                    <ul class="product_gallery">
                        <li class="product_pic_small abstand-right"><a href="images/fullscreen/A.jpg" rel="prettyPhoto[gallery1]" title="Arc 200 Elektrodeninverter"><img src="images/thumbnails/a.jpg" width="50" height="50" alt="ARC 200"></a></li>
                        <li class="product_pic_small abstand-right"><a href="images/fullscreen/B.jpg" rel="prettyPhoto[gallery1]" title="Arc 200 Elektrodeninverter"><img src="images/thumbnails/b.jpg" width="50" height="50" alt="ARC 200"></a></li>
                        <li class="product_pic_small"><a href="images/fullscreen/arc200d.jpg" rel="prettyPhoto[gallery1]" title="Arc 200 Elektrodeninverter"><img src="images/thumbnails/arc200.jpg" width="50" height="50" alt="ARC 200"></a></li>
                    </ul>
                </div>
                <h3 class="abstand-top">ARC Serie Inverter DC Schweißmaschine</h3>
                <ul class="product_list_pic abstand-top">
                    <li>ARC-160/180/200</li>
                    <li>DC 1 Phase 230Volt</li>
                    <li>Verfahren: E-Hand</li>
                </ul>
                <p class="product_heading abstand-top">Features</p>
                <ul class="product_list_pic abstand-top">
                    <li>Einzigartige Patentierte Technologie, hohe Rentabilität und Langlebigkeit</li>
                    <li>Kleine Größe, geringes Gewicht, tragbar</li>
                    <li>Perfekte Schweißeigenschaften, tiefer Einbrand</li>
                    <li>Automatisches Arc Force und Hot Start für perfekte Performance</li>
                    <li>Temperaturschutz</li>
                </ul>
                <p class="product_heading abstand-top">Lieferumfang</p>
                <ul class="product_list abstand-top">
                    <li>Arc200 Elektrodenschweißgerät</li>
                    <li>Schweißkabel 3 Meter</li>
                    <li>Massekabel 3 Meter</li>
                    <li>Bedinungsanleitung</li>
                </ul>
                <p class="product_heading abstand-top">Technische Daten</p>
                <table class="table abstand-top" border="0" rules="none" cellspacing="0">
                    <tr class="table_blue">
                        <th>Model</th>
                        <th>ARC160</th>
                        <th>ARC180</th>
                        <th>ARC200</th>
                    </tr>
                    <tr class="table_gray">
                        <td>Type</td>
                        <td colspan="3">MOSFET Inverter</td>
                    </tr>
                    <tr class="table_blue">
                        <td>Eingangsspannung</td>
                        <td colspan="3">230V AC 50Hz</td>
                    </tr>
                    <tr class="table_gray">
                        <td>Eingangsleistung</td>
                        <td>5.3kW</td>
                        <td>6.1kW</td>
                        <td>7.0kW</td>
                    </tr>
                    <tr class="table_blue">
                        <td>Eingangsstrom</td>
                        <td>23.0A</td>
                        <td>26.5A</td>
                        <td>30.5A</td>
                    </tr>
                    <tr class="table_gray">
                        <td>Ausgangsstrom</td>
                        <td>160A</td>
                        <td>180A</td>
                        <td>200A</td>
                    </tr>
                    <tr class="table_blue">
                        <td>Ausgangsspannung</td>
                        <td>26.4V</td>
                        <td>27.2V</td>
                        <td>28.0V</td>
                    </tr>
                    <tr class="table_gray">
                        <td>Einschaltdauer</td>
                        <td>35%</td>
                        <td>35%</td>
                        <td>35%</td>
                    </tr>
                    <tr class="table_blue">
                        <td>Einstellweite Ausgangstrom</td>
                        <td>10A~160A</td>
                        <td>10A~180A</td>
                        <td>10A~200A</td>
                    </tr>
                    <tr class="table_gray">
                        <td>Einstallweite Ausgangsspannung</td>
                        <td>20.4V~26.4V</td>
                        <td>20.4V~27.2V</td>
                        <td>20.4V~28.0V</td>
                    </tr>
                    <tr class="table_blue">
                        <td>Arc Force</td>
                        <td>50A</td>
                        <td>50A</td>
                        <td>50A</td>
                    </tr>
                    <tr class="table_gray">
                        <td>Schutzart</td>
                        <td>IP21</td>
                        <td>IP21</td>
                        <td>IP21</td>
                    </tr>
                    <tr class="table_blue">
                        <td>Cos&phi;</td>
                        <td>0.98</td>
                        <td>0.98</td>
                        <td>0.98</td>
                    </tr>
                    <tr class="table_gray">
                        <td>Wirkungsgrad</td>
                        <td>&ge;80</td>
                        <td>&ge;80</td>
                        <td>&ge;80</td>
                    </tr>
                    <tr class="table_blue">
                        <td>Gewicht</td>
                        <td>9.5kg</td>
                        <td>9.5kg</td>
                        <td>9.5kg</td>
                    </tr>
                    <tr class="table_gray">
                        <td>Abmessungen</td>
                        <td colspan="3">LxBxH 389x155x299</td>
                    </tr>
                </table>
                <p class="product_heading abstand-top">Ähnliche Produkte</p>
                <ul class="product_list abstand-top">
                    <li><a href="maweld250.html">MaWeld 250</a></li>
                    <li><a href="maweld300.html">MaWeld 300</a></li>
                    <li><a href="arc180.html">Arc 180</a></li>
                    <li><a href="arc160.html">Arc 160</a></li>
                </ul>
            </div>
            <!-- InstanceEndEditable -->
          </div>
        <p id="footer">
            Copyright Hmb Schweisstechnik GmbH 2011<br>
            www.hmb-schweisstechnik.de<br>
            <a href="impressum.html">Impressum</a>            
        </p>
    </div>
 
HTML:
<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        $("a[rel^='prettyPhoto']").prettyPhoto({
            animation_speed: 'fast', /* fast/slow/normal */
            slideshow: 5000, /* false OR interval time in ms */
            autoplay_slideshow: false, /* true/false */
            opacity: 0.80, /* Value between 0 and 1 */
            show_title: true, /* true/false */
            allow_resize: true, /* Resize the photos bigger than viewport. true/false */
            default_width: 500,
            default_height: 344,
            counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */
            theme: 'pp_default', /* light_rounded / dark_rounded / light_square / dark_square / facebook */
            horizontal_padding: 20, /* The padding on each side of the picture */
            hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto */
            wmode: 'opaque', /* Set the flash wmode attribute */
            autoplay: true, /* Automatically start videos: True/False */
            modal: false, /* If set to true, only the close button will close the window */
            deeplinking: true, /* Allow prettyPhoto to update the url to enable deeplinking. */
            overlay_gallery: true, /* If set to true, a gallery will overlay the fullscreen image on mouse over */
            keyboard_shortcuts: true, /* Set to false if you open forms inside prettyPhoto */
            changepicturecallback: function(){}, /* Called everytime an item is shown/changed */
            callback: function(){}, /* Called when prettyPhoto is closed */
            ie6_fallback: true,
            markup: '<div class="pp_pic_holder"> \
                        <div class="ppt">&nbsp;</div> \
                        <div class="pp_top"> \
                            <div class="pp_left"></div> \
                            <div class="pp_middle"></div> \
                            <div class="pp_right"></div> \
                        </div> \
                        <div class="pp_content_container"> \
                            <div class="pp_left"> \
                            <div class="pp_right"> \
                                <div class="pp_content"> \
                                    <div class="pp_loaderIcon"></div> \
                                    <div class="pp_fade"> \
                                        <a href="#" class="pp_expand" title="Expand the image">Expand</a> \
                                        <div class="pp_hoverContainer"> \
                                            <a class="pp_next" href="#">next</a> \
                                            <a class="pp_previous" href="#">previous</a> \
                                        </div> \
                                        <div id="pp_full_res"></div> \
                                        <div class="pp_details"> \
                                            <div class="pp_nav"> \
                                                <a href="#" class="pp_arrow_previous">Previous</a> \
                                                <p class="currentTextHolder">0/0</p> \
                                                <a href="#" class="pp_arrow_next">Next</a> \
                                            </div> \
                                            <p class="pp_description"></p> \
                                            {pp_social} \
                                            <a class="pp_close" href="#">Close</a> \
                                        </div> \
                                    </div> \
                                </div> \
                            </div> \
                            </div> \
                        </div> \
                        <div class="pp_bottom"> \
                            <div class="pp_left"></div> \
                            <div class="pp_middle"></div> \
                            <div class="pp_right"></div> \
                        </div> \
                    </div> \
                    <div class="pp_overlay"></div>',
            gallery_markup: '<div class="pp_gallery"> \
                                <a href="#" class="pp_arrow_previous">Previous</a> \
                                <div> \
                                    <ul> \
                                        {gallery} \
                                    </ul> \
                                </div> \
                                <a href="#" class="pp_arrow_next">Next</a> \
                            </div>',
            image_markup: '<img id="fullResImage" src="{path}" />',
            flash_markup: '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="{width}" height="{height}"><param name="wmode" value="{wmode}" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="{path}" /><embed src="{path}" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="{width}" height="{height}" wmode="{wmode}"></embed></object>',
            quicktime_markup: '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="{height}" width="{width}"><param name="src" value="{path}"><param name="autoplay" value="{autoplay}"><param name="type" value="video/quicktime"><embed src="{path}" height="{height}" width="{width}" autoplay="{autoplay}" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/"></embed></object>',
            iframe_markup: '<iframe src ="{path}" width="{width}" height="{height}" frameborder="no"></iframe>',
            inline_markup: '<div class="pp_inline">{content}</div>',
            custom_markup: '',
            social_tools: '', /* html or false to disable */
        });
    });
</script>
</body>
<!-- InstanceEnd --></html>
 
Werbung:
Zurück
Oben