MODUL: Thickbox animiert

[scooterama]

Hi noriddle, hier ein Link mit nur 1 Bild http://www.scootertuning.ch/Stossdaempfer-Malossi-RS24-10-vorne-Piaggio-ZIP-SP::13603.html

und hier mit mehreren Bildern http://www.scootertuning.ch/Auspuff-Yasuni-Road-HMR2-ALU-Yamaha-TZR50-Aprilia-RS-50::16430.html

Ich glaube ich weis wo der Fehler liegen könnte. Als noch fancybox verbaut war habe ich noch eine kleine Anpassung hier im Forum gefunden für ein Mouseover replace für das info_image. im Tab weitere Produktbilder wird dann das 1 Bild auch angezeigt, muss damit zusammenhängen.

Vielen Dank für deine Hilfe hier im Forum, deinen Namen liest man ja echt überall

[noRiddle (revilonetz)]

Genau, deine Erweiterung ist es.
Du hast ja bei deinem Beispiel vier Bilder, das Haupt-Bild also bei "Mehr Bilder" nochmals drin.
Kenne die Erweiterung jetzt nicht, könnte aber schon helfen wenn das in "Mehr Bilder" enthaltene doppelte Hauptbild kein rel-Attribut hätte, mußt du mal testen.
Welche Erweiterung ist denn das genau ?

Gruß,
noRiddle

[scooterama]

Ich habs nach relativ langem suchen gefunden und zwar handelt es sich um das stückchen Code von webkiste http://www.modified-shop.org/forum/index.php?topic=8224.msg81644#msg81644

Ist eine pdf Anleitung: http://www.modified-shop.org/forum/index.php?action=dlattach;topic=8224.0;attach=6505

Aber ich glaube es war irgendwann einmal sowas ähnliches fest in modified mit drin. Irgendwann in 2011?

Ich denke mir bleibt da nicht viel mehr als ausbauen?

[scooterama]

Ok, hab das jquery replace von webkiste nun ausgebaut und meine product_info_tabs_v1.html mit der orig. Version aus dem letzten 4642 Paket ersetzt. Nun stelle ich jedoch fest dass dort auch ein replace code enthalten ist? Ist dies noch ein überbleibsel?

[web0null]

Oder was meinst du genau ?

Ich meinte dort wo jetzt steht Bild 2 von 4
Könnten kleine Vorschaubilder, bzw. Points  (wie bei nivoSlider).

Denn mit

Code: Javascript  [Auswählen]

TB_TempArray = $("a[rel="+imageGroup+"]").get();
 

Hast du ja eigentlich schon alle, bzw. sind im Quelltext sowieso alle da, da brächte man nur den ganzen Container kopieren, neu einfügen mit anderer Größe per css versehen, und bei Click eben laden.....
Ist jetzt nur mal grob zusammen gedacht

Und die extra so klein zu generieren, wäre zwar nicht schlecht, aber für "diese Bildchen" die ja nur über js, praktisch kopiert werden und über css einfach nur klein ausgegeben werden, wäre es nicht notwendig.
Denn die sieht man im Quelltext ja nicht.
...wo sich z. B. Google dran stören konnte (weil die Bildgröße eine unnötige Größe relativ zur Ausgabe haben).

Weißt was ich meine?

Gruß

[noRiddle (revilonetz)]

@scooterama
Welchen "replace code" meinst du denn ?
Ich finde dein Problem gehört nicht in diesen Thread und bläht ihn nur auf.
Vielleicht erstellst du dafür einen neuen Thread ?,
denn dein Problem hat nichts mit der animierten Thickbox zu tun sondern würde auch mit der default Thickbox auftauchen.

@web0null
Ach, jetzt verstehe ich, ist ja eigentlich einfach einzubauen.
Na denne, viel Spaß beim Basteln...

Ich habe auf web28' Anregung noch vor eine Resizing-Funktion der Art einzubauen, daß, wenn der view port nicht ausreicht die volle Größe des Bildes darzustellen, dieses mit einem Klick auf ein Icon o.ä. trotzdem in voller Größe angezeigt werden kann (ähnlich wie es PrettyPhoto macht).

Damit nachher nicht immer mehr Versionen der Thickbox animated advanced kursieren und niemand mehr durchblickt, können wir uns ja beizeiten kurzschließen.

Gruß,
noRiddle

[scooterama]

Korrekt, gehört hier nicht rein, meine Beiträge können bitte gelöscht werden !!

[noRiddle (revilonetz)]

Hier wird nix gelöscht.
Einfach neuen Thread aufmachen, ist schon okay so.

Gruß,
noRiddle

[sunflash]

Hallo zusammen!

In meiner Shopvorstellung wurde mir zu der animierten thickbox geraten. So bin ich hier hin geraten und habe diese auch eingebaut.

nur leider bekomme ich diese nicht zum laufen... Es öffnet sich der Inhalt in einem neuen fenster anstatt in der Thickbox... Vorher, mit der alten thickbox hat alles geklappt... Kann das an der Kombination mit dem Nivo-Slider liegen?

Hier mal meine general.js.php:

Code: PHP  [Auswählen]

<?php
/* -----------------------------------------------------------------------------------------
   $Id: general.js.php 1262 2005-09-30 10:00:32Z mz $

   XT-Commerce - community made shopping
   http://www.(( Wir dulden keine kommerziellen Werbelinks - Bitte <a href="index.php?topic=3013.0">Forenregeln</a> beachten! ))

   Copyright (c) 2003 XT-Commerce
   -----------------------------------------------------------------------------------------
   Released under the GNU General Public License
   ---------------------------------------------------------------------------------------*/


   // this javascriptfile get includes at the BOTTOM of every template page in shop
   // you can add your template specific js scripts here
?>
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.js" type="text/javascript"></script>
<?php // BOC animated thickbox plugin, noRiddle ?>
<script type="text/javascript" src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/thickboxPluginMin.js"></script>
<?php // EOC animated thickbox plugin, noRiddle ?>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){  
    $('a.thickbox, area.thickbox, input.thickbox').thickbox (
        {
        'skim_text'   : '<?php echo PIC_TEXT_THICKBOX1; ?>',
        'skim_count'  : '<?php echo PIC_TEXT_THICKBOX2; ?>'
        }
    );
    imgLoader = new Image();
    imgLoader.src = tb_pathToImage;
});
/*]]>*/
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.nivo.slider.js" type="text/javascript"></script>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
        slices: 15, // For slice animations
        boxCols: 8, // For box animations
        boxRows: 4, // For box animations
        animSpeed: 500, // Slide transition speed
        pauseTime: 5000, // How long each slide will show
        startSlide: 0, // Set starting Slide (0 index)
        directionNav: true, // Next & Prev navigation
        controlNav: true, // 1,2,3... navigation
        controlNavThumbs: false, // Use thumbnails for Control Nav
        pauseOnHover: true, // Stop animation while hovering
        manualAdvance: false, // Force manual transitions
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next', // Next directionNav text
        randomStart: false, // Start on a random slide
        beforeChange: function(){}, // Triggers before a slide transition
        afterChange: function(){}, // Triggers after a slide transition
        slideshowEnd: function(){}, // Triggers after all slides have been shown
        lastSlide: function(){}, // Triggers when last slide is shown
        afterLoad: function(){} // Triggers when slider has loaded
    });
});
</script>

<?php // BOF - web28 - 2010-07-09 - TABS/ACCORDION in product_info ?>
<?php
if (strstr($PHP_SELF, FILENAME_PRODUCT_INFO )) {
?>
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery-ui.js" type="text/javascript"></script>
<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/attrib_dropdown_min.js" type="text/javascript"></script>
<script type="text/javascript">
/* <![CDATA[ */
        //Laden einer CSS Datei mit jquery     
    $.get("<?php echo 'templates/'.CURRENT_TEMPLATE; ?>"+"/css/javascript.css", function(css) {
                $("head").append("<style type='text/css'>"+css+"<\/style>");
        });
       
        $(function() {
                $("#tabbed_product_info").tabs();
                $("#accordion_product_info").accordion({ autoHeight: false });
        });
/*]]>*/
</script>
<?php
}
?>
<?php // EOF - web28 - 2010-07-09 - TABS/ACCORDION in product_info ?>

[noRiddle (revilonetz)]

Du hast zweimal eine jQuery-Basisbibliothek implementiert.
Einmal aus dem Shop

Code: XML  [Auswählen]

<script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.js" type="text/javascript"></script>

und einmal von der Google CDN

Code: XML  [Auswählen]

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

Weiß nicht ob das der einzige Grund ist, korrigiere das mal.
Jedenfalls nur einmal einbinden und Version nicht höher als 1.8.3 .

Ansonsten wäre ein Link nicht schlecht.

*EDIT*
Und schau mal mit Firebug in der Konsole ob es Fehlermeldungen gibt.

Gruß,
noRiddle

[sunflash]

Hallo nochmal;

Code: PHP  [Auswählen]

    <script src="<?php echo 'templates/'.CURRENT_TEMPLATE; ?>/javascript/jquery.js" type="text/javascript"></script>

habe ich entfernt, un läuft immer noch nicht. hab den template-cache und den cache geleert; und bei firebug versucht fehler herauszubekommen. abder mit denen kann ich irgendwie nix anfangen. Da steht:

[21:28:49.638] Fehler beim Verarbeiten des Wertes für 'opacity'.  Deklaration ignoriert. @ http://www.xxx.de/index.php
[21:28:53.845] Fehler beim Verarbeiten des Wertes für 'width'.  Deklaration ignoriert. @ http://www.xxx.de/index.php
[21:28:53.845] Fehler beim Verarbeiten des Wertes für 'height'.  Deklaration ignoriert. @ http://www.xxx.de/index.php

Meine Seite ist unter http://tinyurl.com/l3b55or zu erreichen...

[noRiddle (revilonetz)]

Setze das

Code: XML  [Auswählen]

<script type="text/javascript" src="templates/xtc5/javascript/thickboxPluginMin.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){  
   $('a.thickbox, area.thickbox, input.thickbox').thickbox (
       {
       'skim_text'   : 'Bild',
       'skim_count'  : ' von '
       }
   );
   imgLoader = new Image();
   imgLoader.src = tb_pathToImage;
});
/*]]>*/
</script>

mal unter

Code: XML  [Auswählen]

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

Die Core-/Basis-jQuery-Bibliothek muß vor allen Plugins geladen werden.
Außerdem solltest du ein Fallback haben wenn die Google CDN nicht erreichbar sein sollte.

Außerdem wird ein Bild nicht geladen:
""NetworkError: 404 Not Found - http://www.pfotex.de/templates/xtc5/img/bg_headermenu_breakline.gif""
Hast du irgendwo im Topmenu benutzt.

Mein Empfehlungen deinen Header betreffend in dem Thread wo du deinen Shop vorgestellt hast solltest du auch befolgen. Ansonsten wirst du in älteren IEs aber auch evtl. anderen Browsern Darstellungsprobleme bekommen.

Gruß,
noRiddle

[sunflash]

Jetzt funktioniert alles, vielen Dank für die Hilfe!
Hab jetzt auch nicht mehr auf google verlinkt sondern die runtergeladen (jquery-1.8.3.min.js) und eingebunden. Der nivo funzt und die thickbox auch =)

Mit der breakline.gif hab ich geschaut und das problem eleminiert; war wohl noch ein überbleibsel aus dem alten menü...

Mit deinen empfehlungen bezüglich des headers tue ich mcih noch ein wenig schwer, da mir da einfach das fachwissen ein wenig fehlt; bin da auch nur laie... so wie es jetzt ist wirds zumindest schon mal in allen getesteten browsern korrekt dargestellt. aber ich werde mich daran begeben!

[noRiddle (revilonetz)]

Hallo Community.
Im Anhang gibt es mein Plugin HTML5-kompatibel.

Hintergrund:
In HTML5 sind für das rel-Attribut
- welches für die Gruppierung von Bildern benutzt wird -
nur bestimmte Values zugelassen.
rel="1", im Code: rel="{$PRODUCTS_ID}" ist nicht erlaubt.

Das rel-Attribut wurde deshalb durch ein data-Attribut ersetzt.

Dazu bitte Anleitung beachten.
Hier nur kurz:
------------------
Mit dem neuen Plugin in /templates/YOUR_TEMPLATE/module/product_info/product_info_*.html
im Bildlink anstatt

Code: PHP  [Auswählen]

class="thickbox" rel="{$PRODUCTS_ID}">

das benutzen:

Code: PHP  [Auswählen]

class="thickbox" data-igroup="{$PRODUCTS_ID}">

Gruß,
noRiddle

[EDIT jannemann 11.07.2013: Modul in Beitrag 1 eingefügt.]

[jannemann]

Hallo noRiddle,

das Modul für HTML5 habe ich samt Erklärung in Beitrag 1 aktualisiert.

Schöne Grüße,
Jan