Autor Zpráva
Vasill18
Profil
Zdravím,

můžete mi prosím pomoct s velikostí obrázku po kliknutí na produkt?
Pakliže je produkt malé fotografie na bílém pozadí, chtěl bych aby byl na středu min šíře a výše 450px pro optické zvětšení.
Příklad malého obrázku:


Aby tam byla nastavena minimální hodnota 450px x 450px pokud obrázek nebude dosahovat této velikosti na bílém pozadí.
Díky za pomoc

odkaz
Gavier
Profil
Vasill18:
Pomocí javascriptu bych si zjístil velikost obrázku a pokud bude menší než 450px, tak by jsi obrázek vložil do divu o velikosti 450px x 450px. Vycentrování by bylo asi nejednoduší kdyby jsi vložil obrzázek na pozadí toho divu. Nemám kokrétní kod, ale něco takovéhohle:
var img = document.getElementByTagName("img");
if (img.style.height < 450||  img.style.width < 450)
{
    document.getElementById('zoom').innerHTML = '<div id="box" style="width:450px;height:450px;"></div>';
    document.getElementById('box').style.background = "#fff url(...) center center no-repeat"
}
else
...
Vasill18
Profil
<div id="zoom" class="popup zoom on" style="overflow: hidden; width: 254px; height: 282px; margin-left: -127px; margin-top: -141px; ">
    <ul class="tabs">
                <li class="close"><a href="http://www.eshop-sperku.cz/VYPRODEJ/Vyprodej-PSCL48-59.html" class="close" onclick="oxid.popup.hide('zoom');return false;">X</a></li>
    </ul>
    <img src="http://www.eshop-sperku.cz/out/pictures/z1/pscl48_z1.jpg" alt="Výprodej PSCL48 59" id="zoom_img" onclick="oxid.popup.hide('zoom');">
            
        
    </div>

takhle vypadá kód v náhledu.
Myslel jsem že by se to dalo upravit jen v CSS. Je tedy potřeba sáhnout do JS?
Zkusím se podívat ještě do JS
Someone
Profil
Gavier:
getElementByTagName neexistuje.
Keeehi
Profil
Ale existuje podobný getElementsByTagName
Gavier
Profil
Someone, Keeehi:
Díky za opravu.
Vasill18:
No možná by to šlo udělat v CSS pomocí min-width ale nikdy jsem tuto vlastnost nepoužil, takže stím asi neporadím.
margin
Profil *
Gavier:
No možná by to šlo udělat v CSS pomocí min-width
Pokud správně chápu zadání, zmenšit velké obrázky, ale malé obrázky nezvětšovat, tak bych to spíše tipoval na max-width obrázku, ale pak bude problém s obrázky na výšku.
Půjde to, pokud bude pro obrázek deklarované max-width i max-height, ale obrázek nesmí mít deklarované rozměry v HTML ani v CSS, jinak dojde ke stranové deformaci obrázku.

Vasill18:
Pokud hledáš řešení i pro IE6, tak přiřaď rozměry obrázku JavaSctiptem.
Vasill18
Profil
 // Popups
    popup: {
        load : function(){ oxid.popup.setClass('wait','popup load on','on');},
        show : function(){ oxid.popup.setClass('popup','popup on','on');},
        showFbMsg : function(){ oxid.popup.setClass('popup','popup on fbMsg','on');},
        hide : function(id){ oxid.popup.setClass(id?id:'popup','popup','');},

        setClass: function (id,pcl,mcl){
            var _mk = document.getElementById('mask');
            var _el = document.getElementById(id);
            if(_mk && _el) {
                _mk.className = mcl;
                _el.className = pcl;
            }
        },

        addShim : function(){
            var _fr, _mk = document.getElementById('mask');
            if(_mk) {
                _fr = document.createElement('iframe');
                _fr.setAttribute('src','javascript:false;'); //MS Q261188
                _mk.appendChild(_fr);
            }
       },

        open : function(url,w,h,r){
            if (url !== null && url.length > 0) {
                var _cfg = "status=yes,scrollbars=no,menubar=no,width="+w+",height="+h+(r?",resizable=yes":"");
                window.open(url, "_blank", _cfg);
            }
        },

        compare : function(url){
            oxid.popup.open(url,620,400,true);
        },

        zoom    : function(){
            oxid.popup.setClass('zoom','popup zoom on','on');
        },

        addResizer : function(image_id,container_id,pw,ph){
            var _pl, _el = document.getElementById(image_id);
            if(_el) {
                _el.onload = function(e){
                    if(this.tagName.toUpperCase() == 'IMG') {
                        if(this.width && this.height){
                            oxid.popup.resize(container_id, this.width+pw, this.height+ph);
                        }else{
                            _pl = new Image();
                            _pl.src = _el.src;
                            _pl.onload = function(e) {
                                oxid.popup.resize(container_id, this.width+pw, this.height+ph);
                                _pl.onload = null;
                                _pl = null;
                            };
                        }
                    }
                };
            }
        },

        resize  : function(id, newWidth, newHeight ){

            if(newWidth === 0 && newHeight === 0){
                return;
            }

            var _el = document.getElementById(id);
            var maxWidth = newWidth;
            var maxHeight = maxHeight;
            var overflow = 'auto';

            if(_el) {
                if( typeof( window.innerWidth ) == 'number' ) {
                    maxWidth  = window.innerWidth;
                    maxHeight = window.innerHeight;
                } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
                    maxWidth  = document.documentElement.clientWidth;
                    maxHeight = document.documentElement.clientHeight;
                }

                if(newWidth < maxWidth && newHeight < maxHeight){ overflow = 'hidden';}
                if(newWidth > maxWidth){ newWidth = maxWidth;}
                if(newHeight > maxHeight){ newHeight = maxHeight;}

                _el.style.overflow = overflow;

                _el.style.width  = newWidth+'px';
                _el.style.height = newHeight+'px';

                _el.style.marginLeft = '-'+Math.round(newWidth/2)+'px';
                _el.style.marginTop  = '-'+Math.round(newHeight/2)+'px';
            }
        }

    },

Věděl by prosím někdo jak to doupravit? Kam tu podmínku přesně přidat? Díky moc za pomoc.
Vasill18
Profil
Případně kdo by měl zájem, můžeme se dohodnout na ceně? Zájemci, napište mi prosím vaši cenovou nabídku na moji poptávku. Děkuju.
Chamurappi
Profil
Zájemci, napište mi prosím vaši cenovou nabídku na moji poptávku
Uveď na sebe kontakt.
Vasill18
Profil
Omlouvám se, ICQ: 266 702 327 // email: digi-style@email.cz

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: