Portfolio / Photo presentation

Preview: start05.webtool.lt

Additional modules used in preview: additional languages, responsive mobile.

Copy/paste the code below into corresponding fields:

 Custom CSS

/***********************************/
/*CUSTOM GOOGLE FONT - DEMO SETINGS*/
/***********************************/
/*Import the font in HEAD section*/
/*Set the font*/
*{font-family: 'Open Sans', sans-serif !important;}

/******************************************************************/
/*IFRAME BLOCK ENABLER - DEMO SETINGS (i.e. google maps, youtube) */
/******************************************************************/
iframe {pointer-events: none; opacity:0.5; transition: all 0.3s ease; background-image:url('/uploads/userfiles/data/preload.gif'); background-position:center center; background-repeat:no-repeat; background-size:auto;}

/*******************************************************************************************************************************/
/*IFRAME WINDOW FULL WIDTH / 50% WINDOW HEIGHT - DEMO SETINGS (i.e. google maps in Contacts, change tags to use it elsewhere)*/
/*******************************************************************************************************************************/
.it5/*forms id*/ .iframeHolder iframe {height:100%}
.it5/*forms id*/ .iframeHolder {left: 50%; margin-left: -50vw;  width: 100vw; height:50vh;}

/********************************************************************/
/*AUTO RESIZE HEIGHT OF SLIDES according to VIEWPORT  - DEMO SETINGS*/
/********************************************************************/
/*slides in background*/
.sliderReservedHeight {height: 90vh !important;}
/*slides in content*/
div.slider_cont div.viewport div.slider, div.slider_cont, div.slider_cont div.slides_block, div.slider_cont div.viewport, div.slider_cont div.viewport div.slider div.slide, div.slider_cont div.slide a.normal, div.slider_cont div.viewport
{height: 90vh !important;}
/*mobile VH fix - it has to be in px*/
.mobileLayout .sliderReservedHeight {height: 400px !important;}
/*fck zone positioning*/
html body#bdy div.widthClip table.layer.blockCnt div.sliderReservedHeight div.fck, div.sliderCrop div.slide div.fck
{box-sizing: border-box;  height: auto !important;  margin-top: -200px !important; max-height: 400px; padding-left: 10px; padding-right: 10px;  position: absolute; top: 50%;}

/**** **** **** **** **** **** **** ****/
/****  LAYOUT/DEFAULT RELATED CSS   ****/
/**** **** **** **** **** **** **** ****/

/*Photo album list variation - 100% width*/
div.album_block {width:100%; padding-right: 0;}
div.album_block div.thumb_side {width:100%;padding-right: 0;}
div.album_block div.thumb_side a {height:50vh; }
div.album_block div.data_side {width:100%;}

/*Photo album variation - 50% width*/
div.gallery div.mthumb {width:50%;}
div.gallery div.mthumb a {height: 390px;}
div.album_block div.data_side div.summary .more {float: right;}
 

 
Custom JS

$(document).ready(function() {   

/*  
/////youtube, vimeo iframe wrapper - in case its needed/////

$('iframe[src*="youtube.com"]').each(function() {
        var url = $(this).attr("src")
       $(this).add( $(this).andSelf() ).wrapAll('<div class="iframeVideoHolder" ></div>');
        
    });
$('iframe[src*="vimeo.com"]').each(function() {
        var url = $(this).attr("src")
        $(this).add( $(this).andSelf() ).wrapAll('<div class="iframeVideoHolder" ></div>');
    });   
*/

/////iframe wrapper//////////////////////////////////////////////////////////////////////////////////////////  
 $(document).ready(function(){
 $('iframe').each(function(){
  $(this).add( $(this).andSelf()).wrapAll('<div class="iframeHolder" ></div>');
 })
});

/////youtube, vimeo iframe wrap remover/////  
$('iframe[src*="youtube.com"]').each(function() {
        var url = $(this).attr("src")
       $('iframe').css({'pointer-events':'auto', 'opacity':'1'});      
       $(this).remove( $(this).andSelf() ).wrapAll();
        
    });
$('iframe[src*="vimeo.com"]').each(function() {
        var url = $(this).attr("src")
       $('iframe').css({'pointer-events':'auto', 'opacity':'1'});      
       $(this).remove( $(this).andSelf() ).wrapAll();
    });  
 
    
 
/////select wrapper/////////////////////////////////////////////////////////////////////////////////////////  
 $(document).ready(function(){
 $('select').each(function(){
  $(this).add( $(this).andSelf() ).wrapAll('<div class="selectHolder"></div>');
 })
});
 
////////next prev product animation on click////////////////////////////////////////////////////////////////  
 
$('.next > a').click(function (e) {
    e.preventDefault();                   
    var goTo = this.getAttribute("href");
    $("body").css("transition","all 0.5s ease");
    $("body").css("opacity","0");

    setTimeout(function(){
         window.location = goTo;
    },500);       
});
 
$('.prev > a').click(function (e) {
    e.preventDefault();                   
    var goTo = this.getAttribute("href");
    $("body").css("transition","all 0.5s ease");
    $("body").css("opacity","0");

    setTimeout(function(){
         window.location = goTo;
    },500);       
});  
 
}); //////// .ready end ///////////////////////////////////////////////////////////////////////////////////////


window.onload = function () {

/////iframe enabler/////  
$('div.iframeHolder').click(function () {  
  $('iframe').css({'pointer-events':'auto', 'opacity':'1'});  
});

}; //////// .onload end ///////////////////////////////////////////////////////////////////////////////////////
 

HEAD tag

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700&subset=latin,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>