| Server IP : 210.245.233.93 / Your IP : 216.73.216.226 Web Server : Apache/2.2.15 (CentOS) System : Linux webserver2.onesolution.com.hk 2.6.32-754.35.1.el6.x86_64 #1 SMP Sat Nov 7 12:42:14 UTC 2020 x86_64 User : apache ( 48) PHP Version : 5.3.3 Disable Function : exec, shell_exec, system, passthru, popen, proc_open, pcntl_exec MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/hkosl.com/101/ |
Upload File : |
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>101 forest event decoration</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="stylesheet" type="text/css" href="css/pepper-grinder/jquery-ui-1.10.1.custom.min.css?v=201303141017" />
<link rel="stylesheet" type="text/css" href="css/elastislide.css?v=201303141017" />
<link rel="stylesheet" type="text/css" href="css/style.css?v=201303141017" />
<script src="js/html5shiv.js?v=201303141017"></script>
<script src="js/jquery-1.8.3.min.js?v=201303141017"></script>
<script src="js/modernizr.custom.45774.js?v=201303141017"></script>
<script src="js/jquery-ui-1.10.1.custom.min.js?v=201303141017"></script>
<script src="js/jquery.corner-2.13.js?v=201303141017"></script>
<script src="js/jquery.slideshow.min.js?v=201303141017"></script>
<script src="js/jquerypp.custom.js?v=201303141017"></script>
<script src="js/jquery.elastislide.js?v=201303141017"></script>
<script src="js/common-start.js?v=201303141017"></script>
<script>
function setImages(imageInfos) {
$('#carousel').empty();
$('#preload_img').empty();
$('.fixed-bar').empty();
$('<ul id="carousel" class="elastislide-list" />').appendTo($('.fixed-bar'));
for (var i = 0; i < imageInfos.length; i++) {
var imgInfo = imageInfos[i];
$('<li><a href="#"><img alt="' + imgInfo.desc + '" src="' + imgInfo.small + '" /></a></li>').data('large-img', imgInfo.large).appendTo($('#carousel'));
$('<img src="' + imgInfo.large + '" alt="' + imgInfo.desc + '" />').appendTo($('#preload_img'));
}
var current = 0,
$container = $('#container'),
$carousel = $('#carousel'),
$carouselChilds = $carousel.children(),
carousel = $carousel.elastislide({
current: current,
onClick: function(el, pos, evt) {
changeImage(el, pos);
evt.preventDefault();
},
onReady: function() {
changeImage($carouselChilds.eq(current), current);
}
});
function changeImage(el, pos) {
var imgUrl = el.data('large-img');
imgUrl = "url('" + imgUrl + "')";
$container.css({ 'background-image': imgUrl }).hide().fadeIn();
$carouselChilds.removeClass('current-img');
el.addClass('current-img');
carousel.setCurrent(pos);
}
}
var tmpIndex = 0;
$(function() {
$('.album-menu-button').hover(function(evt) {
$(this).attr('src', 'images/menu_btn_on.png');
if ($.browser.msie && parseInt($.browser.version, 10) <= 8) {
$(this).parents('li').first().find('.album-menu-title').show();
} else {
$(this).parents('li').first().find('.album-menu-title').animate({ opacity: 1 }, { queue: false });
}
}, function(evt) {
$(this).attr('src', 'images/menu_btn_off.png');
if ($.browser.msie && parseInt($.browser.version, 10) <= 8) {
$(this).parents('li').first().find('.album-menu-title').hide();
} else {
$(this).parents('li').first().find('.album-menu-title').animate({ opacity: 0 }, { queue: false });
}
});
if ($.browser.msie && parseInt($.browser.version, 10) <= 8) {
$('.album-menu-title').hide();
}
$('#album_menu_top').corner('top 16px');
$('#album_menu_bottom').corner('bottom 16px');
$('.album-menu-button').click(function(evt) {
tmpIndex++;
tmpIndex = tmpIndex % 2;
var imageInfos = [
//{ small: 'gallary/1/small/01.jpg', large: 'gallary/1/large/01.jpg', desc: 'image01' }
];
if (tmpIndex == 0) {
for (var i = 1; i <= 8; i++) {
imageInfos.push({
small: 'gallary/1/small/0' + i + '.jpg',
large: 'gallary/1/large/0' + i + '.jpg',
desc: 'image0' + i
});
}
} else {
for (var i = 1; i <= 8; i++) {
imageInfos.push({
small: 'gallary/2/small/0' + i + '.jpg',
large: 'gallary/2/large/0' + i + '.jpg',
desc: 'image0' + i
});
}
}
setImages(imageInfos);
});
var imageInfos = [
//{ small: 'gallary/1/small/01.jpg', large: 'gallary/1/large/01.jpg', desc: 'image01' }
];
for (var i = 1; i <= 8; i++) {
imageInfos.push({
small: 'gallary/1/small/0' + i + '.jpg',
large: 'gallary/1/large/0' + i + '.jpg',
desc: 'image0' + i
});
}
setImages(imageInfos);
});
</script>
<style>
#container {
min-height: auto;
position: fixed;
width: 100%;
height: 100%;
background: no-repeat center center fixed;
background-size: cover;
}
body {
background-color: transparent;
}
</style>
</head>
<body>
<header>
<div class="header-container">
<div class="logo"><a href="index.html"><img alt="logo" src="images/logo.png" /></a></div>
<div class="menu">
<ul class="menu">
<li><a href="about_us.html"><img alt="About us" src="images/menu-about-us.png" /></a></li>
<li><a href="decoration.html"><img alt="Decoration" src="images/menu-decoration.png" /></a></li>
<li><a href="#flower_stand.html"><img alt="Flower stand" src="images/menu-flower-stand.png" /></a></li>
<li><a href="#corsage.html"><img alt="Corsage" src="images/menu-corsage.png" /></a></li>
<li><a href="#receiption_decor.html"><img alt="Reception decor" src="images/menu-reception-decor.png" /></a></li>
<li><a href="contact_us.html"><img alt="Contact us" src="images/menu-contact-us.png" /></a></li>
</ul>
</div>
<div class="follow-us">
<a href="#"><img alt="Follow us" src="images/menu-follow-us.png" /></a>
</div>
</div>
</header>
<div class="fixed-bar">
<ul id="carousel" class="elastislide-list">
<!--
<li data-large-img="gallary/1/large/01.jpg"><a href="#"><img src="gallary/1/small/01.jpg" alt="image01" /></a></li>
<li data-large-img="gallary/1/large/02.jpg"><a href="#"><img src="gallary/1/small/02.jpg" alt="image02" /></a></li>
<li data-large-img="gallary/1/large/03.jpg"><a href="#"><img src="gallary/1/small/03.jpg" alt="image03" /></a></li>
<li data-large-img="gallary/1/large/04.jpg"><a href="#"><img src="gallary/1/small/04.jpg" alt="image04" /></a></li>
<li data-large-img="gallary/1/large/05.jpg"><a href="#"><img src="gallary/1/small/05.jpg" alt="image05" /></a></li>
<li data-large-img="gallary/1/large/06.jpg"><a href="#"><img src="gallary/1/small/06.jpg" alt="image06" /></a></li>
<li data-large-img="gallary/1/large/07.jpg"><a href="#"><img src="gallary/1/small/07.jpg" alt="image07" /></a></li>
<li data-large-img="gallary/1/large/08.jpg"><a href="#"><img src="gallary/1/small/08.jpg" alt="image08" /></a></li>
-->
</ul>
</div>
<div id="preload_img" style="display:none">
<!--
<img src="gallary/1/large/01.jpg" alt="image01" />
<img src="gallary/1/large/02.jpg" alt="image02" />
<img src="gallary/1/large/03.jpg" alt="image03" />
<img src="gallary/1/large/04.jpg" alt="image04" />
<img src="gallary/1/large/05.jpg" alt="image05" />
<img src="gallary/1/large/06.jpg" alt="image06" />
<img src="gallary/1/large/07.jpg" alt="image07" />
<img src="gallary/1/large/08.jpg" alt="image08" />
-->
</div>
<div id="album_selector" class="decoration">
<div id="album_menu_top"></div>
<ul id="album_menu">
<li><a href="#"><img alt="" src="images/menu_btn_off.png" class="album-menu-button" /></a><span class="album-menu-title">Album 1</span></li>
<li><a href="#"><img alt="" src="images/menu_btn_off.png" class="album-menu-button" /></a><span class="album-menu-title">Album 2</span></li>
<li><a href="#"><img alt="" src="images/menu_btn_off.png" class="album-menu-button" /></a><span class="album-menu-title">Album 3</span></li>
<li><a href="#"><img alt="" src="images/menu_btn_off.png" class="album-menu-button" /></a><span class="album-menu-title">Album 4</span></li>
<li><a href="#"><img alt="" src="images/menu_btn_off.png" class="album-menu-button" /></a><span class="album-menu-title">Album 5</span></li>
<li><a href="#"><img alt="" src="images/menu_btn_off.png" class="album-menu-button" /></a><span class="album-menu-title">Album 6</span></li>
</ul>
<div id="album_menu_bottom"></div>
</div>
<div id="container">
<div id="decoration_content">
</div>
</div>
<footer>
<div class="footer-copyright">Copyright © 2013 <a href="#">101 forest</a> event decoration all right reserved.</div>
</footer>
</body>
</html>