Poprawna obsługa obrazków w wysokiej rozdzielczości

Tutaj możesz napisać co chciałbyś aby wdrożyli nasi programiści w programie sklepu internetowego sStore

Poprawna obsługa obrazków w wysokiej rozdzielczości

Postprzez Webmajster » 14 wrz 2011, 11:58

Kiedy klikam na obrazek w galerii produktu jest on powiększany do rozmiaru takiego jaki wgrałem, nawet jeśli rozdzielczość monitora jest niższa.
Czy nie można by zrobić tak, że jeśli obrazek jest większy niż rozdzielczość monitora (dokładniej okna przeglądarki) to jest on dopasowywany do rozdzielczości jaką ma klient?
Oczywiście należało by wtedy dodać gdzieś przycisk 'Obejrzyj w pełnej rozdzielczości' lub 'Powiększ', żeby zainteresowany klient mógł obejrzeć szczegóły.
Webmajster
 
Posty: 2
Dołączył(a): 14 wrz 2011, 01:22

Re: Poprawna obsługa obrazków w wysokiej rozdzielczości

Postprzez pomoc.sstore » 16 wrz 2011, 16:41

Witam serdecznie!


1. Dodane zdjęcia produktów jak i zdjęcia kategorii są oczywiście automatycznie skalowane. Jeśli jednak są to zdjęcia w bardzo wysokiej rozdzielczości mogą sprawiać problem. Proszę zmniejszyć nieco ich rozmiar i ponownie wgrać określone pliki graficzne na serwer.


2. W razie pytań służę pomocą. Nasi konsultanci pozostają również do Pańskiej dyspozycji. Lista konsultantów znajduje się w naszym serwisie pomocy pod adresem:

http://pomoc.sstore.pl/


Pozdrawiam.
Avatar użytkownika
pomoc.sstore
 
Posty: 269
Dołączył(a): 07 wrz 2010, 15:56

Re: Poprawna obsługa obrazków w wysokiej rozdzielczości

Postprzez Webmajster » 21 wrz 2011, 15:18

Jeśli ktoś z użytkowników nie może się doczekać zmiany (pisałem z pomocą i za jaakiś czas wprowadzą poprawkę o ile wszystko pójdzie dobrze) to w Panel Administracyjny -> Narzędzia -> Narzędzia Webmastera -> Dodatkowy kod javascript w sekcji HEAD wystarczy dokleić poniższy kod.
Kod: Zaznacz cały
function redefineLightbox()
{
   if (typeof(Lightbox) != "undefined")
   {
      Lightbox.prototype.start = function(imageLink) {
         $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' });

         // stretch overlay to fill page and fade in
         var arrayPageSize = this.getPageSize();
         $('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' });

         new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity });

         this.imageArray = [];
         var imageNum = 0;       

         if ((imageLink.getAttribute("rel") == 'lightbox')){
            // if image is NOT part of a set, add single image to imageArray
            this.imageArray.push([imageLink.href, imageLink.title]);         
         } else {
            // if image is part of a set..
            this.imageArray =
               $$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]').
               collect(function(anchor){ return [anchor.href, anchor.title]; }).
               uniq();
            
            while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }
         }

         // calculate top and left offset for the lightbox
         var arrayPageScroll = document.viewport.getScrollOffsets();
         var lightboxTop = arrayPageScroll[1] + 10;
         var lightboxLeft = arrayPageScroll[0];
         this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show();
         
         this.changeImage(imageNum);
      }
      Lightbox.prototype.getWindowSize = function() {   
         var winW = 500, winH = 300;
         if (document.body && document.body.offsetWidth) {
          winW = document.body.offsetWidth;
          winH = document.body.offsetHeight;
         }
         if (document.compatMode=='CSS1Compat' &&
            document.documentElement &&
            document.documentElement.offsetWidth ) {
          winW = document.documentElement.offsetWidth;
          winH = document.documentElement.offsetHeight;
         }
         if (window.innerWidth && window.innerHeight) {
          winW = window.innerWidth;
          winH = window.innerHeight;
         }

         return [winW,winH];

      }

      Lightbox.prototype.changeImage = function(imageNum) {   
         
         this.activeImage = imageNum; // update global var

         // hide elements during transition
         if (LightboxOptions.animate) this.loading.show();
         this.lightboxImage.hide();
         this.hoverNav.hide();
         this.prevLink.hide();
         this.nextLink.hide();
         // HACK: Opera9 does not currently support scriptaculous opacity and appear fx
         this.imageDataContainer.setStyle({opacity: .0001});
         this.numberDisplay.hide();     

         var imgPreloader = new Image();

         // once image is preloaded, resize image container
         imgPreloader.onload = (function(){
            this.lightboxImage.src = this.imageArray[this.activeImage][0];

            var windowSize = this.getWindowSize();
            var windowWidth = windowSize[0];
            var windowHeight = windowSize[1];

            var newWidth = imgPreloader.width;
            var newHeight = imgPreloader.height;

            var ratio = 1;
            if(windowWidth < newWidth)
            {
               ratio = windowWidth / newWidth;
               newWidth = newWidth * ratio;
               newHeight = newHeight * ratio;
            }
            if(windowHeight < newHeight)
            {
               ratio = windowHeight / newHeight;
               newWidth = newWidth * ratio;
               newHeight = newHeight * ratio;
            }

            if(ratio != 1)
            {
               newWidth = newWidth * 0.9;
               newHeight = newHeight * 0.9;
            }

            /*Bug Fixed by Andy Scott*/
            this.lightboxImage.width = newWidth;
            this.lightboxImage.height = newHeight;
            this.lightboxImage.style.width = newWidth + 'px';
            this.lightboxImage.style.height = newHeight + 'px';
            /*End of Bug Fix*/
            this.resizeImageContainer(newWidth, newHeight);
         }).bind(this);
         imgPreloader.src = this.imageArray[this.activeImage][0];
      }
   }
   else
   {
      setTimeout("redefineLightbox()",50);
   }
}
setTimeout("redefineLightbox()",10);
Webmajster
 
Posty: 2
Dołączył(a): 14 wrz 2011, 01:22

Re: Poprawna obsługa obrazków w wysokiej rozdzielczości

Postprzez pomoc.sstore » 02 paź 2012, 14:46

Witam serdecznie!


1. Postaramy się dodać pewne inne rozwiązanie w przyszłości, aby rozwiązać ten problem. Oczywiście Pana rozwiązanie może nie działać już w sklepach sStore, ponieważ w oprogramowaniu sklepu nie używamy już framework-u prototype (framework prototype przestał być już w 2008 roku rozwijany i zamieniliśmy go na jquery).


2. W razie dalszych pytań służę pomocą. Na zgłoszenie czekają również nasi konsultanci:

http://pomoc.sstore.pl/
Avatar użytkownika
pomoc.sstore
 
Posty: 269
Dołączył(a): 07 wrz 2010, 15:56


Powrót do Sklep internetowy, sStore. Co nowego chciałbyś mieć w swoim sklepie?

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 0 gości

cron

Sklep internetowy

na oprogramowaniu sStore to bardzo funkcjonalny, profesjonalny a za razem prosty w obsłudze

sklep

. Nasze

sklepy internetowe

od lat uznawane są za jedne z najlepszych oraz najtańszych systemów na rynku. Oferta naszej platformy jest skierowana do ludzi, którzy cenią sobie wygodę, prostotą obsługi, stały rozwój oprogramowania oraz pomoc techniczną wtedy, kiedy jej potrzebują.

Sklepy

stworzone za pomocą naszego oprogramowania zapewniają wysoką skuteczność sprzedaży – posiadają integrację z Allegro.pl, hurtowniami, porównywarkami cen i bazarami.

Sklep internetowy

- program sklepu - służy do prowadzenia sprzedaży towarów i usług w Internecie. Zapraszamy do zapoznania się z pełną specyfikacją naszego programu Sklep internetowy sStore.