Split Image and textbox (class big-photo box) not working

Hey Piotri,

I have installed a copy of the quickstart theme "ecommerce" so I can copy and build a clean version of the parts I need myself.

However when I copy the settings of "Intelligent Shoe" page (the html code) into my wordpress page, it does not display it in the same way it does in the quickstart version. Are there specific files I need to copy in order to make it work?

Thanks for your help!

Hi,

You have to copy also css code and js script, it will be easier to use te ecommerce style.

I would prefer doing it myself and have a clean version for what I need. e.g. I do not need the shopping cart etc. and I would like to keep the website as light as possible for my client.

Which parts of the .js and css do I need?

CSS code:

Code: Select all

.big-photo {
  display: table;
  width: 100%;
}
.big-photo .big-photo-img,
.big-photo .big-photo-desc {
  display: table-cell;
  vertical-align: top;
  width: 50%;
}
.big-photo .big-photo-desc {
  background: #eeaa33;
  padding: 170px 210px;
}
.big-photo .big-photo-desc h2 {
  color: #fff;
  font-size: 1.8rem;
  font-weight: bold;
  letter-spacing: 8px;
  line-height: 1;
  margin: 0 0 72px 0;
  max-width: 560px;
  text-align: left;
  text-transform: uppercase;
}
.big-photo .big-photo-desc p {
  color: #fff;
  line-height: 36px;
  max-width: 560px;
  text-align: left;
}
.big-photo .big-photo-desc > span {
  display: block;
  max-width: 560px;
}
.big-photo .big-photo-img {
  background: #eeaa33;
  height: 100%;
  position: absolute;
}
.big-photo .big-photo-img img {
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
}
.big-photo .big-photo-button {
  background: #000;
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  height: 64px;
  margin: 50px 0;
  -webkit-perspective: 1200;
  -moz-perspective: 1200;
  -ms-perspective: 1200;
  perspective: 1200;
  position: relative;
  width: 64px;
  z-index: 8;
}
.big-photo .big-photo-button.gk-overlay-button {
  position: absolute;
}
.big-photo .big-photo-button .big-photo-button-preloader {
  background: #000;
  border-radius: 50%;
  height: 65px;
  left: 0;
  position: absolute;
  top: 0;
  width: 65px;
  z-index: 10;
}
.big-photo .big-photo-button .big-photo-button-preloader:before,
.big-photo .big-photo-button .big-photo-button-preloader:after {
  background: #fff;
  content: "";
  display: block;
  position: absolute;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
}
.big-photo .big-photo-button .big-photo-button-preloader:before {
  height: 2px;
  left: 20px;
  top: 31px;
  width: 25px;
}
.big-photo .big-photo-button .big-photo-button-preloader:after {
  height: 25px;
  left: 31px;
  top: 20px;
  width: 2px;
}
.big-photo .big-photo-button .big-photo-button-popup {
  background: #fff;
  -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, .19);
  -moz-box-shadow: 0 0 30px rgba(0, 0, 0, .19);
  box-shadow: 0 0 30px rgba(0, 0, 0, .19);
  display: none;
  padding: 60px 45px;
  position: absolute;
  opacity: 0;
  overflow: hidden;
  -webkit-transform: scale(0) translateX(-80px) translateY(80px) rotateX(90deg);
  -moz-transform: scale(0) translateX(-80px) translateY(80px) rotateX(90deg);
  -ms-transform: scale(0) translateX(-80px) translateY(80px) rotateX(90deg);
  -o-transform: scale(0) translateX(-80px) translateY(80px) rotateX(90deg);
  transform: scale(0) translateX(-80px) translateY(80px) rotateX(90deg);
  -webkit-transform-origin: 0 100%;
  -moz-transform-origin: 0 100%;
  -ms-transform-origin: 0 100%;
  -o-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
  width: 300px;
  z-index: 9;
}
.big-photo .big-photo-button .big-photo-button-popup.opened {
  opacity: 1;
  -webkit-transform: scale(1) translateX(0) translateY(0) rotateX(0);
  -moz-transform: scale(1) translateX(0) translateY(0) rotateX(0);
  -ms-transform: scale(1) translateX(0) translateY(0) rotateX(0);
  -o-transform: scale(1) translateX(0) translateY(0) rotateX(0);
  transform: scale(1) translateX(0) translateY(0) rotateX(0);
}
.big-photo .big-photo-button .big-photo-button-popup img {
  display: block;
  height: auto;
  margin: -60px -45px 45px -45px;
  position: static;
}
.big-photo .big-photo-button .big-photo-button-popup strong {
  color: #444;
  display: block;
  font-size: 1.6rem;
  line-height: 1;
  margin: 0 0 20px 0;
  text-transform: uppercase;
  text-align: left;
}
.big-photo .big-photo-button .big-photo-button-popup small {
  color: #777;
  display: block;
  font-size: 1.6rem;
  text-align: left;
}
.big-photo .big-photo-button .gk-circle-loader {
  height: 92px;
  left: -14px;
  opacity: 0;
  position: relative;
  top: -14px;
  -webkit-transform: rotate(-90deg) scale(0.5);
  -moz-transform: rotate(-90deg) scale(0.5);
  -ms-transform: rotate(-90deg) scale(0.5);
  -o-transform: rotate(-90deg) scale(0.5);
  transform: rotate(-90deg) scale(0.5);
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  transition: all .3s ease-out;
  width: 92px;
}
.big-photo .big-photo-button .gk-circle-loader-path {
  fill: none;
  stroke: rgba(255,255,255,0.63);
  stroke-linecap: butt;
  stroke-width: 6px;
  stroke-dasharray: 272;
  stroke-dashoffset: 0;
}
.big-photo .big-photo-button .gk-circle-loader-bar {
  fill: none;
  stroke: #000;
  stroke-linecap: butt;
  stroke-width: 6px;
  stroke-dasharray: 272;
  stroke-dashoffset: 272;
  -webkit-transition: all .75s ease-out;
  -moz-transition: all .75s ease-out;
  -ms-transition: all .75s ease-out;
  -o-transition: all .75s ease-out;
  transition: all .75s ease-out;
}
.big-photo .big-photo-button .gk-circle-loader-bar.loading {
  stroke-dashoffset: 0;
}
.big-photo .big-photo-button.clicked .big-photo-button-preloader:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.big-photo .big-photo-button.clicked .big-photo-button-preloader:after {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.big-photo .big-photo-button.clicked .big-photo-button-popup {
  bottom: 50%;
  display: block;
  left: 50%;
}
.big-photo .big-photo-button.clicked .gk-circle-loader {
  opacity: 1;
  -webkit-transform: rotate(-90deg) scale(1);
  -moz-transform: rotate(-90deg) scale(1);
  -ms-transform: rotate(-90deg) scale(1);
  -o-transform: rotate(-90deg) scale(1);
  transform: rotate(-90deg) scale(1);
}
.big-photo .big-photo-button.loaded .gk-circle-loader {
  opacity: 0;
  -webkit-transform: rotate(-90deg) scale(0);
  -moz-transform: rotate(-90deg) scale(0);
  -ms-transform: rotate(-90deg) scale(0);
  -o-transform: rotate(-90deg) scale(0);
  transform: rotate(-90deg) scale(0);
}


and JS:

Code: Select all

// Big photo buttons
    $(document).ready(function() {
        var big_photo = $('.big-photo');
        var svg_preloader = '<svg version="1.1" viewBox="0 0 92 92" class="gk-circle-loader"><circle class="gk-circle-loader-path" cx="46" cy="46" r="43"></circle><circle class="gk-circle-loader-bar" cx="46" cy="46" r="43"></circle></svg>';
       
        big_photo.each(function(i, photo) {
            $(photo).parent().parent().parent().css('overflow', 'visible');
           
           
        });
   
        var big_photo_buttons = $('.big-photo-button');
   
        if(big_photo_buttons.length) {
            var opened = false;
           
            big_photo_buttons.each(function(i, btn) {
                btn = $(btn);
               
                btn.append(svg_preloader);
               
                btn.click(function(e) {
                    e.stopPropagation();
                    var popup = btn.find('.big-photo-button-popup');
                    var progress_bar = btn.find('.gk-circle-loader').first();
                   
                    if(btn.hasClass('clicked')) {   
                        popup.removeClass('opened');
                       
                        setTimeout(function() {
                            btn.removeClass('clicked');
                            btn.removeClass('loaded'); 
                            progress_bar[0].getElementsByTagName('circle')[1].setAttribute('class', 'gk-circle-loader-bar');
                        }, 300);
                       
                        opened = false;
                    } else {
                        btn.addClass('clicked');
                   
                        setTimeout(function() {
                            progress_bar[0].getElementsByTagName('circle')[1].setAttribute('class', 'gk-circle-loader-bar loading');
                        }, 300);
                       
                        setTimeout(function() {
                            btn.addClass('loaded');
                           
                            setTimeout(function() {
                                popup.addClass('opened');
                                progress_bar.removeClass('loading');
                            }, 50);
                           
                            if(opened !== false) {
                                $(big_photo_buttons[opened]).trigger('click');
                            }
                           
                            opened = i;
                        }, 1000);
                    }
                });
            });
           
            $(document.body).click(function() {
                if(opened !== false) {
                    $(big_photo_buttons[opened]).trigger('click');
                }
            });
        }
    });


Hello,
thanks that partly got me nearer where I want to be.

So I am using the default template page for this and this may actually be the problem. See screenshot attached... How can I fix the width and scaling issue?

Thanks for help!

You probably have some missing css code, that's the problem, when you want to use ecommerce style - the entire ecommerce css file should be loaded.