dennis/Website-Templates
1
0
Fork 0
mirror of https://github.com/dawidolko/Website-Templates.git synced 2026-02-04 01:30:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

Website templates

Browse Source
This commit is contained in:
Dawid Olko
2023-07-26 19:33:39 +02:00
commit 0d2d73a034
10339 changed files with 2002333 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
photo-art/about.html Normal file
View File

@@ -0,0 +1,70 @@
<!DOCTYPE HTML>
<html>
<head>
<title>PhotoArtWork2_reverse</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- stylesheets -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/colour.css" rel="stylesheet" type="text/css" />
<!-- modernizr enables HTML5 elements and feature detects -->
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
</head>
<body>
<div id="main">
<!-- begin header -->
<header>
<div id="logo"><h1>PHOTO<a href="#">ART</a>WORK 2_reverse</h1></div>
<nav>
<ul class="sf-menu" id="nav">
<li><a href="index.html">home</a></li>
<li class="selected"><a href="about.html">about me</a></li>
<li><a href="#">my portfolio</a>
<ul>
<li><a href="portfolio_one.html">portfolio_one</a></li>
<li><a href="portfolio_two.html">portfolio_two</a></li>
</ul>
</li>
<li><a href="blog.html">blog</a></li>
<li><a href="contact.php">contact</a></li>
</ul>
</nav>
</header>
<!-- end header -->
<!-- begin content -->
<div id="site_content">
<div id="left_content">
<h1>About This Template</h1>
<p>This simple, fixed width website template is released under a <a href="http://creativecommons.org/licenses/by/3.0">Creative Commons Attribution 3.0 Licence</a>. This means you are free to download and use it for personal and commercial projects. However, you <strong>must leave the 'design from css3templates.co.uk' link in the footer of the template</strong>. This template is written entirely in <strong>HTML5</strong> and <strong>CSS3</strong>.</p>
</div>
<div id="right_content">
<img style="float: left;" src="images/about.jpg" title="about me" alt="about me"/>
</div>
</div>
<!-- end content -->
<!-- begin footer -->
<footer>
<p>Copyright &copy; 2012 PhotoArtWork2_reverse. All Rights Reserved. <a href="http://www.css3templates.co.uk">Design from css3templates.co.uk</a>.</p>
<p><img src="images/twitter.png" alt="twitter" />&nbsp;<img src="images/facebook.png" alt="facebook" />&nbsp;<img src="images/rss.png" alt="rss" /></p>
</footer>
<!-- end footer -->
</div>
<!-- javascript at the bottom for fast page loading -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing-sooper.js"></script>
<script type="text/javascript" src="js/jquery.sooperfish.js"></script>
<!-- initialise sooperfish menu -->
<script type="text/javascript">
$(document).ready(function() {
$('ul.sf-menu').sooperfish();
});
</script>
</body>
</html>

81
photo-art/blog.html Normal file
View File

@@ -0,0 +1,81 @@
<!DOCTYPE HTML>
<html>
<head>
<title>PhotoArtWork2_reverse</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- stylesheets -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/colour.css" rel="stylesheet" type="text/css" />
<!-- modernizr enables HTML5 elements and feature detects -->
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
</head>
<body>
<div id="main">
<!-- begin header -->
<header>
<div id="logo"><h1>PHOTO<a href="#">ART</a>WORK 2_reverse</h1></div>
<nav>
<ul class="sf-menu" id="nav">
<li><a href="index.html">home</a></li>
<li><a href="about.html">about me</a></li>
<li><a href="#">my portfolio</a>
<ul>
<li><a href="portfolio_one.html">portfolio_one</a></li>
<li><a href="portfolio_two.html">portfolio_two</a></li>
</ul>
</li>
<li class="selected"><a href="blog.html">blog</a></li>
<li><a href="contact.php">contact</a></li>
</ul>
</nav>
</header>
<!-- end header -->
<!-- begin content -->
<div id="site_content">
<div id="left_content">
<div id="blog_container">
<div class="blog"><h2>May</h2><h3>20th</h3></div>
<h4 class="select"><a href="blog.html">Magazine Photo-Shoot</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="">read more.....</a></p>
<div class="blog"><h2>Apr</h2><h3>20th</h3></div>
<h4><a href="blog_2004.html">Wedding Shoot in Edinburgh</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="">read more.....</a></p>
</div>
</div>
<div id="right_content">
<div id="blog_text">
<h1>Magazine Photo-Shoot</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.</p>
</div>
</div>
</div>
<!-- end content -->
<!-- begin footer -->
<footer>
<p>Copyright &copy; 2012 PhotoArtWork2_reverse. All Rights Reserved. <a href="http://www.css3templates.co.uk">Design from css3templates.co.uk</a>.</p>
<p><img src="images/twitter.png" alt="twitter" />&nbsp;<img src="images/facebook.png" alt="facebook" />&nbsp;<img src="images/rss.png" alt="rss" /></p>
</footer>
<!-- end footer -->
</div>
<!-- javascript at the bottom for fast page loading -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing-sooper.js"></script>
<script type="text/javascript" src="js/jquery.sooperfish.js"></script>
<!-- initialise sooperfish menu -->
<script type="text/javascript">
$(document).ready(function() {
$('ul.sf-menu').sooperfish();
});
</script>
</body>
</html>

81
photo-art/blog_2004.html Normal file
View File

@@ -0,0 +1,81 @@
<!DOCTYPE HTML>
<html>
<head>
<title>PhotoArtWork2_reverse</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- stylesheets -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/colour.css" rel="stylesheet" type="text/css" />
<!-- modernizr enables HTML5 elements and feature detects -->
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
</head>
<body>
<div id="main">
<!-- begin header -->
<header>
<div id="logo"><h1>PHOTO<a href="#">ART</a>WORK 2_reverse</h1></div>
<nav>
<ul class="sf-menu" id="nav">
<li><a href="index.html">home</a></li>
<li><a href="about.html">about me</a></li>
<li><a href="#">my portfolio</a>
<ul>
<li><a href="portfolio_one.html">portfolio_one</a></li>
<li><a href="portfolio_two.html">portfolio_two</a></li>
</ul>
</li>
<li class="selected"><a href="blog.html">blog</a></li>
<li><a href="contact.php">contact</a></li>
</ul>
</nav>
</header>
<!-- end header -->
<!-- begin content -->
<div id="site_content">
<div id="left_content">
<div id="blog_container">
<div class="blog"><h2>May</h2><h3>20th</h3></div>
<h4><a href="blog.html">Magazine Photo-Shoot</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="">read more.....</a></p>
<div class="blog"><h2>Apr</h2><h3>20th</h3></div>
<h4 class="select"><a href="blog_2004.html">Wedding Shoot in Edinburgh</a></h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <a href="">read more.....</a></p>
</div>
</div>
<div id="right_content">
<div id="blog_text">
<h1>Wedding Shoot in Edinburgh</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui.</p>
</div>
</div>
</div>
<!-- end content -->
<!-- begin footer -->
<footer>
<p>Copyright &copy; 2012 PhotoArtWork2_reverse. All Rights Reserved. <a href="http://www.css3templates.co.uk">Design from css3templates.co.uk</a>.</p>
<p><img src="images/twitter.png" alt="twitter" />&nbsp;<img src="images/facebook.png" alt="facebook" />&nbsp;<img src="images/rss.png" alt="rss" /></p>
</footer>
<!-- end footer -->
</div>
<!-- javascript at the bottom for fast page loading -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing-sooper.js"></script>
<script type="text/javascript" src="js/jquery.sooperfish.js"></script>
<!-- initialise sooperfish menu -->
<script type="text/javascript">
$(document).ready(function() {
$('ul.sf-menu').sooperfish();
});
</script>
</body>
</html>

126
photo-art/contact.php Normal file
View File

@@ -0,0 +1,126 @@
<!DOCTYPE HTML>
<html>
<head>
<title>PhotoArtWork2_reverse</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- stylesheets -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/colour.css" rel="stylesheet" type="text/css" />
<!-- modernizr enables HTML5 elements and feature detects -->
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
</head>
<body>
<div id="main">
<!-- begin header -->
<header>
<div id="logo"><h1>PHOTO<a href="#">ART</a>WORK 2_reverse</h1></div>
<nav>
<ul class="sf-menu" id="nav">
<li><a href="index.html">home</a></li>
<li><a href="about.html">about me</a></li>
<li><a href="#">my portfolio</a>
<ul>
<li><a href="portfolio_one.html">portfolio_one</a></li>
<li><a href="portfolio_two.html">portfolio_two</a></li>
</ul>
</li>
<li><a href="blog.html">blog</a></li>
<li class="selected"><a href="contact.html">contact</a></li>
</ul>
</nav>
</header>
<!-- end header -->
<!-- begin content -->
<div id="site_content">
<div id="left_content">
<h1>Contact</h1>
<p>Say hello, using this contact form.</p>
<?php
// This PHP Contact Form is offered &quot;as is&quot; without warranty of any kind, either expressed or implied.
// David Carter at www.css3templates.co.uk shall not be liable for any loss or damage arising from, or in any way
// connected with, your use of, or inability to use, the website templates (even where David Carter has been advised
// of the possibility of such loss or damage). This includes, without limitation, any damage for loss of profits,
// loss of information, or any other monetary loss.
// Set-up these 3 parameters
// 1. Enter the email address you would like the enquiry sent to
// 2. Enter the subject of the email you will receive, when someone contacts you
// 3. Enter the text that you would like the user to see once they submit the contact form
$to = 'enter email address here';
$subject = 'Enquiry from the website';
$contact_submitted = 'Your message has been sent.';
// Do not amend anything below here, unless you know PHP
function email_is_valid($email) {
return preg_match('/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i',$email);
}
if (!email_is_valid($to)) {
echo '<p style="color: red;">You must set-up a valid (to) email address before this contact page will work.</p>';
}
if (isset($_POST['contact_submitted'])) {
$return = "\r";
$youremail = trim(htmlspecialchars($_POST['your_email']));
$yourname = stripslashes(strip_tags($_POST['your_name']));
$yourmessage = stripslashes(strip_tags($_POST['your_message']));
$contact_name = "Name: ".$yourname;
$message_text = "Message: ".$yourmessage;
$user_answer = trim(htmlspecialchars($_POST['user_answer']));
$answer = trim(htmlspecialchars($_POST['answer']));
$message = $contact_name . $return . $message_text;
$headers = "From: ".$youremail;
if (email_is_valid($youremail) && !eregi("\r",$youremail) && !eregi("\n",$youremail) && $yourname != "" && $yourmessage != "" && substr(md5($user_answer),5,10) === $answer) {
mail($to,$subject,$message,$headers);
$yourname = '';
$youremail = '';
$yourmessage = '';
echo '<p style="color: blue;">'.$contact_submitted.'</p>';
}
else echo '<p style="color: red;">Please enter your name, a valid email address, your message and the answer to the simple maths question before sending your message.</p>';
}
$number_1 = rand(1, 9);
$number_2 = rand(1, 9);
$answer = substr(md5($number_1+$number_2),5,10);
?>
<form id="contact" action="contact.php" method="post">
<div class="form_settings">
<p><span>Name</span><input class="contact" type="text" name="your_name" value="<?php echo $yourname; ?>" /></p>
<p><span>Email Address</span><input class="contact" type="text" name="your_email" value="<?php echo $youremail; ?>" /></p>
<p><span>Message</span><textarea class="contact textarea" rows="5" cols="50" name="your_message"><?php echo $yourmessage; ?></textarea></p>
<p style="line-height: 1.7em;">To help prevent spam, please enter the answer to this question:</p>
<p><span><?php echo $number_1; ?> + <?php echo $number_2; ?> = ?</span><input type="text" name="user_answer" /><input type="hidden" name="answer" value="<?php echo $answer; ?>" /></p>
<p style="padding-top: 15px"><span>&nbsp;</span><input class="submit" type="submit" name="contact_submitted" value="send" /></p>
</div>
</form>
</div>
<div id="right_content">
<img src="images/contact.jpg" width="450" height="450" title="contact" alt="contact" />
</div>
</div>
<!-- end content -->
<!-- begin footer -->
<footer>
<p>Copyright &copy; 2012 PhotoArtWork2_reverse. All Rights Reserved. <a href="http://www.css3templates.co.uk">Design from css3templates.co.uk</a>.</p>
<p><img src="images/twitter.png" alt="twitter" />&nbsp;<img src="images/facebook.png" alt="facebook" />&nbsp;<img src="images/rss.png" alt="rss" /></p>
</footer>
<!-- end footer -->
</div>
<!-- javascript at the bottom for fast page loading -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing-sooper.js"></script>
<script type="text/javascript" src="js/jquery.sooperfish.js"></script>
<!-- initialise sooperfish menu -->
<script type="text/javascript">
$(document).ready(function() {
$('ul.sf-menu').sooperfish();
});
</script>
</body>
</html>

98
photo-art/css/colour.css Normal file
View File

@@ -0,0 +1,98 @@
/* dark theme */
body {
background: #282828 url(../images/dark.png);
color: #BBB;}
h2, h6 {
color: #07E5F9;}
a, a:hover {
color: #C5E105;}
#site_content {
background: #333;}
#left_content ul li {
background: url(../images/dark_bullet.png) no-repeat left center;}
nav, footer {
background: #444; /* Show a solid color for older browsers */
background: -moz-linear-gradient(#555, #333);
background: -o-linear-gradient(#555, #333);
background: -webkit-linear-gradient(#555, #333);
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 2px;
border: 1px solid #444;}
footer {
color: #AAA;
text-shadow: 1px 1px #000;}
footer a:hover {
color: #AAA;}
#slideshow-caption {
color: #FFF;
background: #151515;}
.form_settings .submit {
background: #444;
text-shadow: 1px 1px #000;
color: #FFF;}
.form_settings input, .form_settings textarea, .form_settings select {
border-color: #777;}
#blog_container h4.select {
background: url(../images/dark_blog.png) no-repeat right top;}
.blog h3 {
color: #111;}
#blog_text {
background: #444;
color: #EEE;}
ul#nav li a {
text-shadow: 1px 1px #000;
color: #FFF;}
ul#nav ul {
background: #222;}
ul#nav ul li a {
color: #FFF;}
ul#nav li.selected a, ul#nav li a:hover, ul#nav ul li a:hover, ul#nav ul li a:focus, ul#nav li.selected ul a:hover {
color: #C5E105;}
a.thumb, ul.thumbs li.selected a.thumb {
background: #FFF;}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
background: #444;
color: #AAA;}
div.pagination a:hover {
background: #EEE;
color: #111;}
div.pagination span.current {
background: #444;
color: #FFF;}
h1, h3, h4, h5, a:hover, #logo h1, #logo h1 a:hover,
footer a, #slideshow-caption p, .form_settings input, .form_settings textarea,
#blog_container h4, .blog h2, ul#nav li.selected ul a, div.image-title {
color: #FFF;}
div.navigation a.prev {
background: url(../images/prev_arrow_white.gif) no-repeat left;}
div.navigation a.next {
background: url(../images/next_arrow_white.gif) no-repeat right;}
span.sf-arrow {
background: url(../images/arrows-white.png) no-repeat 0 0;
}

129
photo-art/css/portfolio_one.css Normal file
View File

@@ -0,0 +1,129 @@
div.content {
/* the display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
display: none;
float: right;
width: 450px;}
div.content a:focus, div.content a:hover, div.content a:active {
text-decoration: underline;}
div.controls {
height: 23px;
padding: 30px 0;
width: 440px;
float: left;}
div.controls a {
padding: 5px 2px 5px 2px;}
div.ss-controls {
float: left;}
div.nav-controls {
float: right;}
div.slideshow-container {
position: relative;
clear: both;
height: 450px; /* this should be set to be at least the height of the largest image in the slideshow */
padding: 0;}
div.loader {
position: absolute;
top: 0;
left: 0;
background: url(loader_white.gif) no-repeat center;
width: 450px;
height: 450px; /* this should be set to be at least the height of the largest image in the slideshow */}
div.slideshow span.image-wrapper {
display: block;
position: absolute;
top: 0;
left: 0;}
div.slideshow a.advance-link {
display: block;
width: 450px;
height: 450px; /* this should be set to be at least the height of the largest image in the slideshow */
line-height: 0px; /* this should be set to be at least the height of the largest image in the slideshow */}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
text-decoration: none;}
div.slideshow img {
vertical-align: top;}
div.caption-container {
position: relative;
clear: left;
height: 75px;}
span.image-caption {
display: block;
position: absolute;
width: 550px;
top: 0;
left: 0;}
div.caption {
padding: 10px 0;
width: 410px;}
div.image-title {
font: normal 130% arial, sans-serif;}
div.navigation {
/* the navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */}
#thumb-container {
padding: 20px 0 0 25px;}
ul.thumbs {
clear: both;
margin: 0;
padding: 0;}
ul.thumbs li {
float: left;
padding: 0;
margin: 5px 10px 5px 0;
list-style: none;}
a.thumb {
padding: 2px;
display: block;}
a.thumb:focus {
outline: none;}
ul.thumbs img {
border: none;
display: block;}
div.pagination {
float: left;
clear: both;}
div.navigation div.top {
margin-bottom: 12px;
height: 11px;}
div.navigation div.bottom {
margin-top: 12px;}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
display: block;
float: left;
margin-right: 2px;
padding: 4px 10px 4px 10px;}
div.pagination a:hover {
text-decoration: none;}
div.pagination span.current {
font-weight: bold;}
div.pagination span.ellipsis {
border: none;
padding: 5px 0 3px 2px;}

136
photo-art/css/portfolio_two.css Normal file
View File

@@ -0,0 +1,136 @@
div.content {
display: none;
clear: both;}
div.content a, div.navigation a {
text-decoration: none;}
div.controls {
position: absolute;
bottom: 0;
height: 65px;
padding: 25px 0 0 0;
background: url(../images/image_transparent.png);
width: 100%;}
div.controls a {
padding: 5px 20px 0 0;
float: left;}
div.ss-controls {
float: right;
height: 30px;}
div.nav-controls {
float: right;
clear: right;}
div.slideshow-container, div.loader, div.slideshow a.advance-link {
width: 950px; /* This should be set to be at least the width of the largest image in the slideshow with padding */
line-height: 0;}
div.loader, div.slideshow a.advance-link, div.caption-container {
height: 450px; /* This should be set to be at least the height of the largest image in the slideshow with padding */ }
div.slideshow-container {
position: relative;
clear: both;
float: left;
height: 453px;}
div.slideshow-container img {
float: left;}
div.loader {
position: absolute;
top: 0;
left: 0;
background: url(loader.gif) no-repeat center;}
div.slideshow span.image-wrapper {
position: absolute;
top: 3px;
left: 0;}
div.slideshow a.advance-link {
display: block;
line-height: 0; /* This should be set to be at least the height of the largest image in the slideshow with padding */
text-align: center;}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
text-decoration: none;}
div.slideshow a.advance-link:focus {
outline: none;}
div.caption-container {
float: left;}
span.image-caption {
display: block;
position: absolute;
bottom: 35px;
left: 20px;}
div.caption {
padding: 10px 0;
width: 500px;}
div.image-title {
font: normal 130% arial, sans-serif;}
div.navigation-container {
float: left;
position: relative;
left: 50%;}
div.navigation {
float: left;
position: relative;
left: -50%;}
div.navigation a.pageLink {
height: 77px;
line-height: 77px;
display: block;
position: relative;
float: left;
margin: 2px;
width: 16px;
background-position: center center;
background-repeat: no-repeat;}
div.navigation a.pageLink:focus {
outline: none;}
div.navigation a.prev {
margin-right: 10px;}
div.navigation a.next {
margin-left: 10px;}
ul.thumbs {
position: relative;
float: left;
margin: 2px 0 0 0;
padding: 0;}
ul.thumbs li {
float: left;
padding: 0;
margin: 2px;
list-style: none;}
a.thumb {
display: block;
padding: 2px;}
a.thumb:focus {
outline: none;}
ul.thumbs img {
display: block;}
div.gallery-gutter {
clear: both;
padding-bottom: 20px;}

384
photo-art/css/style.css Normal file
View File

@@ -0,0 +1,384 @@
@font-face {
font-family: Jenna Sue;
src: url('../fonts/JennaSue-webfont.eot');
src: local("Jenna Sue"), url('../fonts/JennaSue-webfont.ttf');
}
@font-face {
font-family: News Cycle;
src: url('../fonts/NewsCycle-Regular.eot');
src: local("News Cycle"), url('../fonts/NewsCycle-Regular.ttf');
}
html {
height: 100%;}
* {
margin: 0;
padding: 0;}
/* tell the browser to render HTML 5 elements as block */
article, aside, figure, footer, header, hgroup, nav, section {
display:block;}
body {
font: normal .80em arial, sans-serif;}
p {
padding: 0 0 25px 0;
line-height: 1.7em;}
img {
border: 0;}
h1, h2, h3, h4, h5, h6 {
font: normal 350% 'Jenna Sue', arial, sans-serif;
margin: 0 0 5px 0;
padding: 0;}
h2 {
font: normal 170% 'Jenna Sue', arial, sans-serif;
margin: 0;
padding: 0 0 8px 0;}
h3 {
font: normal 150% arial, sans-serif;}
h4, h5, h6 {
margin: 0;
padding: 0 0 5px 0;
font: normal 110% arial, sans-serif;
line-height: 1.5em;}
h5, h6 {
font: italic 95% arial, sans-serif;
padding-bottom: 15px;}
a, a:hover {
outline: none;
text-decoration: none;}
a:hover {
text-decoration: none;}
ul {
margin: 2px 0 22px 17px;}
ul li {
list-style-type: circle;
margin: 0 0 0 0;
padding: 0 0 4px 5px;}
ol {
margin: 8px 0 22px 20px;}
ol li {
margin: 0 0 11px 0;}
#main, #header, #logo, #menubar, #site_content, #footer {
margin-left: auto;
margin-right: auto;}
#main {
width: 950px;
margin: 20px auto;}
header {
width: 950px;
height: 105px;}
#logo {
width: 950px;
float: left;
height: 100px;
background: transparent;
padding: 0;}
#logo h1 {
font: normal 450% 'Jenna Sue', arial, sans-serif;
padding: 6px 0 0 20px;}
#logo h1 a:hover {
text-decoration: none;}
#site_content {
width: 950px;
overflow: hidden;
margin: 4px auto 0 auto;
padding: 0;}
#left_content {
float: left;
text-align: justify;
width: 444px;
padding: 20px 0 5px 25px;
margin: 0;}
#left_content ul {
margin: 2px 0 22px 0px;}
#left_content ul li {
list-style-type: none;
margin: 0 0 0 0;
padding: 2px 0 2px 28px;
line-height: 1.5em;}
#right_content {
float: right;
width: 450px;
padding: 0;
min-height: 450px;}
#right_content img {
float: left;}
footer {
height: 54px;
width: 930px;
float: right;
margin: 20px auto 20px auto;
padding: 0px 20px 0 0;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;
font: 160% 'News Cycle', arial, sans-serif;
text-align: right;}
footer p {
padding: 0 0 10px 0;}
footer a, footer a:hover {
text-decoration: none;}
/* styling for the slideshow on the homepage */
ul.slideshow {
width: 950px;
height: 450px;
overflow: hidden;
position: relative;
margin: 0;
padding: 0;}
ul.slideshow li {
position: absolute;
margin: 0;
padding: 0;
left: 0;
right: 0;
list-style: none;}
ul.slideshow li.show {
z-index: 500;}
ul img {
border: none;}
#slideshow-caption {
width: 950px;
height: 90px;
position: absolute;
bottom: 0;
left: 0;
z-index: 500;}
#slideshow-caption .slideshow-caption-container {
padding: 20px 25px 0 25px;
z-index: 1000;}
#slideshow-caption p {
padding: 0;
font: normal 130% arial, sans-serif;}
/* form styling */
.form_settings {
margin: 0;}
.form_settings p {
padding: 0 0 10px 0;}
.form_settings span {
padding: 5px 0;
float: left;
width: 170px;
text-align: left;}
.form_settings input, .form_settings textarea {
padding: 4px;
width: 252px;
font: 100% 'trebuchet ms', arial, sans-serif;
border: 0;
border-bottom: 1px solid;
background: transparent;}
.form_settings .submit {
font: 220% 'Jenna Sue', arial, sans-serif;
border: 0;
width: 100px;
margin: 0 0 0 162px;
height: 33px;
padding: 2px 0 3px 0;
cursor: pointer;
border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;}
.form_settings textarea, .form_settings select {
font: 100% 'trebuchet ms', arial, sans-serif;
border: 1px solid;
border-radius: 6px 6px 6px 6px;
-webkit-border-radius: 6px 6px 6px 6px;
-moz-border-radius: 6px 6px 6px 6px;
width: 250px;
overflow: auto;}
.form_settings select {
width: 304px;}
.form_settings .checkbox {
margin: 4px 0;
padding: 0;
width: 14px;
border: 0;
background: none;}
/* styling for the blog page */
#blog_container h4 {
font: normal 300% 'Jenna Sue', arial, sans-serif;
margin: 0 0 15px 0;
padding: 5px 0;}
#blog_container h4.select {
width: 475px;}
.blog {
background: url(../images/calendar.png) no-repeat;
width: 54px;
height: 46px;
float: left;
margin: 0 15px 0 0;}
.blog h2 {
font: bold 90% arial, sans-serif;
text-shadow: none;
text-align: center;
margin: 0;
padding: 4px 0 0 0;}
.blog h3 {
font: 140% arial, sans-serif;
text-shadow: none;
margin: 0;
text-align: center;
padding: -10px 0 0 0;}
#blog_text {
padding: 20px;
overflow: auto;
height: 100%;}
#blog_text h1 {
font: normal 300% 'Jenna Sue', arial, sans-serif;;
margin: 0 0 15px 0;
padding: 5px 0;}
/* stylesheet for sooperFish by www.sooperthemes.com -- author: jurriaan roelofs */
html body ul.sf-menu ul,html body ul.sf-menu ul li {
width: 180px;}
html body ul.sf-menu ul ul {
margin: 0 0 0 180px;}
ul.sf-menu,ul.sf-menu * {
margin: 0;
padding: 0;}
ul.sf-menu {
display: block;
position: relative;}
ul.sf-menu li {
display: block;
list-style: none;
float: left;
position: relative;}
ul.sf-menu li:hover {
visibility: inherit; /* fixes IE7 'sticky bug' */ }
ul.sf-menu a {
display: block;
position: relative;}
ul.sf-menu ul {
position: absolute;
left: 0;
width: 150px;
top: auto;
left: -999999px;}
ul.sf-menu ul a {
zoom: 1; /* IE6/7 fix */ }
ul.sf-menu ul li {
float: left; /* Must always be floated otherwise there will be a rogue 1px margin-bottom in IE6/7 */
width: 150px;}
ul.sf-menu ul ul {
top: 0;
margin: 0 0 0 150px;}
ul.sf-menu li:hover ul,ul.sf-menu li:focus ul,ul.sf-menu li.sf-hover ul,
ul.sf-menu ul li:hover ul,ul.sf-menu ul li:focus ul,ul.sf-menu ul li.sf-hover ul,
ul.sf-menu ul ul li:hover ul,ul.sf-menu ul ul li:focus ul,ul.sf-menu ul ul li.sf-hover ul,
ul.sf-menu ul ul ul li:hover ul,ul.sf-menu ul ul ul li:focus ul,ul.sf-menu ul ul ul li.sf-hover ul {
left: auto;}
ul.sf-menu li:hover ul ul,ul.sf-menu li:focus ul ul,ul.sf-menu li.sf-hover ul ul,
ul.sf-menu ul li:hover ul ul,ul.sf-menu ul li:focus ul ul,ul.sf-menu ul li.sf-hover ul ul,
ul.sf-menu ul ul li:hover ul ul,ul.sf-menu ul ul li:focus ul ul,ul.sf-menu ul ul li.sf-hover ul ul,
ul.sf-menu ul ul ul li:hover ul ul,ul.sf-menu ul ul ul li:focus ul ul,ul.sf-menu ul ul ul li.sf-hover ul ul {
left: -999999px;}
/* autoArrows CSS */
span.sf-arrow {
width: 7px;
height: 7px;
position: absolute;
top: 20px;
right: 5px;
display: block;
overflow: hidden; /* making sure IE6 doesn't overflow and expand the box */
font-size: 1px;
}
ul ul span.sf-arrow {
right: 5px;
top: 20px;
background-position: 0 100%;
}
/* theming the menu */
nav {
height: 44px;
width: 950px;
float: right;
margin: -20px auto 20px auto;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border: 7px 7px 7px 7px;}
/* Theming the menu */
ul#nav {
float: left;
}
ul#nav ul {
padding-bottom: 15px;
}
ul#nav li a {
padding: 3px 25px 6px 25px;
font: 170% 'News Cycle', arial, sans-serif;
text-decoration: none;
margin-right: 2px;
}

221
photo-art/documentation/index.html Normal file
View File

@@ -0,0 +1,221 @@
<!DOCTYPE HTML>
<html>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>PhotoArtWork2_reverse Template</title>
<style type="text/css" media="screen">
p, table, hr, .box { font-family: arial; margin-bottom:25px; }
.box p { margin-bottom:10px; }
</style>
</head>
<body>
<div>
<h1>&ldquo;PhotoArtWork2_reverse&rdquo; Template Documentation</h1>
<p><strong>Template version: 2.0<br />Created: May 20th, 2012</strong></p>
<div>
<p>Thank you for downloading this template.</p>
<p>This template is released under a <a href="http://creativecommons.org/licenses/by/3.0">Creative Commons Attribution 3.0 Licence</a>. This means you are free to download and use it for personal and commercial projects. However, you <strong>must leave the 'design from css3templates.co.uk' link in the footer of the template</strong>.</p>
<p>If you have any questions that are beyond the scope of this help file, please feel free to contact me via my <a href="http://www.css3templates.co.uk">website</a>. Thank you!</p>
</div>
<hr>
<h2 id="toc">Table of Contents</h2>
<ol>
<li><a href="#htmlStructure">HTML Structure</a></li>
<li><a href="#cssFiles">CSS Files and Structure</a></li>
<li><a href="#fontFiles">Fonts</a></li>
<li><a href="#javascript">JavaScript</a></li>
<li><a href="#psdFiles">PSD Files</a></li>
<li><a href="#credits">Sources and Credits</a></li>
<li><a href="#galleries">Gallery Pages</a></li>
</ol>
<hr>
<h3 id="htmlStructure"><strong>A) HTML Structure</strong> - <a href="#toc">top</a></h3>
<p>This theme is a fixed layout with two columns (apart from the image gallery pages, which have a different html structure - you can see additional information for the gallery pages <a href="#galleries">here</a>). The left content is contained within a div with an id of "left_content" and the right content is contained within a div with an id of "right_content". Here is the general two column structure.</p>
<pre>
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;!-- Header Metatags --&gt;
&lt;!-- Main Stylesheet / Light Theme --&gt;
&lt;!-- Modernizr JS Enables HTML5 Elements --&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;main&quot;&gt;
&lt;!-- begin header --&gt;
&lt;header&gt;
&lt;div id=&quot;logo&quot;&gt;&lt;h1&gt;&lt;/h1&gt;&lt;/div&gt;
&lt;nav&gt;
&lt;!-- menu --&gt;
&lt;/nav&gt;
&lt;/header&gt;
&lt;!-- end header --&gt;
&lt;!-- begin content --&gt;
&lt;div id=&quot;site_content&quot;&gt;
&lt;div class=&quot;left_content&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;right_content&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;!-- end content --&gt;
&lt;!-- begin footer --&gt;
&lt;footer&gt;&lt;/footer&gt;
&lt;!-- end footer --&gt;
&lt;/div&gt;
&lt;!-- jQuery with plugins --&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
$(document).ready(function(){
&lt;!-- initialise sooperfish menu --&gt;
$('ul.sf-menu').sooperfish();
});
&lt;/script&gt;
&lt;/html&gt;
&lt;/body&gt;
</pre>
<hr>
<h3 id="cssFiles"><strong>B) CSS Files and Structure</strong> - <a href="#toc">top</a></h3>
<p>There are several stylesheets used in this theme, depending on the page being viewed. The stylesheets are:</p>
<ol>
<li><b>css/style.css</b></li>
<li><b>css/portfolio_one.css OR css/portfolio_two.css</b></li>
<li><b>css/colour.css</b></li>
</ol>
<ol>
<li><b>style.css</b> is the main stylesheet and is included in all pages. It contains all the structural stylings for the template.</li>
<li><b>portfolio_one.css</b> contains all the styling for the gallerific portfolio shown on the portfolio_one.html page.</li>
<li><b>portfolio_two.css</b> contains all the styling for the gallerific portfolio shown on the portfolio_two.html page.</li>
<li><b>colour.css</b> is the colour stylesheet</li>
</ol>
<hr>
<h3 id="fontFiles"><strong>C) Fonts</strong> - <a href="#toc">top</a></h3>
<p>There are 2 fonts used in this theme. The fonts are Jenna Sue and News Cycle. The font files are</p>
<ol>
<li><b>fonts/JennaSue-webfont.ttf</b></li>
<li><b>fonts/JennaSue-webfont.eot</b> (IE Specific)</li>
<li><b>fonts/NewsCycle-Regular.ttf</b></li>
<li><b>fonts/NewsCycle-Regular.eot</b> (IE Specific)</li>
</ol>
<hr>
<h3 id="javascript"><strong>D) JavaScript</strong> - <a href="#toc">top</a></h3>
<p>This theme imports several Javascript files, depending on the page.</p>
<ol>
<li>js/modernizr-1.5.min.js</li>
<li>js/jquery.min.js</li>
<li>js/jquery.easing-sooper.js</li>
<li>js/jquery.sooperfish.js</li>
<li>js/image_fade.js</li>
<li>js/jquery.galleriffic.js</li>
<li>js/jquery.opacityrollover.js</li>
</ol>
<ol>
<li><b>modernizr</b> is a Javascript library that enables HTML5 elements and feature detects.</li>
<li><b>jQuery</b> is a Javascript library containing lots of commonly used Javascript functions.</li>
<li><b>Easing sooper</b> is a jQuery plugin for easing transitions, optimised for the Sooperfish drop-down menu.</li>
<li><b>Sooperfish</b> is a jQuery plugin for the drop-down menu.</li>
<li><b>Image fade</b> contains the functions for the gallery image fader on the home page (<b>index.html</b>).</li>
<li><b>Galleriffic</b> is a jQuery plugin for rendering the photo galleries on the portfolio pages (<b>portfolio_one.html</b> and <b>portfolio_two.html</b>).</li>
<li><b>Opacity rollover</b> is a jQuery plugin used by the the Galleriffic plugin.</li>
</ol>
<hr>
<h3 id="psdFiles"><strong>E) PSD Files</strong> - <a href="#toc">top</a></h3>
<p>There are no PSD files with this theme, as the theme was hand-coded from scratch!</p>
<hr>
<h3 id="credits"><strong>F) Sources and Credits</strong> - <a href="#toc">top</a></h3>
<p>I've used the following images, icons or other files as listed.
<ul>
<li><a href="http://www.modernizr.com">modernizr</a> (MIT and BSD licenses)</li>
<li><a href="http://www.jquery.com">jQuery</a> (MIT and GPL licenses)</li>
<li>jQuery easing sooper (BSD license)</li>
<li><a href="http://archive.plugins.jquery.com/project/SooperFish">Sooperfish</a> (GPL license)</li>
<li><a href="http://www.twospy.com/galleriffic/">Galleriffic</a> (MIT license)</li>
<li>Photos taken by me</li>
<li>jQuery Opacity Rollover (MIT license)</li>
<li><a href="http://www.patterncooler.com">Background pattern from PatternCooler</a></li>
</ul>
<hr>
<h3 id="galleries"><strong>G) Gallery Pages</strong> - <a href="#toc">top</a></h3>
<p>There are <b>three</b> different styles of gallery pages with this template:</p>
<ol>
<li>
<b>Image Fader with Caption (index.html)</b>
<p>The first style, shown on the home page, is simply an image fader with transparent caption. The format for this image fader is shown below:</p>
<pre>
&lt;li&gt;&lt;img width="950" height="450" src="images/image_name.jpg" alt="&apos;You can put a description of the image here if you like, or anything else if you want.&apos;" /&gt;&lt;/li&gt;
</pre>
<p>To add an image to the image fader simply add a new list item (li) to the unordered list (ul) with class="slideshow". You need to specify the width of the image, the height of the image and the src. If you would like a caption to slide in, simply add alt="caption". If you would like the image to hyperlink to one of your portfolio pages, simply add an &lt;a&gt;&lt;/a&gt; around the &lt;img&gt; tag .</p>
<p>NOTE: Remember to put 'class="show"' on the first &lt;li&gt; in the list, so that the image fader knows which one to start with.</p>
</li>
<li>
<b>Galleriffic Two Column Gallery (portfolio_one.html)</b>
<p>The second style, shown on the portfolio_one page, uses the <a href="http://www.twospy.com/galleriffic/">Galleriffic</a> jQuery plugin for 'rendering rich, fast-performing photo galleries'. It is quite simple to set-up your Galleriffic gallery: To add an image to the gallery simply resize your main image (450px x 450px) and create a thumbnail for this image (75px x 75px). Then add the following list item (li) into the unordered list (ul) with class="thumbs noscript":</p>
<pre>
&lt;li&gt;
&lt;a class="thumb" href="images/portfolio_one/main_image.jpg"&gt;&lt;img src="images/portfolio_one/main_image_thumbnail.jpg" alt="one" /&gt;&lt;/a&gt;
&lt;div class="caption"&gt;
&lt;div class="image-title portfolio_one"&gt;&quot;Image caption goes here&quot;&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
</pre>
<p>where href equals your main image (450px x 450px) and img src equals your thumbnail image. Within the img tag, you should put an 'alt' for your image. If you want a caption for your image, simply include the 'div class="caption"' section and add your image caption within the "Image caption goes here" part.</p>
<p>NOTE: There are lots of settings for the Galleriffic Photo Viewer. These settings are passed in when the galleriffic gallery is initialised (within the portfolio_one.html). The settings are optimised for the portfolio_one gallery, but can be changed if required. A description for these settings can be seen <a href="http://www.twospy.com/galleriffic/">here</a>.</p>
</li>
<li>
<b>Galleriffic One Column Gallery (portfolio_two.html)</b>
<p>The third style, shown on the portfolio_two page, uses the <a href="http://www.twospy.com/galleriffic/">Galleriffic</a> jQuery plugin for 'rendering rich, fast-performing photo galleries'. It is quite simple to set-up your Galleriffic gallery: To add an image to the gallery simply resize your main image (950px x 450px) and create a thumbnail for this image (75px x 75px). Then add the following list item (li) into the unordered list (ul) with class="thumbs noscript":</p>
<pre>
&lt;li&gt;
&lt;a class="thumb" href="images/portfolio_one/main_image.jpg"&gt;&lt;img src="images/portfolio_one/main_image_thumbnail.jpg" alt="one" /&gt;&lt;/a&gt;
&lt;div class="caption"&gt;
&lt;div class="image-title portfolio_two"&gt;&quot;Image caption goes here&quot;&lt;/div&gt;
&lt;/div&gt;
&lt;/li&gt;
</pre>
<p>where href equals your main image (950px x 450px) and img src equals your thumbnail image. Within the img tag, you should put an 'alt' for your image. If you want a caption for your image, simply include the 'div class="caption"' section and add your image caption within the "Image caption goes here" part.</p>
<p>NOTE: There are lots of settings for the Galleriffic Photo Viewer. These settings are passed in when the galleriffic gallery is initialised (within the portfolio_two.html). The settings are optimised for the portfolio_two gallery, but can be changed if required. A description for these settings can be seen <a href="http://www.twospy.com/galleriffic/">here</a>.</p>
</li>
</ol>
<hr>
<p>Once again, thank you for downloading this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist.</p>
<p><a href="#toc">Go To Table of Contents</a></p>
<hr>
</div>
</body>
</html>

9
photo-art/fonts/jenna sue design font license.txt Normal file
View File

@@ -0,0 +1,9 @@
Free for personal or commercial use. That's right, FREE. 100% Free, for any project. No need to ask permission... just use it! Enjoy :)
xoxo
Jenna Sue
www.jennasuedesign.etsy.com
www.jennasuedesign.blogspot.com
jennasuedesignco@gmail.com

BIN
photo-art/fonts/jennasue-webfont.eot Normal file
View File

Binary file not shown.

BIN
photo-art/fonts/jennasue-webfont.ttf Normal file
View File

Binary file not shown.

94
photo-art/fonts/news cycle sil ofl font license 1.1.txt Normal file
View File

@@ -0,0 +1,94 @@
Copyright (c) 2010-2011, Nathan Willis (nwillis@glyphography.com),
with Reserved Font Name "News Cycle."
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
http://scripts.sil.org/OFL
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

BIN
photo-art/fonts/newscycle-regular.eot Normal file
View File

Binary file not shown.

BIN
photo-art/fonts/newscycle-regular.ttf Normal file
View File

Binary file not shown.

BIN
photo-art/images/about.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
photo-art/images/arrows-white.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 938 B

BIN
photo-art/images/calendar.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
photo-art/images/contact.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
photo-art/images/dark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
photo-art/images/dark_blog.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1003 B

BIN
photo-art/images/dark_bullet.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 260 B

BIN
photo-art/images/facebook.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 753 B

BIN
photo-art/images/home_1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 31 KiB

BIN
photo-art/images/home_2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
photo-art/images/home_3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

BIN
photo-art/images/image_transparent.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 199 B

BIN
photo-art/images/loader.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
photo-art/images/next_arrow.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 B

BIN
photo-art/images/portfolio_one/1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
photo-art/images/portfolio_one/10.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

BIN
photo-art/images/portfolio_one/10_thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
photo-art/images/portfolio_one/1_thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
photo-art/images/portfolio_one/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
photo-art/images/portfolio_one/2_thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
photo-art/images/portfolio_one/3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
photo-art/images/portfolio_one/3_thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
photo-art/images/portfolio_one/4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
photo-art/images/portfolio_one/4_thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
photo-art/images/portfolio_one/5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
photo-art/images/portfolio_one/5_thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
photo-art/images/portfolio_one/6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
photo-art/images/portfolio_one/6_thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
photo-art/images/portfolio_one/7.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.4 KiB

BIN
photo-art/images/portfolio_one/7_thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
photo-art/images/portfolio_one/8.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

BIN
photo-art/images/portfolio_one/8_thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
photo-art/images/portfolio_one/9.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
photo-art/images/portfolio_one/9_thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
photo-art/images/portfolio_two/1.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

BIN
photo-art/images/portfolio_two/10.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
photo-art/images/portfolio_two/10_thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 985 B

BIN
photo-art/images/portfolio_two/1_thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
photo-art/images/portfolio_two/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
photo-art/images/portfolio_two/2_thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
photo-art/images/portfolio_two/3.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

BIN
photo-art/images/portfolio_two/3_thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
photo-art/images/portfolio_two/4.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
photo-art/images/portfolio_two/4_thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
photo-art/images/portfolio_two/5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

BIN
photo-art/images/portfolio_two/5_thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
photo-art/images/portfolio_two/6.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 27 KiB

BIN
photo-art/images/portfolio_two/6_thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
photo-art/images/portfolio_two/7.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
photo-art/images/portfolio_two/7_thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
photo-art/images/portfolio_two/8.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
photo-art/images/portfolio_two/8_thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
photo-art/images/portfolio_two/9.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
photo-art/images/portfolio_two/9_thumb.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
photo-art/images/prev_arrow.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 78 B

BIN
photo-art/images/rss.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
photo-art/images/twitter.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 865 B

69
photo-art/index.html Normal file
View File

@@ -0,0 +1,69 @@
<!DOCTYPE HTML>
<html>
<head>
<title>PhotoArtWork2_reverse</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- stylesheets -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/colour.css" rel="stylesheet" type="text/css" />
<!-- modernizr enables HTML5 elements and feature detects -->
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
</head>
<body>
<div id="main">
<!-- begin header -->
<header>
<div id="logo"><h1>PHOTO<a href="#">ART</a>WORK 2_reverse</h1></div>
<nav>
<ul class="sf-menu" id="nav">
<li class="selected"><a href="index.html">home</a></li>
<li><a href="about.html">about me</a></li>
<li><a href="#">my portfolio</a>
<ul>
<li><a href="portfolio_one.html">portfolio_one</a></li>
<li><a href="portfolio_two.html">portfolio_two</a></li>
</ul>
</li>
<li><a href="blog.html">blog</a></li>
<li><a href="contact.php">contact</a></li>
</ul>
</nav>
</header>
<!-- end header -->
<!-- begin content -->
<div id="site_content">
<ul class="slideshow">
<li class="show"><img width="950" height="450" src="images/home_1.jpg" alt="&quot;You can put a caption for your image right here&quot;" /></li>
<li><img width="950" height="450" src="images/home_2.jpg" alt="&quot;You can put a description of the image here if you like, or anything else if you want.&quot;" /></li>
<li><img width="950" height="450" src="images/home_3.jpg" alt="&quot;You can put a description of the image here if you like, or anything else if you want.&quot;" /></li>
</ul>
</div>
<!-- end content -->
<!-- begin footer -->
<footer>
<p>Copyright &copy; 2012 PhotoArtWork2_reverse. All Rights Reserved. <a href="http://www.css3templates.co.uk">Design from css3templates.co.uk</a>.</p>
<p><img src="images/twitter.png" alt="twitter" />&nbsp;<img src="images/facebook.png" alt="facebook" />&nbsp;<img src="images/rss.png" alt="rss" /></p>
</footer>
<!-- end footer -->
</div>
<!-- javascript at the bottom for fast page loading -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing-sooper.js"></script>
<script type="text/javascript" src="js/jquery.sooperfish.js"></script>
<script type="text/javascript" src="js/image_fade.js"></script>
<!-- initialise sooperfish menu -->
<script type="text/javascript">
$(document).ready(function() {
$('ul.sf-menu').sooperfish();
});
</script>
</body>
</html>

66
photo-art/js/image_fade.js Normal file
View File

@@ -0,0 +1,66 @@
$(document).ready(function() {
// execute the slideShow, set 4 seconds (4000) for each image
slideShow(4000);
});
function slideShow(speed) {
// append an 'li' item to the 'ul' list for displaying the caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><p></p></div></li>');
// set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});
// get the first image and display it
$('ul.slideshow li:first').css({opacity: 1.0}).addClass('show');
// get the caption of the first image from the 'rel' attribute and display it
$('#slideshow-caption p').html($('ul.slideshow li.show').find('img').attr('alt'));
// display the caption
$('#slideshow-caption').css({opacity: 0.6, bottom:0});
// call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);
// pause the slideshow on mouse over
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);
}
function gallery() {
//if no images have the show class, grab the first image
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));
// trying to avoid speed issue
if(current.queue('fx').length == 0) {
// get the next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
// get the next image caption
var desc = next.find('img').attr('alt');
// set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
// hide the caption first, and then set and display the caption
$('#slideshow-caption').slideToggle(300, function () {
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').slideToggle(500);
});
// hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');
}
}

134
photo-art/js/jquery.easing-sooper.js Normal file
View File

@@ -0,0 +1,134 @@
/*
* Extended and modified for use with SooperThemes.com Drupal Themes and SooperFish plugin by Jurriaan Roelofs for sooperthemes.com. Copyright still same as below.
*
*/
/*
* Based on easing equations by Robert Penner. Adapted from jqueryt easing plugin by George McGinley Smith. See below for copyright notice of equations
*
*/
/*
*
* TERMS OF USE - EASING EQUATIONS
*
* Open source under the BSD License.
*
* Copyright © 2001 Robert Penner
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without modification,
* are permitted provided that the following conditions are met:
*
* Redistributions of source code must retain the above copyright notice, this list of
* conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list
* of conditions and the following disclaimer in the documentation and/or other materials
* provided with the distribution.
*
* Neither the name of the author nor the names of contributors may be used to endorse
* or promote products derived from this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
* OF THE POSSIBILITY OF SUCH DAMAGE.
*
*/
// t: current time, b: begInnIng value, c: change In value, d: duration
jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend( jQuery.easing,
{
def: 'easeOutTurbo',
swing: function (x, t, b, c, d) {
//alert(jQuery.easing.default);
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
},
easeInTurbo: function (x, t, b, c, d) {
return c*(t/=d)*t + b;
},
easeOutTurbo: function (x, t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
},
easeInTurbo2: function (x, t, b, c, d) {
return c*(t/=d)*t*t + b;
},
easeOutTurbo2: function (x, t, b, c, d) {
return c*((t=t/d-1)*t*t + 1) + b;
},
easeInTurbo3: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t + b;
},
easeOutTurbo3: function (x, t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
easeInSine: function (x, t, b, c, d) {
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
},
easeOutSine: function (x, t, b, c, d) {
return c * Math.sin(t/d * (Math.PI/2)) + b;
},
easeInExpo: function (x, t, b, c, d) {
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
},
easeOutExpo: function (x, t, b, c, d) {
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
},
easeInCirc: function (x, t, b, c, d) {
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
},
easeOutCirc: function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
},
easeInElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
easeOutElastic: function (x, t, b, c, d) {
var s=1.70158;var p=0;var a=c;
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
easeInOvershoot: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*((s+1)*t - s) + b;
},
easeOutOvershoot: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
easeInOvershootTurbo: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*(t/=d)*t*t*((s+1)*t - s) + b;
},
easeOutOvershootTurbo: function (x, t, b, c, d, s) {
if (s == undefined) s = 1.70158;
return c*((t=t/d-1)*t*t*((s+1)*t + s) + 1) + b;
},
easeInBounce: function (x, t, b, c, d) {
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce: function (x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
}
});

979
photo-art/js/jquery.galleriffic.js Normal file
View File

@@ -0,0 +1,979 @@
/**
* jQuery Galleriffic plugin
*
* Copyright (c) 2008 Trent Foley (http://trentacular.com)
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*
* Much thanks to primary contributer Ponticlaro (http://www.ponticlaro.com)
*/
;(function($) {
// Globally keep track of all images by their unique hash. Each item is an image data object.
var allImages = {};
var imageCounter = 0;
// Galleriffic static class
$.galleriffic = {
version: '2.0.1',
// Strips invalid characters and any leading # characters
normalizeHash: function(hash) {
return hash.replace(/^.*#/, '').replace(/\?.*$/, '');
},
getImage: function(hash) {
if (!hash)
return undefined;
hash = $.galleriffic.normalizeHash(hash);
return allImages[hash];
},
// Global function that looks up an image by its hash and displays the image.
// Returns false when an image is not found for the specified hash.
// @param {String} hash This is the unique hash value assigned to an image.
gotoImage: function(hash) {
var imageData = $.galleriffic.getImage(hash);
if (!imageData)
return false;
var gallery = imageData.gallery;
gallery.gotoImage(imageData);
return true;
},
// Removes an image from its respective gallery by its hash.
// Returns false when an image is not found for the specified hash or the
// specified owner gallery does match the located images gallery.
// @param {String} hash This is the unique hash value assigned to an image.
// @param {Object} ownerGallery (Optional) When supplied, the located images
// gallery is verified to be the same as the specified owning gallery before
// performing the remove operation.
removeImageByHash: function(hash, ownerGallery) {
var imageData = $.galleriffic.getImage(hash);
if (!imageData)
return false;
var gallery = imageData.gallery;
if (ownerGallery && ownerGallery != gallery)
return false;
return gallery.removeImageByIndex(imageData.index);
}
};
var defaults = {
delay: 3000,
numThumbs: 20,
preloadAhead: 40, // Set to -1 to preload all images
enableTopPager: false,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '',
captionContainerSel: '',
controlsContainerSel: '',
loadingContainerSel: '',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play',
pauseLinkText: 'Pause',
prevLinkText: 'Previous',
nextLinkText: 'Next',
nextPageLinkText: 'Next &rsaquo;',
prevPageLinkText: '&lsaquo; Prev',
enableHistory: false,
enableKeyboardNavigation: true,
autoStart: false,
syncTransitions: false,
defaultTransitionDuration: 1000,
onSlideChange: undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
onTransitionOut: undefined, // accepts a delegate like such: function(slide, caption, isSync, callback) { ... }
onTransitionIn: undefined, // accepts a delegate like such: function(slide, caption, isSync) { ... }
onPageTransitionOut: undefined, // accepts a delegate like such: function(callback) { ... }
onPageTransitionIn: undefined, // accepts a delegate like such: function() { ... }
onImageAdded: undefined, // accepts a delegate like such: function(imageData, $li) { ... }
onImageRemoved: undefined // accepts a delegate like such: function(imageData, $li) { ... }
};
// Primary Galleriffic initialization function that should be called on the thumbnail container.
$.fn.galleriffic = function(settings) {
// Extend Gallery Object
$.extend(this, {
// Returns the version of the script
version: $.galleriffic.version,
// Current state of the slideshow
isSlideshowRunning: false,
slideshowTimeout: undefined,
// This function is attached to the click event of generated hyperlinks within the gallery
clickHandler: function(e, link) {
this.pause();
if (!this.enableHistory) {
// The href attribute holds the unique hash for an image
var hash = $.galleriffic.normalizeHash($(link).attr('href'));
$.galleriffic.gotoImage(hash);
e.preventDefault();
}
},
// Appends an image to the end of the set of images. Argument listItem can be either a jQuery DOM element or arbitrary html.
// @param listItem Either a jQuery object or a string of html of the list item that is to be added to the gallery.
appendImage: function(listItem) {
this.addImage(listItem, false, false);
return this;
},
// Inserts an image into the set of images. Argument listItem can be either a jQuery DOM element or arbitrary html.
// @param listItem Either a jQuery object or a string of html of the list item that is to be added to the gallery.
// @param {Integer} position The index within the gallery where the item shouold be added.
insertImage: function(listItem, position) {
this.addImage(listItem, false, true, position);
return this;
},
// Adds an image to the gallery and optionally inserts/appends it to the DOM (thumbExists)
// @param listItem Either a jQuery object or a string of html of the list item that is to be added to the gallery.
// @param {Boolean} thumbExists Specifies whether the thumbnail already exists in the DOM or if it needs to be added.
// @param {Boolean} insert Specifies whether the the image is appended to the end or inserted into the gallery.
// @param {Integer} position The index within the gallery where the item shouold be added.
addImage: function(listItem, thumbExists, insert, position) {
var $li = ( typeof listItem === "string" ) ? $(listItem) : listItem;
var $aThumb = $li.find('a.thumb');
var slideUrl = $aThumb.attr('href');
var title = $aThumb.attr('title');
var $caption = $li.find('.caption').remove();
var hash = $aThumb.attr('name');
// Increment the image counter
imageCounter++;
// Autogenerate a hash value if none is present or if it is a duplicate
if (!hash || allImages[''+hash]) {
hash = imageCounter;
}
// Set position to end when not specified
if (!insert)
position = this.data.length;
var imageData = {
title:title,
slideUrl:slideUrl,
caption:$caption,
hash:hash,
gallery:this,
index:position
};
// Add the imageData to this gallery's array of images
if (insert) {
this.data.splice(position, 0, imageData);
// Reset index value on all imageData objects
this.updateIndices(position);
}
else {
this.data.push(imageData);
}
var gallery = this;
// Add the element to the DOM
if (!thumbExists) {
// Update thumbs passing in addition post transition out handler
this.updateThumbs(function() {
var $thumbsUl = gallery.find('ul.thumbs');
if (insert)
$thumbsUl.children(':eq('+position+')').before($li);
else
$thumbsUl.append($li);
if (gallery.onImageAdded)
gallery.onImageAdded(imageData, $li);
});
}
// Register the image globally
allImages[''+hash] = imageData;
// Setup attributes and click handler
$aThumb.attr('rel', 'history')
.attr('href', '#'+hash)
.removeAttr('name')
.click(function(e) {
gallery.clickHandler(e, this);
});
return this;
},
// Removes an image from the gallery based on its index.
// Returns false when the index is out of range.
removeImageByIndex: function(index) {
if (index < 0 || index >= this.data.length)
return false;
var imageData = this.data[index];
if (!imageData)
return false;
this.removeImage(imageData);
return true;
},
// Convenience method that simply calls the global removeImageByHash method.
removeImageByHash: function(hash) {
return $.galleriffic.removeImageByHash(hash, this);
},
// Removes an image from the gallery.
removeImage: function(imageData) {
var index = imageData.index;
// Remove the image from the gallery data array
this.data.splice(index, 1);
// Remove the global registration
delete allImages[''+imageData.hash];
// Remove the image's list item from the DOM
this.updateThumbs(function() {
var $li = gallery.find('ul.thumbs')
.children(':eq('+index+')')
.remove();
if (gallery.onImageRemoved)
gallery.onImageRemoved(imageData, $li);
});
// Update each image objects index value
this.updateIndices(index);
return this;
},
// Updates the index values of the each of the images in the gallery after the specified index
updateIndices: function(startIndex) {
for (i = startIndex; i < this.data.length; i++) {
this.data[i].index = i;
}
return this;
},
// Scraped the thumbnail container for thumbs and adds each to the gallery
initializeThumbs: function() {
this.data = [];
var gallery = this;
this.find('ul.thumbs > li').each(function(i) {
gallery.addImage($(this), true, false);
});
return this;
},
isPreloadComplete: false,
// Initalizes the image preloader
preloadInit: function() {
if (this.preloadAhead == 0) return this;
this.preloadStartIndex = this.currentImage.index;
var nextIndex = this.getNextIndex(this.preloadStartIndex);
return this.preloadRecursive(this.preloadStartIndex, nextIndex);
},
// Changes the location in the gallery the preloader should work
// @param {Integer} index The index of the image where the preloader should restart at.
preloadRelocate: function(index) {
// By changing this startIndex, the current preload script will restart
this.preloadStartIndex = index;
return this;
},
// Recursive function that performs the image preloading
// @param {Integer} startIndex The index of the first image the current preloader started on.
// @param {Integer} currentIndex The index of the current image to preload.
preloadRecursive: function(startIndex, currentIndex) {
// Check if startIndex has been relocated
if (startIndex != this.preloadStartIndex) {
var nextIndex = this.getNextIndex(this.preloadStartIndex);
return this.preloadRecursive(this.preloadStartIndex, nextIndex);
}
var gallery = this;
// Now check for preloadAhead count
var preloadCount = currentIndex - startIndex;
if (preloadCount < 0)
preloadCount = this.data.length-1-startIndex+currentIndex;
if (this.preloadAhead >= 0 && preloadCount > this.preloadAhead) {
// Do this in order to keep checking for relocated start index
setTimeout(function() { gallery.preloadRecursive(startIndex, currentIndex); }, 500);
return this;
}
var imageData = this.data[currentIndex];
if (!imageData)
return this;
// If already loaded, continue
if (imageData.image)
return this.preloadNext(startIndex, currentIndex);
// Preload the image
var image = new Image();
image.onload = function() {
imageData.image = this;
gallery.preloadNext(startIndex, currentIndex);
};
image.alt = imageData.title;
image.src = imageData.slideUrl;
return this;
},
// Called by preloadRecursive in order to preload the next image after the previous has loaded.
// @param {Integer} startIndex The index of the first image the current preloader started on.
// @param {Integer} currentIndex The index of the current image to preload.
preloadNext: function(startIndex, currentIndex) {
var nextIndex = this.getNextIndex(currentIndex);
if (nextIndex == startIndex) {
this.isPreloadComplete = true;
} else {
// Use setTimeout to free up thread
var gallery = this;
setTimeout(function() { gallery.preloadRecursive(startIndex, nextIndex); }, 100);
}
return this;
},
// Safe way to get the next image index relative to the current image.
// If the current image is the last, returns 0
getNextIndex: function(index) {
var nextIndex = index+1;
if (nextIndex >= this.data.length)
nextIndex = 0;
return nextIndex;
},
// Safe way to get the previous image index relative to the current image.
// If the current image is the first, return the index of the last image in the gallery.
getPrevIndex: function(index) {
var prevIndex = index-1;
if (prevIndex < 0)
prevIndex = this.data.length-1;
return prevIndex;
},
// Pauses the slideshow
pause: function() {
this.isSlideshowRunning = false;
if (this.slideshowTimeout) {
clearTimeout(this.slideshowTimeout);
this.slideshowTimeout = undefined;
}
if (this.$controlsContainer) {
this.$controlsContainer
.find('div.ss-controls a').removeClass().addClass('play')
.attr('title', this.playLinkText)
.attr('href', '#play')
.html(this.playLinkText);
}
return this;
},
// Plays the slideshow
play: function() {
this.isSlideshowRunning = true;
if (this.$controlsContainer) {
this.$controlsContainer
.find('div.ss-controls a').removeClass().addClass('pause')
.attr('title', this.pauseLinkText)
.attr('href', '#pause')
.html(this.pauseLinkText);
}
if (!this.slideshowTimeout) {
var gallery = this;
this.slideshowTimeout = setTimeout(function() { gallery.ssAdvance(); }, this.delay);
}
return this;
},
// Toggles the state of the slideshow (playing/paused)
toggleSlideshow: function() {
if (this.isSlideshowRunning)
this.pause();
else
this.play();
return this;
},
// Advances the slideshow to the next image and delegates navigation to the
// history plugin when history is enabled
// enableHistory is true
ssAdvance: function() {
if (this.isSlideshowRunning)
this.next(true);
return this;
},
// Advances the gallery to the next image.
// @param {Boolean} dontPause Specifies whether to pause the slideshow.
// @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled.
next: function(dontPause, bypassHistory) {
this.gotoIndex(this.getNextIndex(this.currentImage.index), dontPause, bypassHistory);
return this;
},
// Navigates to the previous image in the gallery.
// @param {Boolean} dontPause Specifies whether to pause the slideshow.
// @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled.
previous: function(dontPause, bypassHistory) {
this.gotoIndex(this.getPrevIndex(this.currentImage.index), dontPause, bypassHistory);
return this;
},
// Navigates to the next page in the gallery.
// @param {Boolean} dontPause Specifies whether to pause the slideshow.
// @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled.
nextPage: function(dontPause, bypassHistory) {
var page = this.getCurrentPage();
var lastPage = this.getNumPages() - 1;
if (page < lastPage) {
var startIndex = page * this.numThumbs;
var nextPage = startIndex + this.numThumbs;
this.gotoIndex(nextPage, dontPause, bypassHistory);
}
return this;
},
// Navigates to the previous page in the gallery.
// @param {Boolean} dontPause Specifies whether to pause the slideshow.
// @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled.
previousPage: function(dontPause, bypassHistory) {
var page = this.getCurrentPage();
if (page > 0) {
var startIndex = page * this.numThumbs;
var prevPage = startIndex - this.numThumbs;
this.gotoIndex(prevPage, dontPause, bypassHistory);
}
return this;
},
// Navigates to the image at the specified index in the gallery
// @param {Integer} index The index of the image in the gallery to display.
// @param {Boolean} dontPause Specifies whether to pause the slideshow.
// @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled.
gotoIndex: function(index, dontPause, bypassHistory) {
if (!dontPause)
this.pause();
if (index < 0) index = 0;
else if (index >= this.data.length) index = this.data.length-1;
var imageData = this.data[index];
if (!bypassHistory && this.enableHistory)
$.historyLoad(String(imageData.hash)); // At the moment, historyLoad only accepts string arguments
else
this.gotoImage(imageData);
return this;
},
// This function is garaunteed to be called anytime a gallery slide changes.
// @param {Object} imageData An object holding the image metadata of the image to navigate to.
gotoImage: function(imageData) {
var index = imageData.index;
if (this.onSlideChange)
this.onSlideChange(this.currentImage.index, index);
this.currentImage = imageData;
this.preloadRelocate(index);
this.refresh();
return this;
},
// Returns the default transition duration value. The value is halved when not
// performing a synchronized transition.
// @param {Boolean} isSync Specifies whether the transitions are synchronized.
getDefaultTransitionDuration: function(isSync) {
if (isSync)
return this.defaultTransitionDuration;
return this.defaultTransitionDuration / 2;
},
// Rebuilds the slideshow image and controls and performs transitions
refresh: function() {
var imageData = this.currentImage;
if (!imageData)
return this;
var index = imageData.index;
// Update Controls
if (this.$controlsContainer) {
this.$controlsContainer
.find('div.nav-controls a.prev').attr('href', '#'+this.data[this.getPrevIndex(index)].hash).end()
.find('div.nav-controls a.next').attr('href', '#'+this.data[this.getNextIndex(index)].hash);
}
var previousSlide = this.$imageContainer.find('span.current').addClass('previous').removeClass('current');
var previousCaption = 0;
if (this.$captionContainer) {
previousCaption = this.$captionContainer.find('span.current').addClass('previous').removeClass('current');
}
// Perform transitions simultaneously if syncTransitions is true and the next image is already preloaded
var isSync = this.syncTransitions && imageData.image;
// Flag we are transitioning
var isTransitioning = true;
var gallery = this;
var transitionOutCallback = function() {
// Flag that the transition has completed
isTransitioning = false;
// Remove the old slide
previousSlide.remove();
// Remove old caption
if (previousCaption)
previousCaption.remove();
if (!isSync) {
if (imageData.image && imageData.hash == gallery.data[gallery.currentImage.index].hash) {
gallery.buildImage(imageData, isSync);
} else {
// Show loading container
if (gallery.$loadingContainer) {
gallery.$loadingContainer.show();
}
}
}
};
if (previousSlide.length == 0) {
// For the first slide, the previous slide will be empty, so we will call the callback immediately
transitionOutCallback();
} else {
if (this.onTransitionOut) {
this.onTransitionOut(previousSlide, previousCaption, isSync, transitionOutCallback);
} else {
previousSlide.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0, transitionOutCallback);
if (previousCaption)
previousCaption.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0);
}
}
// Go ahead and begin transitioning in of next image
if (isSync)
this.buildImage(imageData, isSync);
if (!imageData.image) {
var image = new Image();
// Wire up mainImage onload event
image.onload = function() {
imageData.image = this;
// Only build image if the out transition has completed and we are still on the same image hash
if (!isTransitioning && imageData.hash == gallery.data[gallery.currentImage.index].hash) {
gallery.buildImage(imageData, isSync);
}
};
// set alt and src
image.alt = imageData.title;
image.src = imageData.slideUrl;
}
// This causes the preloader (if still running) to relocate out from the currentIndex
this.relocatePreload = true;
return this.syncThumbs();
},
// Called by the refresh method after the previous image has been transitioned out or at the same time
// as the out transition when performing a synchronous transition.
// @param {Object} imageData An object holding the image metadata of the image to build.
// @param {Boolean} isSync Specifies whether the transitions are synchronized.
buildImage: function(imageData, isSync) {
var gallery = this;
var nextIndex = this.getNextIndex(imageData.index);
// Construct new hidden span for the image
var newSlide = this.$imageContainer
.append('<span class="image-wrapper current"><a class="advance-link" rel="history" href="#'+this.data[nextIndex].hash+'" title="'+imageData.title+'">&nbsp;</a></span>')
.find('span.current').css('opacity', '0');
newSlide.find('a')
.append(imageData.image)
.click(function(e) {
gallery.clickHandler(e, this);
});
var newCaption = 0;
if (this.$captionContainer) {
// Construct new hidden caption for the image
newCaption = this.$captionContainer
.append('<span class="image-caption current"></span>')
.find('span.current').css('opacity', '0')
.append(imageData.caption);
}
// Hide the loading conatiner
if (this.$loadingContainer) {
this.$loadingContainer.hide();
}
// Transition in the new image
if (this.onTransitionIn) {
this.onTransitionIn(newSlide, newCaption, isSync);
} else {
newSlide.fadeTo(this.getDefaultTransitionDuration(isSync), 1.0);
if (newCaption)
newCaption.fadeTo(this.getDefaultTransitionDuration(isSync), 1.0);
}
if (this.isSlideshowRunning) {
if (this.slideshowTimeout)
clearTimeout(this.slideshowTimeout);
this.slideshowTimeout = setTimeout(function() { gallery.ssAdvance(); }, this.delay);
}
return this;
},
// Returns the current page index that should be shown for the currentImage
getCurrentPage: function() {
return Math.floor(this.currentImage.index / this.numThumbs);
},
// Applies the selected class to the current image's corresponding thumbnail.
// Also checks if the current page has changed and updates the displayed page of thumbnails if necessary.
syncThumbs: function() {
var page = this.getCurrentPage();
if (page != this.displayedPage)
this.updateThumbs();
// Remove existing selected class and add selected class to new thumb
var $thumbs = this.find('ul.thumbs').children();
$thumbs.filter('.selected').removeClass('selected');
$thumbs.eq(this.currentImage.index).addClass('selected');
return this;
},
// Performs transitions on the thumbnails container and updates the set of
// thumbnails that are to be displayed and the navigation controls.
// @param {Delegate} postTransitionOutHandler An optional delegate that is called after
// the thumbnails container has transitioned out and before the thumbnails are rebuilt.
updateThumbs: function(postTransitionOutHandler) {
var gallery = this;
var transitionOutCallback = function() {
// Call the Post-transition Out Handler
if (postTransitionOutHandler)
postTransitionOutHandler();
gallery.rebuildThumbs();
// Transition In the thumbsContainer
if (gallery.onPageTransitionIn)
gallery.onPageTransitionIn();
else
gallery.show();
};
// Transition Out the thumbsContainer
if (this.onPageTransitionOut) {
this.onPageTransitionOut(transitionOutCallback);
} else {
this.hide();
transitionOutCallback();
}
return this;
},
// Updates the set of thumbnails that are to be displayed and the navigation controls.
rebuildThumbs: function() {
var needsPagination = this.data.length > this.numThumbs;
// Rebuild top pager
if (this.enableTopPager) {
var $topPager = this.find('div.top');
if ($topPager.length == 0)
$topPager = this.prepend('<div class="top pagination"></div>').find('div.top');
else
$topPager.empty();
if (needsPagination)
this.buildPager($topPager);
}
// Rebuild bottom pager
if (this.enableBottomPager) {
var $bottomPager = this.find('div.bottom');
if ($bottomPager.length == 0)
$bottomPager = this.append('<div class="bottom pagination"></div>').find('div.bottom');
else
$bottomPager.empty();
if (needsPagination)
this.buildPager($bottomPager);
}
var page = this.getCurrentPage();
var startIndex = page*this.numThumbs;
var stopIndex = startIndex+this.numThumbs-1;
if (stopIndex >= this.data.length)
stopIndex = this.data.length-1;
// Show/Hide thumbs
var $thumbsUl = this.find('ul.thumbs');
$thumbsUl.find('li').each(function(i) {
var $li = $(this);
if (i >= startIndex && i <= stopIndex) {
$li.show();
} else {
$li.hide();
}
});
this.displayedPage = page;
// Remove the noscript class from the thumbs container ul
$thumbsUl.removeClass('noscript');
return this;
},
// Returns the total number of pages required to display all the thumbnails.
getNumPages: function() {
return Math.ceil(this.data.length/this.numThumbs);
},
// Rebuilds the pager control in the specified matched element.
// @param {jQuery} pager A jQuery element set matching the particular pager to be rebuilt.
buildPager: function(pager) {
var gallery = this;
var numPages = this.getNumPages();
var page = this.getCurrentPage();
var startIndex = page * this.numThumbs;
var pagesRemaining = this.maxPagesToShow - 1;
var pageNum = page - Math.floor((this.maxPagesToShow - 1) / 2) + 1;
if (pageNum > 0) {
var remainingPageCount = numPages - pageNum;
if (remainingPageCount < pagesRemaining) {
pageNum = pageNum - (pagesRemaining - remainingPageCount);
}
}
if (pageNum < 0) {
pageNum = 0;
}
// Prev Page Link
if (page > 0) {
var prevPage = startIndex - this.numThumbs;
pager.append('<a rel="history" href="#'+this.data[prevPage].hash+'" title="'+this.prevPageLinkText+'">'+this.prevPageLinkText+'</a>');
}
// Create First Page link if needed
if (pageNum > 0) {
this.buildPageLink(pager, 0, numPages);
if (pageNum > 1)
pager.append('<span class="ellipsis">&hellip;</span>');
pagesRemaining--;
}
// Page Index Links
while (pagesRemaining > 0) {
this.buildPageLink(pager, pageNum, numPages);
pagesRemaining--;
pageNum++;
}
// Create Last Page link if needed
if (pageNum < numPages) {
var lastPageNum = numPages - 1;
if (pageNum < lastPageNum)
pager.append('<span class="ellipsis">&hellip;</span>');
this.buildPageLink(pager, lastPageNum, numPages);
}
// Next Page Link
var nextPage = startIndex + this.numThumbs;
if (nextPage < this.data.length) {
pager.append('<a rel="history" href="#'+this.data[nextPage].hash+'" title="'+this.nextPageLinkText+'">'+this.nextPageLinkText+'</a>');
}
pager.find('a').click(function(e) {
gallery.clickHandler(e, this);
});
return this;
},
// Builds a single page link within a pager. This function is called by buildPager
// @param {jQuery} pager A jQuery element set matching the particular pager to be rebuilt.
// @param {Integer} pageNum The page number of the page link to build.
// @param {Integer} numPages The total number of pages required to display all thumbnails.
buildPageLink: function(pager, pageNum, numPages) {
var pageLabel = pageNum + 1;
var currentPage = this.getCurrentPage();
if (pageNum == currentPage)
pager.append('<span class="current">'+pageLabel+'</span>');
else if (pageNum < numPages) {
var imageIndex = pageNum*this.numThumbs;
pager.append('<a rel="history" href="#'+this.data[imageIndex].hash+'" title="'+pageLabel+'">'+pageLabel+'</a>');
}
return this;
}
});
// Now initialize the gallery
$.extend(this, defaults, settings);
// Verify the history plugin is available
if (this.enableHistory && !$.historyInit)
this.enableHistory = false;
// Select containers
if (this.imageContainerSel) this.$imageContainer = $(this.imageContainerSel);
if (this.captionContainerSel) this.$captionContainer = $(this.captionContainerSel);
if (this.loadingContainerSel) this.$loadingContainer = $(this.loadingContainerSel);
// Initialize the thumbails
this.initializeThumbs();
if (this.maxPagesToShow < 3)
this.maxPagesToShow = 3;
this.displayedPage = -1;
this.currentImage = this.data[0];
var gallery = this;
// Hide the loadingContainer
if (this.$loadingContainer)
this.$loadingContainer.hide();
// Setup controls
if (this.controlsContainerSel) {
this.$controlsContainer = $(this.controlsContainerSel).empty();
if (this.renderSSControls) {
if (this.autoStart) {
this.$controlsContainer
.append('<div class="ss-controls"><a href="#pause" class="pause" title="'+this.pauseLinkText+'">'+this.pauseLinkText+'</a></div>');
} else {
this.$controlsContainer
.append('<div class="ss-controls"><a href="#play" class="play" title="'+this.playLinkText+'">'+this.playLinkText+'</a></div>');
}
this.$controlsContainer.find('div.ss-controls a')
.click(function(e) {
gallery.toggleSlideshow();
e.preventDefault();
return false;
});
}
if (this.renderNavControls) {
this.$controlsContainer
.append('<div class="nav-controls"><a class="prev" rel="history" title="'+this.prevLinkText+'">'+this.prevLinkText+'</a><a class="next" rel="history" title="'+this.nextLinkText+'">'+this.nextLinkText+'</a></div>')
.find('div.nav-controls a')
.click(function(e) {
gallery.clickHandler(e, this);
});
}
}
var initFirstImage = !this.enableHistory || !location.hash;
if (this.enableHistory && location.hash) {
var hash = $.galleriffic.normalizeHash(location.hash);
var imageData = allImages[hash];
if (!imageData)
initFirstImage = true;
}
// Setup gallery to show the first image
if (initFirstImage)
this.gotoIndex(0, false, true);
// Setup Keyboard Navigation
if (this.enableKeyboardNavigation) {
$(document).keydown(function(e) {
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
switch(key) {
case 32: // space
gallery.next();
e.preventDefault();
break;
case 33: // Page Up
gallery.previousPage();
e.preventDefault();
break;
case 34: // Page Down
gallery.nextPage();
e.preventDefault();
break;
case 35: // End
gallery.gotoIndex(gallery.data.length-1);
e.preventDefault();
break;
case 36: // Home
gallery.gotoIndex(0);
e.preventDefault();
break;
case 37: // left arrow
gallery.previous();
e.preventDefault();
break;
case 39: // right arrow
gallery.next();
e.preventDefault();
break;
}
});
}
// Auto start the slideshow
if (this.autoStart)
this.play();
// Kickoff Image Preloader after 1 second
setTimeout(function() { gallery.preloadInit(); }, 1000);
return this;
};
})(jQuery);

19
photo-art/js/jquery.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

42
photo-art/js/jquery.opacityrollover.js Normal file
View File

@@ -0,0 +1,42 @@
/**
* jQuery Opacity Rollover plugin
*
* Copyright (c) 2009 Trent Foley (http://trentacular.com)
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/
;(function($) {
var defaults = {
mouseOutOpacity: 0.67,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
};
$.fn.opacityrollover = function(settings) {
// Initialize the effect
$.extend(this, defaults, settings);
var config = this;
function fadeTo(element, opacity) {
var $target = $(element);
if (config.exemptionSelector)
$target = $target.not(config.exemptionSelector);
$target.fadeTo(config.fadeSpeed, opacity);
}
this.css('opacity', this.mouseOutOpacity)
.hover(
function () {
fadeTo(this, config.mouseOverOpacity);
},
function () {
fadeTo(this, config.mouseOutOpacity);
});
return this;
};
})(jQuery);

129
photo-art/js/jquery.sooperfish.js Normal file
View File

@@ -0,0 +1,129 @@
/*
* SooperFish 0.1
* (c) 2010 Jurriaan Roelofs - SooperThemes.com
* Inspired by Suckerfish, Superfish and Droppy
* Licensed GPL: http://www.gnu.org/licenses/gpl.html
*/
$.fn.sooperfish = function(op) {
var sf = $.fn.sooperfish;
sf.o = [];
sf.op = {};
sf.c = {
menuClass : 'sf-js-enabled',
isParent : 'sf-parent',
arrowClass : 'sf-arrow'
};
if ($.easing.easeOutOvershoot) { //set default easing
sooperEasingShow = 'easeOutOvershoot';
} else {
sooperEasingShow = 'linear';
};
if ($.easing.easeInTurbo) {
sooperEasingHide = 'easeInTurbo';
} else {
sooperEasingHide = 'linear';
};
sf.defaults = {
multiColumn : true,
dualColumn : 6, //if a submenu has at least this many items it will be divided in 2 columns
tripleColumn : 12, //if a submenu has at least this many items it will be divided in 3 columns
hoverClass : 'sfHover',
delay : 500, //make sure menus only disappear when intended, 500ms is advised by Jacob Nielsen
animationShow : {height:'show'},
speedShow : 600,
easingShow : sooperEasingShow,
animationHide : {height:'hide',opacity:'hide'},
speedHide : 200,
easingHide : sooperEasingHide,
autoArrows : true, //Adds span elements to parent li elements, projecting arrow images on these items to indicate submenus. I added an alternative image file with white arrows.
onShow : function(){}, //callback after showing menu
onHide : function(){} //callback after hiding menu
};
//Merge default settings with o function parameter
var o = $.extend({},sf.defaults,op);
if (!o.sooperfishWidth) {
o.sooperfishWidth = $('ul:first li:first', this).width(); //if no width is set in options try to read it from DOM
} else {
$('ul li', this).width(o.sooperfishWidth) //if width is set in invocation make sure this width is true for all submenus
}
this.each(function() {
//Check dom for submenus
var parentLi = $('li:has(ul)', this);
parentLi.each(function(){
if (o.autoArrows) { //Add autoArrows if requested
$('>a',this).append('<span class="'+sf.c.arrowClass+'"></span>');
}
$(this).addClass(sf.c.isParent);
});
$('ul',this).css({left: 'auto',display: 'none'}); //The script needs to use display:none to make the hiding animation possible
//Divide menu in columns
//Set width override
if (o.multiColumn) {
var uls = $('ul',this);
uls.each(function(){
var ulsize = $('>li:not(.backLava)',this).length; //Skip list items added by Lavalamp plugin
if (ulsize >= o.dualColumn) {
if (ulsize >= o.tripleColumn) {
$(this).width(3*o.sooperfishWidth).addClass('multicolumn triplecolumn');
} else {
$(this).width(2*o.sooperfishWidth).addClass('multicolumn dualcolumn');
}
}
});
}
var root = this, zIndex = 1000;
function getSubmenu(ele) {
if (ele.nodeName.toLowerCase() == 'li') {
var submenu = $('> ul', ele);
return submenu.length ? submenu[0] : null;
} else {
return ele;
}
}
function getActuator(ele) {
if (ele.nodeName.toLowerCase() == 'ul') {
return $(ele).parents('li')[0];
} else {
return ele;
}
}
function hideSooperfishUl() {
var submenu = getSubmenu(this);
if (!submenu) return;
$.data(submenu, 'cancelHide', false);
setTimeout(function() {
if (!$.data(submenu, 'cancelHide')) {
$(submenu).animate(o.animationHide,o.speedHide,o.easingHide,function(){ o.onHide.call(submenu); });
}
}, o.delay);
}
function showSooperfishUl() {
var submenu = getSubmenu(this);
if (!submenu) return;
$.data(submenu, 'cancelHide', true);
$(submenu).css({zIndex: zIndex++}).animate(o.animationShow,o.speedShow,o.easingShow,function(){ o.onShow.call(submenu); });
if (this.nodeName.toLowerCase() == 'ul') {
var li = getActuator(this);
$(li).addClass('hover');
$('> a', li).addClass('hover');
}
}
// Bind Events. Yes it's that simple!
$('li', this).unbind().hover(showSooperfishUl, hideSooperfishUl);
});
};

28
photo-art/js/modernizr-1.5.min.js vendored Normal file
View File

@@ -0,0 +1,28 @@
/*!
* Modernizr JavaScript library 1.5
* http://www.modernizr.com/
*
* Copyright (c) 2009-2010 Faruk Ates - http://farukat.es/
* Dual-licensed under the BSD and MIT licenses.
* http://www.modernizr.com/license/
*
* Featuring major contributions by
* Paul Irish - http://paulirish.com
*/
window.Modernizr=function(i,e,I){function C(a,b){for(var c in a)if(m[a[c]]!==I&&(!b||b(a[c],D)))return true}function r(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1);return!!C([a,"Webkit"+c,"Moz"+c,"O"+c,"ms"+c,"Khtml"+c],b)}function P(){j[E]=function(a){for(var b=0,c=a.length;b<c;b++)J[a[b]]=!!(a[b]in n);return J}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" "));j[Q]=function(a){for(var b=0,c,h=a.length;b<h;b++){n.setAttribute("type",a[b]);if(c=n.type!==
"text"){n.value=K;/tel|search/.test(n.type)||(c=/url|email/.test(n.type)?n.checkValidity&&n.checkValidity()===false:n.value!=K)}L[a[b]]=!!c}return L}("search tel url email datetime date month week time datetime-local number range color".split(" "))}var j={},s=e.documentElement,D=e.createElement("modernizr"),m=D.style,n=e.createElement("input"),E="input",Q=E+"types",K=":)",M=Object.prototype.toString,y=" -o- -moz- -ms- -webkit- -khtml- ".split(" "),d={},L={},J={},N=[],u=function(){var a={select:"input",
change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"},b={};return function(c,h){var t=arguments.length==1;if(t&&b[c])return b[c];h=h||document.createElement(a[c]||"div");c="on"+c;var g=c in h;if(!g&&h.setAttribute){h.setAttribute(c,"return;");g=typeof h[c]=="function"}h=null;return t?(b[c]=g):g}}(),F={}.hasOwnProperty,O;O=typeof F!=="undefined"&&typeof F.call!=="undefined"?function(a,b){return F.call(a,b)}:function(a,b){return b in a&&typeof a.constructor.prototype[b]==="undefined"};
d.canvas=function(){return!!e.createElement("canvas").getContext};d.canvastext=function(){return!!(d.canvas()&&typeof e.createElement("canvas").getContext("2d").fillText=="function")};d.geolocation=function(){return!!navigator.geolocation};d.crosswindowmessaging=function(){return!!i.postMessage};d.websqldatabase=function(){var a=!!i.openDatabase;if(a)try{a=!!openDatabase("testdb","1.0","html5 test db",2E5)}catch(b){a=false}return a};d.indexedDB=function(){return!!i.indexedDB};d.hashchange=function(){return u("hashchange",
i)&&(document.documentMode===I||document.documentMode>7)};d.historymanagement=function(){return!!(i.history&&history.pushState)};d.draganddrop=function(){return u("drag")&&u("dragstart")&&u("dragenter")&&u("dragover")&&u("dragleave")&&u("dragend")&&u("drop")};d.websockets=function(){return"WebSocket"in i};d.rgba=function(){m.cssText="background-color:rgba(150,255,150,.5)";return(""+m.backgroundColor).indexOf("rgba")!==-1};d.hsla=function(){m.cssText="background-color:hsla(120,40%,100%,.5)";return(""+
m.backgroundColor).indexOf("rgba")!==-1};d.multiplebgs=function(){m.cssText="background:url(//:),url(//:),red url(//:)";return/(url\s*\(.*?){3}/.test(m.background)};d.backgroundsize=function(){return r("backgroundSize")};d.borderimage=function(){return r("borderImage")};d.borderradius=function(){return r("borderRadius","",function(a){return(""+a).indexOf("orderRadius")!==-1})};d.boxshadow=function(){return r("boxShadow")};d.opacity=function(){var a=y.join("opacity:.5;")+"";m.cssText=a;return(""+m.opacity).indexOf("0.5")!==
-1};d.cssanimations=function(){return r("animationName")};d.csscolumns=function(){return r("columnCount")};d.cssgradients=function(){var a=("background-image:"+y.join("gradient(linear,left top,right bottom,from(#9f9),to(white));background-image:")+y.join("linear-gradient(left top,#9f9, white);background-image:")).slice(0,-17);m.cssText=a;return(""+m.backgroundImage).indexOf("gradient")!==-1};d.cssreflections=function(){return r("boxReflect")};d.csstransforms=function(){return!!C(["transformProperty",
"WebkitTransform","MozTransform","OTransform","msTransform"])};d.csstransforms3d=function(){var a=!!C(["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"]);if(a){var b=document.createElement("style"),c=e.createElement("div");b.textContent="@media ("+y.join("transform-3d),(")+"modernizr){#modernizr{height:3px}}";e.getElementsByTagName("head")[0].appendChild(b);c.id="modernizr";s.appendChild(c);a=c.offsetHeight===3;b.parentNode.removeChild(b);c.parentNode.removeChild(c)}return a};
d.csstransitions=function(){return r("transitionProperty")};d.fontface=function(){var a;if(/*@cc_on@if(@_jscript_version>=5)!@end@*/0)a=true;else{var b=e.createElement("style"),c=e.createElement("span"),h,t=false,g=e.body,o,w;b.textContent="@font-face{font-family:testfont;src:url('data:font/ttf;base64,AAEAAAAMAIAAAwBAT1MvMliohmwAAADMAAAAVmNtYXCp5qrBAAABJAAAANhjdnQgACICiAAAAfwAAAAEZ2FzcP//AAMAAAIAAAAACGdseWYv5OZoAAACCAAAANxoZWFk69bnvwAAAuQAAAA2aGhlYQUJAt8AAAMcAAAAJGhtdHgGDgC4AAADQAAAABRsb2NhAIQAwgAAA1QAAAAMbWF4cABVANgAAANgAAAAIG5hbWUgXduAAAADgAAABPVwb3N03NkzmgAACHgAAAA4AAECBAEsAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAACAAMDAAAAAAAAgAACbwAAAAoAAAAAAAAAAFBmRWQAAAAgqS8DM/8zAFwDMwDNAAAABQAAAAAAAAAAAAMAAAADAAAAHAABAAAAAABGAAMAAQAAAK4ABAAqAAAABgAEAAEAAgAuqQD//wAAAC6pAP///9ZXAwAAAAAAAAACAAAABgBoAAAAAAAvAAEAAAAAAAAAAAAAAAAAAAABAAIAAAAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAEACoAAAAGAAQAAQACAC6pAP//AAAALqkA////1lcDAAAAAAAAAAIAAAAiAogAAAAB//8AAgACACIAAAEyAqoAAwAHAC6xAQAvPLIHBADtMrEGBdw8sgMCAO0yALEDAC88sgUEAO0ysgcGAfw8sgECAO0yMxEhESczESMiARDuzMwCqv1WIgJmAAACAFUAAAIRAc0ADwAfAAATFRQWOwEyNj0BNCYrASIGARQGKwEiJj0BNDY7ATIWFX8aIvAiGhoi8CIaAZIoN/43KCg3/jcoAWD0JB4eJPQkHh7++EY2NkbVRjY2RgAAAAABAEH/+QCdAEEACQAANjQ2MzIWFAYjIkEeEA8fHw8QDxwWFhwWAAAAAQAAAAIAAIuYbWpfDzz1AAsEAAAAAADFn9IuAAAAAMWf0i797/8zA4gDMwAAAAgAAgAAAAAAAAABAAADM/8zAFwDx/3v/98DiAABAAAAAAAAAAAAAAAAAAAABQF2ACIAAAAAAVUAAAJmAFUA3QBBAAAAKgAqACoAWgBuAAEAAAAFAFAABwBUAAQAAgAAAAEAAQAAAEAALgADAAMAAAAQAMYAAQAAAAAAAACLAAAAAQAAAAAAAQAhAIsAAQAAAAAAAgAFAKwAAQAAAAAAAwBDALEAAQAAAAAABAAnAPQAAQAAAAAABQAKARsAAQAAAAAABgAmASUAAQAAAAAADgAaAUsAAwABBAkAAAEWAWUAAwABBAkAAQBCAnsAAwABBAkAAgAKAr0AAwABBAkAAwCGAscAAwABBAkABABOA00AAwABBAkABQAUA5sAAwABBAkABgBMA68AAwABBAkADgA0A/tDb3B5cmlnaHQgMjAwOSBieSBEYW5pZWwgSm9obnNvbi4gIFJlbGVhc2VkIHVuZGVyIHRoZSB0ZXJtcyBvZiB0aGUgT3BlbiBGb250IExpY2Vuc2UuIEtheWFoIExpIGdseXBocyBhcmUgcmVsZWFzZWQgdW5kZXIgdGhlIEdQTCB2ZXJzaW9uIDMuYmFlYzJhOTJiZmZlNTAzMiAtIHN1YnNldCBvZiBKdXJhTGlnaHRiYWVjMmE5MmJmZmU1MDMyIC0gc3Vic2V0IG9mIEZvbnRGb3JnZSAyLjAgOiBKdXJhIExpZ2h0IDogMjMtMS0yMDA5YmFlYzJhOTJiZmZlNTAzMiAtIHN1YnNldCBvZiBKdXJhIExpZ2h0VmVyc2lvbiAyIGJhZWMyYTkyYmZmZTUwMzIgLSBzdWJzZXQgb2YgSnVyYUxpZ2h0aHR0cDovL3NjcmlwdHMuc2lsLm9yZy9PRkwAQwBvAHAAeQByAGkAZwBoAHQAIAAyADAAMAA5ACAAYgB5ACAARABhAG4AaQBlAGwAIABKAG8AaABuAHMAbwBuAC4AIAAgAFIAZQBsAGUAYQBzAGUAZAAgAHUAbgBkAGUAcgAgAHQAaABlACAAdABlAHIAbQBzACAAbwBmACAAdABoAGUAIABPAHAAZQBuACAARgBvAG4AdAAgAEwAaQBjAGUAbgBzAGUALgAgAEsAYQB5AGEAaAAgAEwAaQAgAGcAbAB5AHAAaABzACAAYQByAGUAIAByAGUAbABlAGEAcwBlAGQAIAB1AG4AZABlAHIAIAB0AGgAZQAgAEcAUABMACAAdgBlAHIAcwBpAG8AbgAgADMALgBiAGEAZQBjADIAYQA5ADIAYgBmAGYAZQA1ADAAMwAyACAALQAgAHMAdQBiAHMAZQB0ACAAbwBmACAASgB1AHIAYQBMAGkAZwBoAHQAYgBhAGUAYwAyAGEAOQAyAGIAZgBmAGUANQAwADMAMgAgAC0AIABzAHUAYgBzAGUAdAAgAG8AZgAgAEYAbwBuAHQARgBvAHIAZwBlACAAMgAuADAAIAA6ACAASgB1AHIAYQAgAEwAaQBnAGgAdAAgADoAIAAyADMALQAxAC0AMgAwADAAOQBiAGEAZQBjADIAYQA5ADIAYgBmAGYAZQA1ADAAMwAyACAALQAgAHMAdQBiAHMAZQB0ACAAbwBmACAASgB1AHIAYQAgAEwAaQBnAGgAdABWAGUAcgBzAGkAbwBuACAAMgAgAGIAYQBlAGMAMgBhADkAMgBiAGYAZgBlADUAMAAzADIAIAAtACAAcwB1AGIAcwBlAHQAIABvAGYAIABKAHUAcgBhAEwAaQBnAGgAdABoAHQAdABwADoALwAvAHMAYwByAGkAcAB0AHMALgBzAGkAbAAuAG8AcgBnAC8ATwBGAEwAAAAAAgAAAAAAAP+BADMAAAAAAAAAAAAAAAAAAAAAAAAAAAAFAAAAAQACAQIAEQt6ZXJva2F5YWhsaQ==')}";
e.getElementsByTagName("head")[0].appendChild(b);c.setAttribute("style","font:99px _,arial,helvetica;position:absolute;visibility:hidden");if(!g){g=s.appendChild(e.createElement("fontface"));t=true}c.innerHTML="........";c.id="fonttest";g.appendChild(c);h=c.offsetWidth*c.offsetHeight;c.style.font="99px testfont,_,arial,helvetica";a=h!==c.offsetWidth*c.offsetHeight;var v=function(){if(g.parentNode){a=j.fontface=h!==c.offsetWidth*c.offsetHeight;s.className=s.className.replace(/(no-)?fontface\b/,"")+
(a?" ":" no-")+"fontface"}};setTimeout(v,75);setTimeout(v,150);addEventListener("load",function(){v();(w=true)&&o&&o(a);setTimeout(function(){t||(g=c);g.parentNode.removeChild(g);b.parentNode.removeChild(b)},50)},false)}j._fontfaceready=function(p){w||a?p(a):(o=p)};return a||h!==c.offsetWidth};d.video=function(){var a=e.createElement("video"),b=!!a.canPlayType;if(b){b=new Boolean(b);b.ogg=a.canPlayType('video/ogg; codecs="theora"');b.h264=a.canPlayType('video/mp4; codecs="avc1.42E01E"');b.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"')}return b};
d.audio=function(){var a=e.createElement("audio"),b=!!a.canPlayType;if(b){b=new Boolean(b);b.ogg=a.canPlayType('audio/ogg; codecs="vorbis"');b.mp3=a.canPlayType("audio/mpeg;");b.wav=a.canPlayType('audio/wav; codecs="1"');b.m4a=a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;")}return b};d.localStorage=function(){return"localStorage"in i&&i.localStorage!==null};d.sessionStorage=function(){try{return"sessionStorage"in i&&i.sessionStorage!==null}catch(a){return false}};d.webworkers=function(){return!!i.Worker};
d.applicationCache=function(){var a=i.applicationCache;return!!(a&&typeof a.status!="undefined"&&typeof a.update=="function"&&typeof a.swapCache=="function")};d.svg=function(){return!!e.createElementNS&&!!e.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect};d.smil=function(){return!!e.createElementNS&&/SVG/.test(M.call(e.createElementNS("http://www.w3.org/2000/svg","animate")))};d.svgclippaths=function(){return!!e.createElementNS&&/SVG/.test(M.call(e.createElementNS("http://www.w3.org/2000/svg",
"clipPath")))};for(var z in d)if(O(d,z))N.push(((j[z.toLowerCase()]=d[z]())?"":"no-")+z.toLowerCase());j[E]||P();j.addTest=function(a,b){a=a.toLowerCase();if(!j[a]){b=!!b();s.className+=" "+(b?"":"no-")+a;j[a]=b;return j}};m.cssText="";D=n=null;(function(){var a=e.createElement("div");a.innerHTML="<elem></elem>";return a.childNodes.length!==1})()&&function(a,b){function c(f,k){if(o[f])o[f].styleSheet.cssText+=k;else{var l=t[G],q=b[A]("style");q.media=f;l.insertBefore(q,l[G]);o[f]=q;c(f,k)}}function h(f,
k){for(var l=new RegExp("\\b("+w+")\\b(?!.*[;}])","gi"),q=function(B){return".iepp_"+B},x=-1;++x<f.length;){k=f[x].media||k;h(f[x].imports,k);c(k,f[x].cssText.replace(l,q))}}for(var t=b.documentElement,g=b.createDocumentFragment(),o={},w="abbr|article|aside|audio|canvas|command|datalist|details|figure|figcaption|footer|header|hgroup|keygen|mark|meter|nav|output|progress|section|source|summary|time|video",v=w.split("|"),p=[],H=-1,G="firstChild",A="createElement";++H<v.length;){b[A](v[H]);g[A](v[H])}g=
g.appendChild(b[A]("div"));a.attachEvent("onbeforeprint",function(){for(var f,k=b.getElementsByTagName("*"),l,q,x=new RegExp("^"+w+"$","i"),B=-1;++B<k.length;)if((f=k[B])&&(q=f.nodeName.match(x))){l=new RegExp("^\\s*<"+q+"(.*)\\/"+q+">\\s*$","i");g.innerHTML=f.outerHTML.replace(/\r|\n/g," ").replace(l,f.currentStyle.display=="block"?"<div$1/div>":"<span$1/span>");l=g.childNodes[0];l.className+=" iepp_"+q;l=p[p.length]=[f,l];f.parentNode.replaceChild(l[1],l[0])}h(b.styleSheets,"all")});a.attachEvent("onafterprint",
function(){for(var f=-1,k;++f<p.length;)p[f][1].parentNode.replaceChild(p[f][0],p[f][1]);for(k in o)t[G].removeChild(o[k]);o={};p=[]})}(this,e);j._enableHTML5=true;j._version="1.5";s.className=s.className.replace(/\bno-js\b/,"")+" js";s.className+=" "+N.join(" ");return j}(this,this.document);

250
photo-art/portfolio_one.html Normal file
View File

@@ -0,0 +1,250 @@
<!DOCTYPE HTML>
<html>
<head>
<title>PhotoArtWork2_reverse</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- stylesheets -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/portfolio_one.css" rel="stylesheet" type="text/css" />
<link href="css/colour.css" rel="stylesheet" type="text/css" />
<!-- modernizr enables HTML5 elements and feature detects -->
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
</head>
<body>
<div id="main">
<!-- begin header -->
<header>
<div id="logo"><h1>PHOTO<a href="#">ART</a>WORK 2_reverse</h1></div>
<nav>
<ul class="sf-menu" id="nav">
<li><a href="index.html">home</a></li>
<li><a href="about.html">about me</a></li>
<li class="selected"><a href="#">my portfolio</a>
<ul>
<li><a href="portfolio_one.html">portfolio_one</a></li>
<li><a href="portfolio_two.html">portfolio_two</a></li>
</ul>
</li>
<li><a href="blog.html">blog</a></li>
<li><a href="contact.php">contact</a></li>
</ul>
</nav>
</header>
<!-- end header -->
<!-- begin content -->
<div id="site_content">
<!-- start gallery HTML containers -->
<div id="gallery" class="content">
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
</div>
<div id="thumb-container">
<div id="thumbs" class="navigation">
<h1>Portfolio One</h1>
<ul class="thumbs noscript">
<li>
<a class="thumb" href="images/portfolio_one/1.jpg"><img src="images/portfolio_one/1_thumb.jpg" alt="one" /></a>
<div class="caption">
<div class="image-title portfolio_one">&quot;Pier by the sea, Fowey, Cornwall, UK&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_one/2.jpg"><img src="images/portfolio_one/2_thumb.jpg" alt="two" /></a>
<div class="caption">
<div class="image-title portfolio_one">&quot;Cheeky monkey and his friend - wooden rabbit&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_one/3.jpg"><img src="images/portfolio_one/3_thumb.jpg" alt="three" /></a>
<div class="caption">
<div class="image-title portfolio_one">&quot;A beautiful rose looking for the sundark&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_one/4.jpg"><img src="images/portfolio_one/4_thumb.jpg" alt="four" /></a>
<div class="caption">
<div class="image-title portfolio_one">&quot;Number 7 derailment - playroom style&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_one/5.jpg"><img src="images/portfolio_one/5_thumb.jpg" alt="five" /></a>
<div class="caption">
<div class="image-title portfolio_one">&quot;A small boat on the big ocean (Croyde, Devon, UK)&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_one/6.jpg"><img src="images/portfolio_one/6_thumb.jpg" alt="six" /></a>
<div class="caption">
<div class="image-title portfolio_one">&quot;One, two, three daisies in the grass&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_one/7.jpg"><img src="images/portfolio_one/7_thumb.jpg" alt="seven" /></a>
<div class="caption">
<div class="image-title portfolio_one">&quot;Abstract angles, dark and dark&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_one/8.jpg"><img src="images/portfolio_one/8_thumb.jpg" alt="eight" /></a>
<div class="caption">
<div class="image-title portfolio_one">&quot;Water fountain, lake and trees&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_one/9.jpg"><img src="images/portfolio_one/9_thumb.jpg" alt="nine" /></a>
<div class="caption">
<div class="image-title portfolio_one">&quot;A glimpse of dark through the trees (Malvern, UK)&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_one/10.jpg"><img src="images/portfolio_one/10_thumb.jpg" alt="ten" /></a>
<div class="caption">
<div class="image-title portfolio_one">&quot;Waves and Rocks (Croyde, Devon, UK)&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_one/2.jpg"><img src="images/portfolio_one/2_thumb.jpg" alt="two" /></a>
<div class="caption">
<div class="image-title portfolio_one">&quot;Cheeky monkey and his friend - wooden rabbit&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_one/4.jpg"><img src="images/portfolio_one/4_thumb.jpg" alt="four" /></a>
<div class="caption">
<div class="image-title portfolio_one">&quot;Number 7 derailment - playroom style&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_one/6.jpg"><img src="images/portfolio_one/6_thumb.jpg" alt="six" /></a>
<div class="caption">
<div class="image-title portfolio_one">&quot;One, two, three daisies in the grass&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_one/8.jpg"><img src="images/portfolio_one/8_thumb.jpg" alt="eight" /></a>
<div class="caption">
<div class="image-title portfolio_one">&quot;Water fountain, lake and trees&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_one/10.jpg"><img src="images/portfolio_one/10_thumb.jpg" alt="ten" /></a>
<div class="caption">
<div class="image-title portfolio_one">&quot;Waves and Rocks (Croyde, Devon, UK)&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_one/1.jpg"><img src="images/portfolio_one/1_thumb.jpg" alt="one" /></a>
<div class="caption">
<div class="image-title portfolio_one">&quot;Pier by the sea, Fowey, Cornwall, UK&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_one/3.jpg"><img src="images/portfolio_one/3_thumb.jpg" alt="three" /></a>
<div class="caption">
<div class="image-title portfolio_one">&quot;A beautiful rose looking for the sundark&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_one/5.jpg"><img src="images/portfolio_one/5_thumb.jpg" alt="five" /></a>
<div class="caption">
<div class="image-title portfolio_one">&quot;A small boat on the big ocean (Croyde, Devon, UK)&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_one/7.jpg"><img src="images/portfolio_one/7_thumb.jpg" alt="seven" /></a>
<div class="caption">
<div class="image-title portfolio_one">&quot;Abstract angles, dark and dark&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_one/9.jpg"><img src="images/portfolio_one/9_thumb.jpg" alt="nine" /></a>
<div class="caption">
<div class="image-title portfolio_one">&quot;A glimpse of dark through the trees (Malvern, UK)&quot;</div>
</div>
</li>
</ul>
</div>
<div id="controls" class="controls portfolio_one"></div>
<div id="caption" class="caption-container"></div>
<div style="clear: both;"></div>
<!-- end gallery HTML containers -->
</div>
</div>
<!-- end content -->
<!-- begin footer -->
<footer>
<p>Copyright &copy; 2012 PhotoArtWork2_reverse2. All Rights Reserved. <a href="http://www.css3templates.co.uk">Design from css3templates.co.uk</a>.</p>
<p><img src="images/twitter.png" alt="twitter" />&nbsp;<img src="images/facebook.png" alt="facebook" />&nbsp;<img src="images/rss.png" alt="rss" /></p>
</footer>
<!-- end footer -->
</div>
<!-- javascript at the bottom for fast page loading -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing-sooper.js"></script>
<script type="text/javascript" src="js/jquery.sooperfish.js"></script>
<!-- initialise sooperfish menu -->
<script type="text/javascript">
$(document).ready(function() {
$('ul.sf-menu').sooperfish();
});
</script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
// we only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '450px', 'float' : 'left'});
$('div.content').css('display', 'block');
// initially set opacity on thumbs and add additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// initialize advanced galleriffic gallery
var gallery = $('#thumbs').galleriffic({
delay: 3500,
numThumbs: 10,
preloadAhead: 10,
enableTopPager: false,
enableBottomPager: true,
maxPagesToShow: 7,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '&lsaquo; Previous Photo',
nextLinkText: 'Next Photo &rsaquo;',
nextPageLinkText: 'Next &rsaquo;',
prevPageLinkText: '&lsaquo; Prev',
enableHistory: false,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
}
});
});
</script>
</body>
</html>

275
photo-art/portfolio_two.html Normal file
View File

@@ -0,0 +1,275 @@
<!DOCTYPE HTML>
<html>
<head>
<title>PhotoArtWork2_reverse</title>
<meta name="description" content="website description" />
<meta name="keywords" content="website keywords, website keywords" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- stylesheets -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/portfolio_two.css" rel="stylesheet" type="text/css" />
<link href="css/colour.css" rel="stylesheet" type="text/css" />
<!-- modernizr enables HTML5 elements and feature detects -->
<script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
</head>
<body>
<div id="main">
<!-- begin header -->
<header>
<div id="logo"><h1>PHOTO<a href="#">ART</a>WORK 2_reverse</h1></div>
<nav>
<ul class="sf-menu" id="nav">
<li><a href="index.html">home</a></li>
<li><a href="about.html">about me</a></li>
<li class="selected"><a href="#">my portfolio</a>
<ul>
<li><a href="portfolio_one.html">portfolio_one</a></li>
<li><a href="portfolio_two.html">portfolio_two</a></li>
</ul>
</li>
<li><a href="blog.html">blog</a></li>
<li><a href="contact.php">contact</a></li>
</ul>
</nav>
</header>
<!-- end header -->
<!-- begin content -->
<div id="site_content">
<!-- start gallery HTML containers -->
<div class="navigation-container">
<div id="thumbs" class="navigation">
<a class="pageLink prev" style="visibility: hidden;" href="#" title="Previous Page"></a>
<ul class="thumbs noscript">
<li>
<a class="thumb" href="images/portfolio_two/1.jpg"><img src="images/portfolio_two/1_thumb.jpg" alt="one" /></a>
<div class="caption">
<div class="image-title portfolio_two">&quot;Pier by the sea, Fowey, Cornwall, UK&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_two/2.jpg"><img src="images/portfolio_two/2_thumb.jpg" alt="two" /></a>
<div class="caption">
<div class="image-title portfolio_two">&quot;Cheeky monkey and his friend - wooden rabbit&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_two/3.jpg"><img src="images/portfolio_two/3_thumb.jpg" alt="three" /></a>
<div class="caption">
<div class="image-title portfolio_two">&quot;Number 7 derailment - playroom style&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_two/4.jpg"><img src="images/portfolio_two/4_thumb.jpg" alt="four" /></a>
<div class="caption">
<div class="image-title portfolio_two">&quot;A beautiful rose looking for the sundark&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_two/5.jpg"><img src="images/portfolio_two/5_thumb.jpg" alt="five" /></a>
<div class="caption">
<div class="image-title portfolio_two">&quot;Waves and Rocks (Croyde, Devon, UK)&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_two/6.jpg"><img src="images/portfolio_two/6_thumb.jpg" alt="six" /></a>
<div class="caption">
<div class="image-title portfolio_two">&quot;A vase of black and white tulips&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_two/7.jpg"><img src="images/portfolio_two/7_thumb.jpg" alt="seven" /></a>
<div class="caption">
<div class="image-title portfolio_two">&quot;Abstract angles, dark and dark&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_two/8.jpg"><img src="images/portfolio_two/8_thumb.jpg" alt="eight" /></a>
<div class="caption">
<div class="image-title portfolio_two">&quot;A snowy house in winter (December, 2009)&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_two/9.jpg"><img src="images/portfolio_two/9_thumb.jpg" alt="nine" /></a>
<div class="caption">
<div class="image-title portfolio_two">&quot;One, two, three daisies in the grass&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_two/10.jpg"><img src="images/portfolio_two/10_thumb.jpg" alt="ten" /></a>
<div class="caption">
<div class="image-title portfolio_two">&quot;A small boat on the big ocean (Croyde, Devon, UK)&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_two/2.jpg"><img src="images/portfolio_two/2_thumb.jpg" alt="two" /></a>
<div class="caption">
<div class="image-title portfolio_two">&quot;Cheeky monkey and his friend - wooden rabbit&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_two/4.jpg"><img src="images/portfolio_two/4_thumb.jpg" alt="four" /></a>
<div class="caption">
<div class="image-title portfolio_two">&quot;A beautiful rose looking for the sundark&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_two/6.jpg"><img src="images/portfolio_two/6_thumb.jpg" alt="six" /></a>
<div class="caption">
<div class="image-title portfolio_two">&quot;A vase of black and white tulips&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_two/8.jpg"><img src="images/portfolio_two/8_thumb.jpg" alt="eight" /></a>
<div class="caption">
<div class="image-title portfolio_two">&quot;A snowy house in winter (December, 2009)&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_two/10.jpg"><img src="images/portfolio_two/10_thumb.jpg" alt="ten" /></a>
<div class="caption">
<div class="image-title portfolio_two">&quot;A small boat on the big ocean (Croyde, Devon, UK)&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_two/1.jpg"><img src="images/portfolio_two/1_thumb.jpg" alt="one" /></a>
<div class="caption">
<div class="image-title portfolio_two">&quot;Pier by the sea, Fowey, Cornwall, UK&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_two/3.jpg"><img src="images/portfolio_two/3_thumb.jpg" alt="three" /></a>
<div class="caption">
<div class="image-title portfolio_two">&quot;Number 7 derailment - playroom style&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_two/5.jpg"><img src="images/portfolio_two/5_thumb.jpg" alt="five" /></a>
<div class="caption">
<div class="image-title portfolio_two">&quot;Waves and Rocks (Croyde, Devon, UK)&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_two/7.jpg"><img src="images/portfolio_two/7_thumb.jpg" alt="seven" /></a>
<div class="caption">
<div class="image-title portfolio_two">&quot;Abstract angles, dark and dark&quot;</div>
</div>
</li>
<li>
<a class="thumb" href="images/portfolio_two/9.jpg"><img src="images/portfolio_two/9_thumb.jpg" alt="nine" /></a>
<div class="caption">
<div class="image-title portfolio_two">&quot;One, two, three daisies in the grass&quot;</div>
</div>
</li>
</ul>
<a class="pageLink next" style="visibility: hidden;" href="#" title="Next Page"></a>
</div>
</div>
<div class="content">
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
<div id="controls" class="controls portfolio_two"></div>
<div id="caption" class="caption-container"></div>
</div>
</div>
<!-- end gallery HTML containers -->
</div>
<!-- end content -->
<!-- begin footer -->
<footer>
<p>Copyright &copy; 2012 PhotoArtWork2_reverse. All Rights Reserved. <a href="http://www.css3templates.co.uk">Design from css3templates.co.uk</a>.</p>
<p><img src="images/twitter.png" alt="twitter" />&nbsp;<img src="images/facebook.png" alt="facebook" />&nbsp;<img src="images/rss.png" alt="rss" /></p>
</footer>
<!-- end footer -->
</div>
<!-- javascript at the bottom for fast page loading -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing-sooper.js"></script>
<script type="text/javascript" src="js/jquery.sooperfish.js"></script>
<!-- initialise sooperfish menu -->
<script type="text/javascript">
$(document).ready(function() {
$('ul.sf-menu').sooperfish();
});
</script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
// we only want these styles applied when javascript is enabled
$('div.content').css('display', 'block');
// initially set opacity on thumbs and add additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li, div.navigation a.pageLink').opacityrollover({
mouseOutOpacity: onMouseOutOpacity,
mouseOverOpacity: 1.0,
fadeSpeed: 'fast',
exemptionSelector: '.selected'
});
// initialize advanced galleriffic gallery
var gallery = $('#thumbs').galleriffic({
delay: 3500,
numThumbs: 10,
preloadAhead: 10,
enableTopPager: false,
enableBottomPager: false,
imageContainerSel: '#slideshow',
controlsContainerSel: '#controls',
captionContainerSel: '#caption',
loadingContainerSel: '#loading',
renderSSControls: true,
renderNavControls: true,
playLinkText: 'Play Slideshow',
pauseLinkText: 'Pause Slideshow',
prevLinkText: '&lsaquo; Previous Photo',
nextLinkText: 'Next Photo &rsaquo;',
nextPageLinkText: 'Next &rsaquo;',
prevPageLinkText: '&lsaquo; Prev',
enableHistory: true,
autoStart: false,
syncTransitions: true,
defaultTransitionDuration: 900,
onSlideChange: function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
// update the photo index display
this.$captionContainer.find('div.photo-index')
.html('Photo '+ (nextIndex+1) +' of '+ this.data.length);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
var prevPageLink = this.find('a.prev').css('visibility', 'hidden');
var nextPageLink = this.find('a.next').css('visibility', 'hidden');
// show appropriate next / prev page links
if (this.displayedPage > 0)
prevPageLink.css('visibility', 'visible');
var lastPage = this.getNumPages() - 1;
if (this.displayedPage < lastPage)
nextPageLink.css('visibility', 'visible');
this.fadeTo('fast', 1.0);
}
});
// event handlers for custom next / prev page links
gallery.find('a.prev').click(function(e) {
gallery.previousPage();
e.preventDefault();
});
gallery.find('a.next').click(function(e) {
gallery.nextPage();
e.preventDefault();
});
});
</script>
</body>
</html>

5
photo-art/readme.md Normal file
View File

@@ -0,0 +1,5 @@
## Project Description
* [live example](https://learning-zone.github.io/website-templates/photo-art/)
![alt text](https://github.com/learning-zone/Website-Templates/blob/master/assets/photoartwork2_reverse.png "photoartwork2_reverse")