Prelínanie obrázkov

camo · Príspevok od používateľa **camo** » 17 dec 2011, 9:44

Dobré ráno!

Mám script na prelínanie obrázkov: http://camo.tym.sk/fora/TEST1.php
V ňom funkciu changeBaner, ktorá sa má vykonať každých 7 sekúnd. Keď to spustíte, je všetko v poriadku. Ale ak prejdete na inú záložku v browseri, alebo minimalizujete okno a potom sa vrátite späť, tak to začne blbnúť. Úplne prestane rešpektovať ten 7 sekundový interval a ani opacity sa nemení, len to preskakuje. Dal som pod tým obrázkom vypisovať hodnotu globBan, podĺa ktorej sa má nastavovať opacity.

Alebo ak viete poradiť nejaký overený js script, ale nie jQuery...

Musí to byť v JS?

camo · Príspevok od používateľa **camo** » 17 dec 2011, 15:14

Čo myslíš, flash? Ja neviem robiť v AS a potrebujem, aby sa tie banery(adresy) načítali z poľa, ktoré vypľuje PHP. Jedine, že by si mi to napísal. Ale videl som teraz nejaké free softy na tvorbu banerov vo flashy. Dá sa to cez ne nejako urobiť?

Napíšem ti to.
Vieš toto:

Kód: Vybrať všetko

var banerArr=['./pictures/Banery/giankaBaner2.jpg','./pictures/Banery/giankaBaner3.jpg','./pictures/Banery/giankaBaner4.jpg','./pictures/Banery/giankaBaner.jpg'];

v PHP upraviť, tak aby ti vypísalo toto?

Kód: Vybrať všetko

var obrazky = {img1: './pictures/Banery/giankaBaner2.jpg', img2: './pictures/Banery/giankaBaner3.jpg', img3: './pictures/Banery/giankaBaner4.jpg', img4: './pictures/Banery/giankaBaner.jpg'};

camo · Príspevok od používateľa **camo** » 17 dec 2011, 17:18

Práve o to ide a prepísať to neni problém. Ak to spravíš, tak som ti zaviazaný...

Tu to mášm, stačí stiahnuť prílohu. Rozmer si nastav, tak ako ty chceš je to urobené univerzálne (viac sa dozvieš z komentárov v HTML, čo som sem dal ako ukážku):

rotator.swf: (1.06 KiB) 160 stiahnutí

Tu je ukážka ako to máš vložiť (prosím potom si prelinkuj ten swfobject.js niekde inde a neťahaj to odomňa zo stránky - kľudne si ho odomňa stiahni). Aplikácia má dva voliteľné atribúty:
1.) automatické rozťahovanie menších obrázkov na celú zobrazenú plochu (roztiahnutie je proporčné) hodnoty true alebo false
2.) časový interval pauzy medzi prelínaním (atribút timer sa udáva v sekundách)
v HTML (JavaScript sekcia) máš aj komenty.

Kód: Vybrať všetko

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>     
  <head>       
    <meta http-equiv="content-type" content="text/html; charset=windows-1250">       
    <meta name="generator" content="PSPad editor, www.pspad.com">       
    <title>    
    </title>      
<script type="text/javascript" src="http://weroro.sk/wp-content/plugins/highslide/swfobject.js"></script>       
  </head>     
  <body>              
    <div id="flashDiv">                
<script type="text/javascript">
// < ![CDATA[
var obrazky = { sc:'true', // vypnutie zapnutie automatickeho prisposobovania obrazkov true=zapnute/false=vypnute
                timer:'7', //casovy interval pauzy. hodnota je v sekundach
                img1:'1.jpg',img2:'2.jpg',img3:'3.jpg',img4:'4.jpg',img5:'5.jpg',img6:'6.jpg'}; //zoznam obrazkov ktore sa maju nacitat
var cesta = 'rotator.swf'; //toto je cesta k SWF
var attributy = {menu:'false'}; // toto tu nechaj
swfobject.embedSWF(cesta, 
                    'flashDiv', // názov DIVu do ktoreho sa ma flash nacitat
                    '640', // šírka SWF
                    '200', // výška SWF 
                    '10',cesta, obrazky, attributy); // toto ta nemusi zaujimat ale nechaj to tam
// ]] >    
</script>                                                                               
    </div>       
  </body>
</html>

A tu je ActionScript zdroj toho Flash rotátoru, ak niekto chce môže si to vytuningovať:)

Kód: Vybrať všetko

import flash.display.BitmapData;
Stage.scaleMode = "noScale";
Stage.align = "TL";
var autoScale:Boolean = (!_root.sc) ? false : true;
var interval:Number = (!_root.timer) ? 2 : parseFloat (_root.timer);
var count:Number = 1;
var cont:String = "con1";
var speed:Number = 5;
var vcon1:Number = 0;
var vcon2:Number = 0;
var obrazky:Array = new Array ();
var o:Number = 1;
while (_root["img" + o] != undefined)
{
    _root.obrazky[o - 1] = _root["img" + o];
    _root.o++;
}
delete _root.o;
var Max:Number = _root.obrazky.length - 1;
this.createEmptyMovieClip ("con1", 1);
this.createEmptyMovieClip ("con2", 2);
function _transform (mmc:MovieClip):Void
{
    if (!_root.autoScale) return;
    mmc._xscale = mmc._yscale = 100;
    if (mmc._width < Stage.width) mmc._xscale = mmc._yscale = (Stage.width / mmc._width) * 100;
    if (mmc._height < Stage.height)
    {
        mmc._xscale = mmc._yscale = 100;
        mmc._xscale = mmc._yscale = (Stage.height / mmc._height) * 100;
    }
}
function _transition (speed:Number):Void
{
    _root.cont = (_root.cont == "con1") ? "con2" : "con1";
    var mc:MovieClip = _root[_root.cont];
    mc.speed = speed;
    mc.onEnterFrame = function ():Void 
    {
        if (this._alpha > 0) this._alpha -= this.speed;
        else
        {
            this._visible = false;
            delete this.onEnterFrame, this.speed;
            if (this._name == "con1") tmc = _root.con2;
            else tmc = _root.con1;
            this.swapDepths (tmc);
            if (Number (_root["v" + this._name]) > _root.Max)
            {
                if (Number (_root["v" + this._name]) > _root.Max + 1) _root["v" + this._name] = 1;
                else _root["v" + this._name] = 0;
            }
            nacitanie.loadClip (_root.obrazky[_root["v" + this._name]], this);
            _root["v" + this._name] += 2;
        }
    };
}
var nacitanie:MovieClipLoader = new MovieClipLoader ();
var kontrola:Object = new Object ();
kontrola.onLoadInit = function (mc:MovieClip)
{
    if (!_root.firstStart)
    {
        _root.firstStart = true;
        if (_root.obrazky.length > 1)
        {
            nacitanie.loadClip (_root.obrazky[1], _root.con1);
            _root["vcon1"] = 3;
            weroro = setInterval (_root._transition, (_root.interval + 1) * 1000, _root.speed);
        }
    }
    mc._xscale = mc._yscale = mc._alpha = 100;
    mc._visible = true;
    var prekreslenie:BitmapData = new BitmapData (mc._width, mc._height, false);
    prekreslenie.draw (mc);
    mc.attachBitmap (prekreslenie, 1, "auto", true);
    _transform (mc);
};
if (_root.obrazky.length > 0)
{
    nacitanie.loadClip (_root.obrazky[0], _root.con2);
    _root["vcon2"] = 2;
}
nacitanie.addListener (kontrola);
var prisposobenie:Object = new Object ();
prisposobenie.onResize = function ():Void 
{
    _root._transform (_root.con1);
    _root._transform (_root.con2);
};
Stage.addListener (prisposobenie);

camo · Príspevok od používateľa **camo** » 17 dec 2011, 21:13

Uf, tak moc ďakujem.

Dúfam, že ťa nešľaktrafí keď ti poviem, že sa mi to nakoniec podarilo rozbehať v tom JS. Problém bol vo funkcii setInterval. Prepísal som to na setTimeout a všetko začalo fungovať ako som potreboval.
Ale ak dovolíš, tak ten tvoj zdroják si pozriem.
A samozrejme to máš u mńa. Ak niečo budeš potrebovať a budem vedieť, tak sa ozvi kľudne na SS. Máš prednostné právo, na riešenie.

A teraz tú galériu...

//autoeditácia príspevku (17 Dec 2011, 23:10)
weroro:
Skúšal som ten tvoj. Frčí to výborne.

Prelínanie obrázkov

Prelínanie obrázkov

Re: Prelínanie obrázkov

Re: Prelínanie obrázkov

Re: Prelínanie obrázkov

Re: Prelínanie obrázkov

Re: Prelínanie obrázkov

Re: Prelínanie obrázkov