Fancybox bez pluginu – nefunguje mi jako galerie

Úvodní stránka Fórum podpory WordPressu Problémy s WordPressem Fancybox bez pluginu – nefunguje mi jako galerie

Štítky: 

Zvolené téma obsahuje celkem 8 odpovědí. Do diskuze (4 účastníci) se naposledy zapojil uživatel  hamil1 a poslední změna je stará 8 let, 7 měsíců.

Aktuálně je na stránce zobrazeno 9 příspěvků - 1. až 9. (z celkem 9)
  • Autor
    Příspěvky
  • #6774

    Jan76
    Participant

    Dobrý den,

    prosím o radu, chtěl bych na svém webu používat fancybox, ale nechci plugin.

    To se mi podařilo rozchodit, tak že po kliknutí na obrázek se zobrazí v fancyboxu, ale nefunguje mi galerie, pokud mám na stránce vloženo několik obrázků, tak musím na každý kliknout zvlášť, pokud do stránky vložím galerii, tak také nefunguje, pouze po kliknutí na jednotlivý obrázek.

    Ještě jsem se chtěl zeptat, kde je dáno, že když vložím obrázek do stránky, tak se mi otevírá přímo v té stránce-což potřebuji, ale pokud vložím galerii, tak mi to hodí na single.php – to nechci, potřeboval bych, aby se mi v té samé stránce zvětšíl obrázek z té galerie a já mohli jenom šipkami posouvat.

    Předem děkuji za radu.

    , podle návodů na netu. jsem vložil tento kód do functions.php

    function my_eneque() {
    wp_register_style( 'fancybox', get_template_directory_uri() . '/assets/js/fancybox/jquery.fancybox.css' );
    wp_enqueue_style( 'fancybox' );
    wp_register_script( 'fancybox-pack', get_template_directory_uri() . '/assets/js/fancybox/jquery.fancybox.pack.js', null, null );
    wp_enqueue_script( 'fancybox-pack' );
    wp_register_script( 'gallery', get_template_directory_uri() . '/assets/js/fancybox/jquery.mousewheel-3.0.6.pack.js', null, null );
    wp_enqueue_script( 'gallery' );
    wp_register_script( 'fancybox', get_template_directory_uri() . '/assets/js/fancybox/jquery.fancybox.js', null, null );
    wp_enqueue_script( 'fancybox' );
    wp_register_script( 'main', get_template_directory_uri() . '/assets/js/main.js', null, null );
    wp_enqueue_script( 'main' );

    add_action('wp_enqueue_scripts', 'my_eneque');

    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://code.jquery.com/jquery-1.8.0.min.js', null, null);
    wp_enqueue_script( 'jquery' );

    Vytvořil nový soubor main.js, kde mám kód

    jQuery(document).ready(function($) {

    // Initialize the Lightbox for any links with the 'fancybox' class
    $(".fancybox").fancybox();

    // Initialize the Lightbox automatically for any links to images with extensions .jpg, .jpeg, .png or .gif
    $("a[href$='.jpg'], a[href$='.png'], a[href$='.jpeg'], a[href$='.gif']").fancybox();

    // Initialize the Lightbox and add rel="gallery" to all gallery images when the gallery is set up using [gallery link="file"] so that a Lightbox Gallery exists
    $(".gallery a[href$='.jpg'], .gallery a[href$='.png'], .gallery a[href$='.jpeg'], .gallery a[href$='.gif']").attr('rel','gallery').fancybox();

    // Initalize the Lightbox for any links with the 'video' class and provide improved video embed support
    $(".video").fancybox({
    maxWidth : 800,
    maxHeight : 600,
    fitToView : false,
    width : '70%',
    height : '70%',
    autoSize : false,
    closeClick : false,
    openEffect : 'none',
    closeEffect : 'none'
    });

    })(jQuery);

    #18114

    Musilda
    Participant
    Web

    Do kódu stačí přidat a href="obrazek.jpg" rel="galerie"

    a všechny ty odkazy, které budou mít stejný rel, budou fungovat jako galerie.

    #18115

    Jan76
    Participant

    Mohl by jste mi prosím ještě poradit, jak tam ten kód vložit tak, aby se mi všechny obrázky co mám na stránce zobrazovaly jako galerie, nechci nic zadávat v dashboordě navíc, prostě, aby to bylo automatický.

    Našel jsem na Vašich stránkách tento kód týkající se náhledových obrázků

    <a class="fancybox" href="<?php echo get_the_post_thumbnail($post->ID, 'large'); ?>">

    Dal by se tento kód upravit pro tu galerii.

    Omlouvám se, jsem začátečník a php se učím.

    Moc děkuji

    #18116

    admin
    Keymaster
    Web

    Zajímalo by mě, proč nechcete používat žádný plugin (zejména pokud jste začátečník)? Pro tyto účely je to asi nejlepší řešení a existuje jich několik, např. Easy FancyBox.

    #18117

    Jan76
    Participant

    No už mi to skoro funguje, tak proč tam dávat plugin, to bych ho mohl používat na všechno

    #18118

    admin
    Keymaster
    Web

    Ano, ale ušetřil byste si tím spoustu času. Někdy je zbytečné používat pluginy, ale zrovna v tomto případě tam vidím jenom výhody:

    – Po aktivaci pluginu vše automaticky funguje (obrázky i galerie) a nemusíte nic řešit nebo upravovat šablonu a její funkce.

    – Autor pluginu pravidelně aktualizuje všechny načítané Javascriptové soubory (což nevěřím, že budete dělat také).

    Nevidím tam jedinou nevýhodu pro použití kvalitního pluginu? Zatím se pouze pokoušíte simulovat jeho funkce, upravujete soubory šablony (co se bude dít při případné aktualizaci šablony) a nevidím v tom moc smysl. Jediné, co mě napadá je snaha naučit se to :-) Ale i v tomto případě doporučuji nainstalovat plugin a prohlédnout jeho zdrojové kódy, kde zjistíte podrobnosti…

    #18119

    Jan76
    Participant

    No jediný důvod proč to dělám, že se to chci naučit, šablonu jsem si udělal vlastní a je možné, že tam nakonec ten plugin dám, jak píšete má to spíše výhody, ale zajímalo by mě, jak tam vložit ten kousek kódu – plácám se s tím nějakou dobu, tak bych z toho měl radost, že se mi to podařilo rozchodit:-)

    #18120

    Musilda
    Participant
    Web

    Tak já to trochu rozvedu.

    V js souboru zavoláte metodu $(“.fancybox”).fancybox(); a všechny odkazy, které budou mít třídu class=”fancybox”, budou se otevírat v popup okně.

    Každý odkaz se otevře ve svém okně.

    Pokud do odkazů vložíte rel, bude je fancybox seskupovat podle hodnoty rel.

    <a rel="group1" href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""/></a>
    <a rel="group1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""/></a>

    <a rel="group2" href="image_big_3.jpg"><img src="image_small_3.jpg" alt=""/></a>
    <a rel="group2" href="image_big_4.jpg"><img src="image_small_4.jpg" alt=""/></a>

    Zde je kód přímo z tutoriálu. Vidíte, že pro rel, tam jsou dvě hodnoty, group1 a group2.

    Proto budete moci přecházet šipkami pouze mezi dvěma obrázky, které mají group1 a nebo group2, záleží na tom, který právě otevřete. Pokud by jste vše sjednotil na group1, budete moci listovat mezi čtyřmi obrázky.

    Pokud tedy ten odkaz doplníte, tak jak jsem vám psal

    <a class="fancybox" href="obrazek" rel="galerie"> budete moci listovat mezi všemi obrázky na stránce, které mají class=”fancybox” a rel=”galerie”.

    #24667

    hamil1
    Participant
    Web

    Přesně tenhle návod jsem hledal. Děkuji.

Aktuálně je na stránce zobrazeno 9 příspěvků - 1. až 9. (z celkem 9)

Pokud chcete odpovědět na toto téma, musíte se nejdříve přihlásit.

WordPress – novinky, návody a zajímavosti