?
áEÓê¤ÎïLwebshll2019
<!DOCTYPE html>
<html class="fullscreen_page sticky_menu">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="img/favico.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="img/apple_icons_57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/apple_icons_72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/apple_icons_114x114.png">
<title>Oyster | Html Photo Template</title>
<link href="http://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Roboto:400,300,500,900" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/theme.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/responsive.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/custom.css" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<header class="main_header">
<div class="header_wrapper">
<div class="logo_sect">
<a href="index.html" class="logo"><img src="img/logo.png" alt="" class="logo_def"><img src="img/retina/logo.png" alt="" class="logo_retina"></a>
<div class="slogan">html photo template</div>
</div>
<div class="header_rp">
<nav>
<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="menu">
<li class="menu-item-has-children">
<a href="#"><span>Home</span></a>
<ul class="sub-menu">
<li><a href="index.html"><span>Slider</span></a></li>
<li><a href="portfolio_masonry.html"><span>Masonry Portfolio</span></a></li>
<li><a href="horizontal_striped.html"><span>Horizontal Striped</span></a></li>
<li><a href="vertical_striped.html"><span>Vertical Striped</span></a></li>
<li><a href="revolution_slider.html"><span>Revolution Slider</span></a></li>
<li><a href="bg_image.html"><span>Image BG</span></a></li>
<li><a href="bg_video.html"><span>Vimeo BG</span></a></li>
<li><a href="bg_youtube_video.html"><span>Youtube BG</span></a></li>
</ul>
</li>
<li class="current-menu-parent menu-item-has-children">
<a href="#"><span>Gallery</span></a>
<ul class="sub-menu">
<li><a href="gallery_kenburns.html"><span>Kenburns</span></a></li>
<li class="current-menu-item"><a href="gallery_flow.html"><span>Flow</span></a></li>
<li><a href="gallery_ribbon.html"><span>Ribbon</span></a></li>
<li><a href="gallery_photo_listing.html"><span>Photo Listing</span></a></li>
<li><a href="gallery_grid.html"><span>Grid</span></a></li>
<li><a href="gallery_grid_with_margin.html"><span>Grid 2</span></a></li>
<li><a href="gallery_masonry.html"><span>Masonry</span></a></li>
<li><a href="gallery_masonry_with_margin.html"><span>Masonry 2</span></a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#"><span>Portfolio</span></a>
<ul class="sub-menu">
<li><a href="portfolio_grid1.html"><span>Grid Style 1</span></a></li>
<li><a href="portfolio_grid2.html"><span>Grid Style 2</span></a></li>
<li><a href="portfolio_masonry_listing.html"><span>Masonry Style</span></a></li>
<li><a href="portfolio_standard.html"><span>Isotope</span></a></li>
<li class="menu-item-has-children">
<a href="#"><span>Columns</span></a>
<ul class="sub-menu">
<li><a href="portfolio_1col.html"><span>1 Column</span></a></li>
<li><a href="portfolio_2col.html"><span>2 Columns</span></a></li>
<li><a href="portfolio_3col.html"><span>3 Columns</span></a></li>
<li><a href="portfolio_4col.html"><span>4 Columns</span></a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#"><span>Fullscreen Posts</span></a>
<ul class="sub-menu">
<li><a href="fullscreen_ribbon_post.html"><span>Ribbon</span></a></li>
<li><a href="fullscreen_post_without_info.html"><span>Without Info</span></a></li>
<li><a href="fullscreen_post_with_info.html"><span>With Info</span></a></li>
<li><a href="fullscreen_video_post_without_info.html"><span>Video Post</span></a></li>
<li><a href="fullscreen_post_sidebar.html"><span>With Sidebar</span></a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#"><span>Simple Posts</span></a>
<ul class="sub-menu">
<li><a href="simple_fullwidth_image_post.html"><span>Image</span></a></li>
<li><a href="video_post_with_gallery.html"><span>Video</span></a></li>
<li><a href="simple_image_post.html"><span>With Sidebar</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#"><span>Blog</span></a>
<ul class="sub-menu">
<li><a href="fullscreen_blog.html"><span>Fullscreen</span></a></li>
<li class="menu-item-has-children">
<a href="#"><span>Standard</span></a>
<ul class="sub-menu">
<li><a href="blog_with_right_sidebar.html"><span>Right Sidebar</span></a></li>
<li><a href="blog_with_left_sidebar.html"><span>Left Sidebar</span></a></li>
<li><a href="fullwidth_blog.html"><span>Fullwidth</span></a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#"><span>Posts Variants</span></a>
<ul class="sub-menu">
<li><a href="fullwidth_image_post.html"><span>Fullwidth Post</span></a></li>
<li><a href="vimeo_video_post.html"><span>Right Sidebar</span></a></li>
<li><a href="post_with_left_sidebar.html"><span>Left Sidebar</span></a></li>
</ul>
</li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#"><span>Pages</span></a>
<ul class="sub-menu">
<li><a href="about.html"><span>About</span></a></li>
<li><a href="full_width.html"><span>Full Width</span></a></li>
<li><a href="before_after.html"><span>Before/After</span></a></li>
<li><a href="coming_soon.html"><span>Coming Soon</span></a></li>
<li><a href="404.html"><span>404 Error</span></a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#"><span>Features</span></a>
<ul class="sub-menu">
<li><a href="shortcodes.html"><span>Shortcodes</span></a></li>
<li><a href="typography.html"><span>Typography</span></a></li>
</ul>
</li>
<li class="menu-item-has-children">
<a href="#"><span>Contact</span></a>
<ul class="sub-menu">
<li><a href="contacts_fullscreen.html"><span>Fullscreen</span></a></li>
<li><a href="contact_with_sidebar.html"><span>With Sidebar</span></a></li>
<li><a href="contact_fullwidth.html"><span>Fullwidth</span></a></li>
</ul>
</li>
</ul>
</div>
<div class="search_fadder"></div>
<div class="header_search">
<form name="search_form" method="get" action="#" class="search_form">
<input type="text" name="s" value="" placeholder="Search the site..." class="field_search">
</form>
</div>
</nav>
<a class="search_toggler" href="#"></a>
</div>
<div class="clear"></div>
</div>
</header>
<div class="whaterWheel_content">
<div id="whaterwheel">
<div id="ww_finger"></div>
<div class="ww_block" id="ww_block1" data-count="1" data-title=" : Forest">
<div class="ww_wrapper"><a href="javascript:void(0)" class="ww_link" data-count="1"><img width="740" alt="Flow : Forest" height="550" src="img/gallery/flow/1.jpg" /></a></div>
</div>
<div class="ww_block" id="ww_block2" data-count="2" data-title=" : Mountains">
<div class="ww_wrapper"><a href="javascript:void(0)" class="ww_link" data-count="2"><img width="740" alt="Flow : Mountains" height="550" src="img/gallery/flow/2.jpg" /></a></div>
</div>
<div class="ww_block" id="ww_block3" data-count="3" data-title=" : Seashore">
<div class="ww_wrapper"><a href="javascript:void(0)" class="ww_link" data-count="3"><img width="740" alt="Flow : Seashore" height="550" src="img/gallery/flow/3.jpg" /></a></div>
</div>
<div class="ww_block" id="ww_block4" data-count="4" data-title=" : Forest">
<div class="ww_wrapper"><a href="javascript:void(0)" class="ww_link" data-count="4"><img width="740" alt="Flow : Forest" height="550" src="img/gallery/flow/4.jpg" /></a></div>
</div>
<div class="ww_block" id="ww_block5" data-count="5" data-title=" : Lake">
<div class="ww_wrapper"><a href="javascript:void(0)" class="ww_link" data-count="5"><img width="740" alt="Flow : Lake" height="550" src="img/gallery/flow/5.jpg" /></a></div>
</div>
<div class="ww_block" id="ww_block6" data-count="6" data-title=" : Sea">
<div class="ww_wrapper"><a href="javascript:void(0)" class="ww_link" data-count="6"><img width="740" alt="Flow : Sea" height="550" src="img/gallery/flow/6.jpg" /></a></div>
</div>
<div class="ww_block" id="ww_block7" data-count="7" data-title=" : Mountains">
<div class="ww_wrapper"><a href="javascript:void(0)" class="ww_link" data-count="7"><img width="740" alt="Flow : Mountains" height="550" src="img/gallery/flow/7.jpg" /></a></div>
</div>
<div class="ww_block" id="ww_block8" data-count="8" data-title=" : Seashore">
<div class="ww_wrapper"><a href="javascript:void(0)" class="ww_link" data-count="8"><img width="740" alt="Flow : Seashore" height="550" src="img/gallery/flow/8.jpg" /></a></div>
</div>
<div class="ww_block" id="ww_block9" data-count="9" data-title=" : People">
<div class="ww_wrapper"><a href="javascript:void(0)" class="ww_link" data-count="9"><img width="740" alt="Flow : People" height="550" src="img/gallery/flow/9.jpg" /></a></div>
</div>
</div>
<div class="ww_footer">
<div class="ww_footer_left">
<h6 class="title">Flow</h6>
<h6 class="img_title"></h6>
</div>
<div class="ww_footer_right">
<div class="slider_share">
<div class="blogpost_share">
<span>Share this:</span>
<a href="javascript:void(0)" class="share_facebook"><i class="stand_icon icon-facebook-square"></i></a>
<a href="javascript:void(0)" class="share_pinterest"><i class="stand_icon icon-pinterest"></i></a>
<a href="javascript:void(0)" class="share_tweet"><i class="stand_icon icon-twitter"></i></a>
<a href="javascript:void(0)" class="share_gplus"><i class="icon-google-plus-square"></i></a>
<div class="clear"></div>
</div>
</div>
<div class="block_likes">
<div class="post-views"><i class="stand_icon icon-eye"></i> <span>4112</span></div>
<div class="gallery_likes gallery_likes_add">
<i class="stand_icon icon-heart-o"></i>
<span>29</span>
</div>
</div>
</div>
</div>
</div>
<div class="preloader"></div>
<div class="content_bg"></div>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/modules.js"></script>
<script type="text/javascript" src="js/theme.js"></script>
<script type="text/javascript">
var whaterWheel = jQuery("#whaterwheel"),
allSize = jQuery('.ww_block').size();
jQuery(document).ready(function ($) {
"use strict";
setupWW();
jQuery('.ww_link').click(function(){
setSlide(parseInt(jQuery(this).attr('data-count')))
});
jQuery(document.documentElement).keyup(function (event) {
if ((event.keyCode == 37) || (event.keyCode == 40)) {
prev_ww();
// Right Arrow or Up Arrow
} else if ((event.keyCode == 39) || (event.keyCode == 38)) {
next_ww();
}
});
jQuery('#ww_finger').on("swipeleft",function(){
next_ww();
});
jQuery('#ww_finger').on("swiperight",function(){
prev_ww();
});
});
function next_ww() {
"use strict";
cur_slide = parseInt(jQuery('.current').attr('data-count'));
cur_slide++;
if (cur_slide > allSize) cur_slide = 1;
if (cur_slide < 1) cur_slide = allSize;
setSlide(cur_slide);
}
function prev_ww() {
"use strict";
cur_slide = parseInt(jQuery('.current').attr('data-count'));
cur_slide--;
if (cur_slide > allSize) cur_slide = 1;
if (cur_slide < 1) cur_slide = allSize;
setSlide(cur_slide);
}
jQuery(window).load(function (){
"use strict";
setupWW();
setTimeout("setupWW()",500);
setTimeout("setupWW()",1000);
});
jQuery(window).resize(function (){
"use strict";
setupWW();
setTimeout("setupWW()",500);
setTimeout("setupWW()",1000);
});
var atr056 = 0,
atr078 = 0,
atr_main = 1;
function setSlide(cur) {
"use strict";
if (window_w > 1025) {
whaterWheel.find('img').unreflect();
}
if (window_w > 960) {
atr056 = 0.56;
atr078 = 0.78;
atr_main = 1;
} else if (window_w > 760 && window_w < 960){
atr056 = 0.37;
atr078 = 0.56;
atr_main = 0.75;
} else if (window_w < 760){
atr056 = 0.3;
atr078 = 0.5;
atr_main = 0.75;
}
jQuery('.prev2').removeClass('prev2');
jQuery('.prev').removeClass('prev');
jQuery('.current').removeClass('current');
jQuery('.next').removeClass('next');
jQuery('.next2').removeClass('next2');
jQuery('#ww_block'+cur).addClass('current');
if (whaterWheel.hasClass('type5')) {
if((cur+1) > allSize) {
jQuery('#ww_block1').addClass('next');
jQuery('#ww_block2').addClass('next2');
} else if ((cur+1) == allSize){
jQuery('#ww_block'+allSize).addClass('next');
jQuery('#ww_block1').addClass('next2');
} else {
jQuery('#ww_block'+(cur+1)).addClass('next');
jQuery('#ww_block'+(cur+2)).addClass('next2');
}
if((cur-1) < 1) {
jQuery('#ww_block'+allSize).addClass('prev');
jQuery('#ww_block'+(allSize-1)).addClass('prev2');
} else if ((cur-1) == 1){
jQuery('#ww_block1').addClass('prev');
jQuery('#ww_block'+allSize).addClass('prev2');
} else {
jQuery('#ww_block'+(cur-1)).addClass('prev');
jQuery('#ww_block'+(cur-2)).addClass('prev2');
}
}
jQuery('.prev2').css('margin-left', -1*(jQuery('.current').width()/2)-jQuery('.current').width()*0.78/1.333-jQuery('.current').width()*0.56/1.333);
jQuery('.prev').css('margin-left', -1*(jQuery('.current').width()/2)-jQuery('.current').width()*0.78/1.333);
jQuery('.current').css('margin-left', -1*(jQuery('.current').width()/2));
jQuery('.next').css('margin-left' , -1*(jQuery('.current').width()/2)+jQuery('.current').width()*0.78/1.333);
jQuery('.next2').css('margin-left' , -1*(jQuery('.current').width()/2)+jQuery('.current').width()*0.78/1.333+jQuery('.current').width()*0.56/1.333);
jQuery('.img_title').text(jQuery('.current').attr('data-title'));
if (window_w > 1025) {
whaterWheel.find('img').reflect({height:0.24,opacity:0.25});
whaterWheel.find('canvas').each(function(){
jQuery(this).width(jQuery(this).prev('img').width());
});
}
}
function setupWW() {
"use strict";
if (window_w > 1025) {
whaterWheel.find('img').unreflect();
}
if (window_w > 960) {
atr056 = 0.56;
atr078 = 0.78;
atr_main = 1;
} else if (window_w > 760 && window_w < 960){
atr056 = 0.37;
atr078 = 0.56;
atr_main = 0.75;
} else if (window_w < 760){
atr056 = 0.3;
atr078 = 0.5;
atr_main = 0.75;
}
var setHeight = (window_h-header.height()-jQuery('.ww_footer').height()-1)*atr_main;
var setWidth = window_w - parseInt(whaterWheel.css('padding-left')) - parseInt(whaterWheel.css('padding-right'));
whaterWheel.height(setHeight*0.7).width(setWidth).css({'margin-top' : setHeight*0.15, 'margin-bottom' : setHeight*0.15});
whaterWheel.width();
whaterWheel.height((window_h-header.height()-jQuery('.ww_footer').height())*0.7);
if (jQuery('.current').size() < 1) {
if (whaterWheel.find('.ww_block').size() > 4) {
whaterWheel.addClass('type5');
jQuery('#ww_block1').addClass('prev2');
jQuery('#ww_block2').addClass('prev');
jQuery('#ww_block3').addClass('current');
jQuery('#ww_block4').addClass('next');
jQuery('#ww_block5').addClass('next2');
} else if (whaterWheel.find('.ww_block').size() > 2) {
whaterWheel.addClass('type3');
jQuery('#ww_block1').addClass('prev');
jQuery('#ww_block2').addClass('current');
jQuery('#ww_block3').addClass('next');
} else if (whaterWheel.find('.ww_block').size() == 2) {
whaterWheel.addClass('type2');
jQuery('#ww_block1').addClass('current');
jQuery('#ww_block2').addClass('next');
} else if (whaterWheel.find('.ww_block').size() == 1) {
whaterWheel.addClass('type1');
jQuery('#ww_block1').addClass('current');
}
}
jQuery('.prev2').css('margin-left', -1*(jQuery('.current').width()/2)-jQuery('.current').width()*atr078/1.333-jQuery('.current').width()*atr056/1.333);
jQuery('.prev').css('margin-left', -1*(jQuery('.current').width()/2)-jQuery('.current').width()*atr078/1.333);
jQuery('.current').css('margin-left', -1*(jQuery('.current').width()/2));
jQuery('.next').css('margin-left' , -1*(jQuery('.current').width()/2)+jQuery('.current').width()*atr078/1.333);
jQuery('.next2').css('margin-left' , -1*(jQuery('.current').width()/2)+jQuery('.current').width()*atr078/1.333+jQuery('.current').width()*atr056/1.333);
jQuery('.img_title').text(jQuery('.current').attr('data-title'));
if (window_w > 1025) {
whaterWheel.find('img').reflect({height:0.24,opacity:0.25});
whaterWheel.find('canvas').each(function(){
jQuery(this).width(jQuery(this).prev('img').width());
});
}
}
</script>
</body>
</html>