Script pro rotaci bannerů

jarin001

(37 hodnocení)

5. 10. 2011 19:01:34

Zdravím,

hledal jsem pro jeden web jednoduché řešení pro automatickou rotaci bannerů.

Chvilku mi to zabralo, některé varianty nefungovaly, tak to snad někomu ušetří čas.

Tyto dvě vybrané varianty mám odzkoušené, stačí změnit některé parametry :

První varianta - 3 bannery rotují nezávisle na reloadu v intervalu 10 sec

Pro Vaše použití :

var imgs1 - jsou URL cesty k obrázkům

var lnks1 - jsou odkazové URL (po kliknutí na obrázek)

var alt1 - jsou alternativní názvy obrázků

var imgCt1 - je počet bannerů v rotaci, nyní tedy 3

window.setInterval - obsahuje časový interval v ms, v tomto případě je to 10 sec

Poslední 3 řádky upřesňují který obrázek bude načten jako první, kam odkazuje...

Šířku a výšku si upravte také podle Vašeho formátu, nyní tedy 468 px X 60 px

Všechny tyto řádky si upravte podle potřeby a celý kód vložte na místo kde mají bannery rotovat

Druhá varianta - 3 bannery rotují při každém reloadu (načtení) stránky

Upraví se parametry jako u prvního kódu (vyjma čas. intervalu)

Zde jsou sice jinak umístěné ale porovnáním s prvním kódem je už poznáte.

Oba kódy obsahují ještě parametr target - nyní je nastaven "top", tzn. že po kliku na obrázek

se nová stránka zobrazí ve stejném okně, pokud by někdo chtěl otevírat odkazy v novém okně

přepište "top" na "blank"

Přepsáním a doplněním parametrů může rotovat samozřejmě xy bannerů, toto je jen příklad

Vím že je tu spousta odborníků ale napsal jsem postup polopatě i pro tu hrstku začátečníků

5. 10. 2011 19:01:34

https://webtrh.cz/diskuse/script-pro-rotaci-banneru/#reply684185

Default

(94 hodnocení)

5. 10. 2011 19:35:02

Ještě by stálo zato dát sem ukázku, aby každej viděl co to vlastně dělá :-)

5. 10. 2011 19:35:02

https://webtrh.cz/diskuse/script-pro-rotaci-banneru/#reply684184

jarin001

(37 hodnocení)

5. 10. 2011 19:39:30

Jak je vidět ze scriptu, mám to na localhostu :-)

Zítra to hodím na web (2 variantu) a dám sem link

5. 10. 2011 19:39:30

https://webtrh.cz/diskuse/script-pro-rotaci-banneru/#reply684183

FSP

(1 hodnocení)

5. 10. 2011 20:06:41

Ja som tú prvú variantu hodil sebe na stránku, v tom kóde som nič nemenil, len aktualizoval odkazy, ale vôbec nič sa nezobrazuje.

EDIT: tak nie, opravujem sa, funguje to. Chrome mal nacachovanú starú verziu stránky, pomohol niekoľkonásobný refresh.

5. 10. 2011 20:06:41

https://webtrh.cz/diskuse/script-pro-rotaci-banneru/#reply684182

jarin001

(37 hodnocení)

5. 10. 2011 20:07:30

Tak 2. varianta v praxi - horní banner stavba-bazar.cz

Napsal FSP;708852
EDIT: tak nie, opravujem sa, funguje to. Chrome mal nacachovanú starú verziu stránky, pomohol niekoľkonásobný refresh.

To jsem rád :-)

5. 10. 2011 20:07:30

https://webtrh.cz/diskuse/script-pro-rotaci-banneru/#reply684181

w3m

(22 hodnocení)

8. 10. 2011 12:49:58

kdyby to bylo jako code review, musím říct, že ty kódy nejsou napsané ani hezky, ani rozšiřitelně, ani přehledně.

pojmenování proměnných je tragické, čísla za proměnnými nejsou dobře vyřešené.

První kód by byl mnohem lepší řešit přes javascriptovou funkci, protože tohle řešit procedurálně mi připadá trochu vybastlený. Proč se zadává imgCt1, když to odpovídá počtu prvků v poli, který se dá zjistit javascriptem pomocí count? Osobně by mi jako dokonalé řešení v tomto případě připadalo rozšíření do jQuery, s použitím například $("#banner1").rotateBanners({"url":"obrázek","url":"obrázek"}) :-)

Druhý kód by byl mnohem lepší řešit přes PHP. PHP pro to má rovnou funkci - array_rand().

8. 10. 2011 12:49:58

https://webtrh.cz/diskuse/script-pro-rotaci-banneru/#reply684180

jarin001

(37 hodnocení)

8. 10. 2011 14:24:33

Citace : Proč se zadává imgCt1 ?

Je to funkce pro používání více banerových ploch na stejné stránce. Pokud by to nebylo ošetřeno,

došlo by k jejich duplikaci.

Pokud se rozhodnu vytvořit novou bannerovou plochu, použiji stejný script, bude pouze označen "2",

tedy var imgs2, var lnks2, var alt2, var imgCt2.

Když použiji Váš slovník, tragické je že tu málokdy někdo dá ucelenou radu jak řešit nějaký problém,

vždy se dá kód vylepšit, udělat to jinak, ale Vaše kritika je přínosná pouze Vašemu egu.

Někteří prostě ani neví co je jQuery, natož aby se vyznali v útržcích kódu.

Varianty které jsem "celé" předložil jsou otestované, validní a tím použitelné.

Pokud chcete být konstruktivní, vložte Váš "celý" script do vlákna, ale to bude moc práce že ?

8. 10. 2011 14:24:33

https://webtrh.cz/diskuse/script-pro-rotaci-banneru/#reply684179

w3m

(22 hodnocení)

17. 10. 2011 17:25:34

Já neříkám, že ten script nefunguje, já říkám, že by se to dalo řešit lépe... nechci říct user-friendly, ale minimálně programmer-friendly, Váš kód mi nepřipadá prostě dlouhodobě udržovatelný (a to nejsem žádný profesionál).

Ve vašem druhém kódu bych asi raději použil PHP, vyšlo by to asi na pětiřádkový kód, ale to do sekce JavaScript moc nechci motat.

Co se týče toho prvního, normálně jsem se tím neměl v plánu zabývat, ale už jsem dlouho nedělal nic v jquery, tak si to trochu osvěžím:)

17. 10. 2011 17:25:34

https://webtrh.cz/diskuse/script-pro-rotaci-banneru/#reply684178

800XE

(8 hodnocení)

17. 10. 2011 18:34:14

Když už se to tady zvrhlo v review, tak se připojím. Takhle bych to viděl já:

<!doctype html><html>    <head>        <title>            Bannery        </title>        <meta charset="utf-8">        <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>                                <script>            /**             * Rotace bannerů             */            rotateBanners = {                                /**                 * Inicializace                 *                 * @param  params     objekt s parametry                 * @option   width      šířka banneru                 * @option   height     výška banneru                 * @option   interval   interval mezi rotacemi (v sekundách)                 * @option   items      pole s daty bannerů ve tvaru {link: '', image: '', alt: ''}                 */                init: function($container, params) {                                        // Defaultní hodnoty                    var                        self = this,                        params = $.extend({                            width: 600,                            height: 100,                            interval: 10                        }, params);                    params.interval = params.interval <= 0 ? 1 : params.interval;                    params.interval *= 1000;                         // Kontroly                    if (!params.items)                        throw('rotateBanners.init: "Nebyla předána data bannerů v poli items".');                    if (!params.items.length)                        throw('rotateBanners.init: "Pole items musí obsahovat alespoň jednu položku".');                                        // Uchování parametrů                    $container.data('params', params);                                        // Nastavení prvního banneru                    this.rotate($container);                                        // Rotace v intervalu params.interval                    setInterval(function() {                        var id = $container.data('params').id;                        self.rotate($container, id < params.items.length - 1 ? ++id : 0);                    }, params.interval);                },                /**                 * Rotace                 *                 * @param id index položky v poli params.items (nepovinný, 0)                 */                rotate: function($container, id) {                                        // Kontroly                    if (!$container)                        throw('rotateBanners.rotate: "Nebyl předán parametr $container".');                    if (!$container.length)                        throw('rotateBanners.rotate: "Prvek předaný parametrem $container neexistuje".');                    var params = $container.data('params');                    if (!params)                        throw('rotateBanners.rotate: "Prvek předaný parametrem $container nebyl inicializován".');                    params.id = !id || id < 0 || id > params.items.length - 1 ? 0 : id;                    var item = $.extend({                        link: '',                        image: '',                        alt: ''                    }, params.items);                    // Vyprázdnění kontejneru a uložení aktuálních parametrů                    $container                        .data('params', params)                        .empty();                                        // Vytvoření nového banneru a vložení do kontejneru                    $(.join('n'))                        .appendTo($container)                        .css({                            width: params.width,                            height: params.height                        });                }            };                        // Alias pro jQuery            $.fn.rotateBanners = function(params) {                rotateBanners.init(this, params);                return this;            };        </script>                <script>            $(function() {                $('#test').rotateBanners({                    width: 468,                    height: 60,                    interval: 2,                    items:                 });            });        </script>    </head>    <body>        <div id="test"></div>    </body></html>

Ten druhý případ je opravdu lepší řešit už na serveru.

17. 10. 2011 18:34:14

https://webtrh.cz/diskuse/script-pro-rotaci-banneru/#reply684177

w3m

(22 hodnocení)

17. 10. 2011 19:16:46

Asi půl hodiny jsem to programoval, skladoval jsem bannery v objektech, a pak mi teprv došlo, co je to za kokotinu. HTML kód má být v HTML, a v objektech, v polích a na podobných místech přece nemá co dělat. Celý jsem to smazal a narychlo jsem to znovu udělal, žádné OOP, jenom menší procedurální bastl (ten kód rozhodně není ukázka rozšiřitelnosti):

CSS část (bez ní to nepoběží)

Javascript část (můžete dát do ext souboru)

Spouští se to pomocí tohohle kódu. Buď to dejte před nebo do hlavičky dovnitř $(document).ready(). Druhý argument je pořadí banneru, kterým to začne. Např. pokud vyplníte 0, začne to od prvního, a pokud nevyplníte nic, začne to náhodně vybraným.

A takhle vypadá HTML

Ukázka: http://www.wecko.net/resources/examples/js_jquery_rotator/ - točí se tam jen jeden banner a mění se šířka, to jsem jen neměl po ruce URL na další bannery. Ještě mě napadá, že bych mohl dodělat animace, ale to nechám na někom dalším :)

Pokud něco nefunguje, řekněte, kdyžtak se omlouvám. Zároveň prosím o kritiku, už jsem minimálně rok neprogramoval.

17. 10. 2011 19:16:46

https://webtrh.cz/diskuse/script-pro-rotaci-banneru/#reply684176

800XE

(8 hodnocení)

17. 10. 2011 19:46:07

HTML kód má být v HTML, a v objektech, v polích a na podobných místech přece nemá co dělat

V tom s tebou nemůžu úplně souhlasit. Například spousta AJAXových aplikací je založených na tom, že se ze serveru předají jenom parametry a podle nich se vygenerují příslušné prvky. V tomhle konkrétním případě je to úplně jedno, ale zápis do objektů mi přijde mnohem přehlednější a udržovatelnější.

Pokud něco nefunguje, řekněte, kdyžtak se omlouvám. Zároveň prosím o kritiku, už jsem minimálně rok neprogramoval.

Nezkoušel jsem to, ale od pohledu tam vidím pár nedostatků:

- nemáš ošetřený případ, kdy prvek s bannery nebude obsahovat žádnou položku nebo položky budou ve špatném tvaru

- nehlídáš, jestli byl předán parametr timer, ani jeho hodnotu, což může snadno skončit chybou

- funkci setTimeout by asi bylo lepší místo řetězce předávat anonymní funkci

- nebál bych se to víc rozepsat, tenhle způsob zápisu je trochu nepřehledný

17. 10. 2011 19:46:07

https://webtrh.cz/diskuse/script-pro-rotaci-banneru/#reply684175

w3m

(22 hodnocení)

17. 10. 2011 20:57:20

ad 1) Pokud DOM element neobsahuje odkazy, tak this.find('a') vrátí prázdnou množinu a s tou se pak (ne)pracuje, žádnou chybu to nevyhodí. Nepochopil jsem, jak by položky mohly být ve špatném tvaru (pouze se položky skrývají a odkrývají, je jedno, co v nich je).

ad 2) V téhle chvíli nemohu nabídnout žádnou defaultní hodnotu, co bych podle tebe měl při nulovém timeru dělat? Alert Milý programátore, laskavě mi zadej počet milisekund nebo nebudu fungovat? Kdybych měl navrhovat robustní UI, tak je to samozřejmost, ale u takového pluginu mi to nepřipadá jako nutnost.

ad 3) Připadám si trapně, ale nevím, jak to udělat :-) anonymní funkce si udělá svůj interní prostor, takže bych buď musel všechny proměnné přenést jako argumenty, a nebo všechny použité proměnné udělat jako globální a ani jedno mi nepřipadá elegantní. Jak píšu, v Javascriptu jsem skoro nikdy nedělal, a přes rok jsem nedělal vůbec v ničem.

ad 4) uznávám, že jsem to napsal trochu minifikovaně, účelem bylo mít ten kód co nejkratší. Pro ty, komu moje "minifikovaná" verze nevyhovuje, tak to můžu přepsat třeba nějak takhle:

17. 10. 2011 20:57:20

https://webtrh.cz/diskuse/script-pro-rotaci-banneru/#reply684174

800XE

(8 hodnocení)

17. 10. 2011 21:28:29

Pokud DOM element neobsahuje odkazy, tak this.find('a') vrátí prázdnou množinu a s tou se pak (ne)pracuje, žádnou chybu to nevyhodí.

To je pravda, ale taky se pak bude zbytečně volat timer ;-).

V téhle chvíli nemohu nabídnout žádnou defaultní hodnotu, co bych podle tebe měl při nulovém timeru dělat? Alert Milý programátore, laskavě mi zadej počet milisekund nebo nebudu fungovat?

Nemusí se hned končit chybou, stačí chybějící parametr ošetřit defaultní hodnotou třeba 5 sekund.

Kdybych měl navrhovat robustní UI, tak je to samozřejmost, ale u takového pluginu mi to nepřipadá jako nutnost.

Už jsem asi profesně zdeformovaný hnidopich :-D.

anonymní funkce si udělá svůj interní prostor, takže bych buď musel všechny proměnné přenést jako argumenty, a nebo všechny použité proměnné udělat jako globální a ani jedno mi nepřipadá elegantní

Anonymní funkce pracuje s prostorem nadřazené funkce, takže stačí si uložit kontext:

17. 10. 2011 21:28:29

https://webtrh.cz/diskuse/script-pro-rotaci-banneru/#reply684173

w3m

(22 hodnocení)

17. 10. 2011 23:19:18

Za tu ukázku anonymní funkce máš u mě bodíka (který, pokud jsem správně pochopil, tady už nahrazujou reputace?).

Takže tady je verze pro hnidopichy (i když mám chuť plakat, co jste mi udělali z té roztomilé třířádkové funkcičky, lol:))

Jen poznámka zpátky k zakladateli vlákna: už chápeš, co se mi nelíbilo na těch lnks1 a imgCt1 a co jsem myslel tím, že to jde řešit elegantněji a lépe udržovatelně? Máme víc bannerů na stránce a je to v různých intervalech? není problém:

17. 10. 2011 23:19:18

https://webtrh.cz/diskuse/script-pro-rotaci-banneru/#reply684172

800XE

(8 hodnocení)

18. 10. 2011 04:38:46

Srdce hnidopicha jásá :-D. Vím, že už mě asi prokleješ do pátého kolene, ale jednu připomínku bych k tomu ještě měl. Před proměnnou bannerCount by mělo být klíčové slovo var, jinak se přiřadí objektu window. Ověřit si to můžeš jednoduše:

I když to je nejspíš jenom překlep.

18. 10. 2011 04:38:46

https://webtrh.cz/diskuse/script-pro-rotaci-banneru/#reply684171