Adding slideshow
+4
~@dikz~
nutsonlizards
Hellrose
eccato
8 posters
Page 1 of 1
Adding slideshow
I saw a really cool slideshow thing in one of the forums and I wanted to add it to my forum.
Picture:
https://2img.net/h/oi49.tinypic.com/jhwjgw.jpg
Link of the forum (where I saw it):
http://www.jhebkv.com/forum
I would really like to know how to add it.
Picture:
https://2img.net/h/oi49.tinypic.com/jhwjgw.jpg
Link of the forum (where I saw it):
http://www.jhebkv.com/forum
I would really like to know how to add it.
Re: Adding slideshow
cool, i also want to know how.
Hellrose- Forumember
- Posts : 202
Reputation : 0
Language : English
Re: Adding slideshow
I know this one.
NikkoBryan14- Forumember
- Posts : 274
Reputation : 8
Language : English
Location : Philippines
Re: Adding slideshow
this will get you started i would try to learn basic html and css
- Code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>liteAccordion - a horizontal accordion plugin for jQuery</title>
<style>
html { overflow-y: scroll }
body { font: 14px/24px 'Helvetica Neue', Arial, sans-serif; color: #333; width: 960px; margin: 30px auto 60px; background: #eee }
h1, dd { margin: 0 }
dt { font-weight: bold }
figure { display: block; width: 100%; height: 100%; margin: 0 }
figcaption { padding: 10px 15px; position: absolute; bottom: 20px; right: 30px; z-index: 3; background: black; background: rgba(0,0,0,0.7); color: white;
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px }
.options h2 { margin: 30px 0 15px; text-shadow: 1px 1px 0 white; border-bottom: 2px solid #333; padding-bottom: 5px }
.options p { width: 48%; float: left; margin: 5px 0 }
p.heading, p.reset, .output { width: 100%; float: left; clear: left }
.output { position: relative }
.output h2 a { content: ''; position: absolute; top: 30px; right: 0; font-size: 14px; font-weight: normal; color: #333; text-decoration: none }
.output h2 a:hover { text-decoration: underline }
label { display: inline-block; width: 160px }
select { width: 160px; margin-right: 20px }
input[type='text'] { width: 40px }
textarea { width: 50%; height: 100px; font-family: monospace }
section { height: 100%; width: 100%; background: white; overflow-y: scroll }
@charset 'utf-8';
/*************************************************!
*
* project: liteAccordion - a horizontal accordion plugin for jQuery
* author: Nicola Hibbert
* url: http://nicolahibbert.com/liteaccordion-v2/
* demo: http://www.nicolahibbert.com/demo/liteAccordion/
*
* Version: 2.0.1
* Copyright: (c) 2010-2011 Nicola Hibbert
* Licence: MIT
*
**************************************************/
/****************************************** Core */
.accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif }
.accordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none }
.accordion .slide > h2 {
color: black;
font-size: 16px;
font-weight: normal;
margin: 0;
z-index: 100;
position: absolute;
top: 0;
left: 0;
-webkit-transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: right top;
-moz-transform: translateX(-100%) rotate(-90deg);
-moz-transform-origin: right top;
-o-transform: translateX(-100%) rotate(-90deg);
-o-transform-origin: right top;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right top;
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion .slide > h2 span {
display: block;
padding-right: 8%;
text-align: right;
height: 90%;
margin-top: 5px;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.accordion .slide > h2 b {
display: inline-block;
position: absolute;
top: 13%;
left: 10%;
text-align: center;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion .slide > h2:hover { cursor: pointer }
.accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white }
.accordion noscript p { padding: 10px; margin: 0; background: white }
/****************************************** Basic */
.basic .slide > h2 { background: #333; color: white; line-height: 225% }
/****************************************** Dark */
.dark {
border: 9px solid #353535;
border-bottom-width: 8px;
padding: 5px 5px 6px 0;
background: #030303;
-webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.dark .slide > h2 { background: #030303; text-shadow: 0 -1px 0 #030303; line-height: 265% }
.dark .slide > h2 span { background: #353535; color: white }
.dark .slide > h2 b { background: #353535; color: #030303; text-shadow: -1px 1px 0 #5b5b5b }
.dark .slide > h2.selected span, .dark .slide > h2.selected span:hover {
background: #353535;
background: -moz-linear-gradient(left, #353535 0%, #555555 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555));
background: -webkit-linear-gradient(left, #353535 0%,#555555 100%);
background: -o-linear-gradient(left, #353535 0%,#555555 100%);
background: -ms-linear-gradient(left, #353535 0%,#555555 100%);
background: linear-gradient(left, #353535 0%,#555555 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 );
}
.dark .slide > h2.selected b {
background: #383838;
background: -moz-linear-gradient(top, #3a3a3a 0%, #363636 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#363636));
background: -webkit-linear-gradient(top, #3a3a3a 0%,#363636 100%);
background: -o-linear-gradient(top, #3a3a3a 0%,#363636 100%);
background: -ms-linear-gradient(top, #3a3a3a 0%,#363636 100%);
background: linear-gradient(top, #3a3a3a 0%,#363636 100%);
}
.dark .slide > div { background: #030303; margin-left: 5px }
/***************************************** Light */
.light {
border: 9px solid white;
border-bottom-width: 8px;
padding: 5px 5px 6px 0;
background: #a0a0a0;
-webkit-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
-moz-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
-ms-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
-o-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.light .slide > h2 { background: #a0a0a0; text-shadow: 0 -1px 0 white; line-height: 265% }
.light .slide > h2 span {
background: #fcfcfc;
background: -moz-linear-gradient(left, #fcfcfc 0%, #ededed 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fcfcfc), color-stop(100%,#ededed));
background: -webkit-linear-gradient(left, #fcfcfc 0%,#ededed 100%);
background: -o-linear-gradient(left, #fcfcfc 0%,#ededed 100%);
background: -ms-linear-gradient(left, #fcfcfc 0%,#ededed 100%);
background: linear-gradient(left, #fcfcfc 0%,#ededed 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=1 );
-webkit-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
-moz-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
-o-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
color: #909090;
}
.light .slide > h2 b { background: #ffffff; color: #909090; text-shadow: -1px 1px 0 white }
.light .slide > h2.selected span, .light .slide h2.selected span:hover, .light .slide > h2.selected b { background: #ffffff }
.light .slide > div { background: #a0a0a0; margin-left: 5px }
/**************************************** Stitch */
.stitch {
position: relative;
padding: 5px 0 5px 5px;
border: 11px solid #353535;
background: #353535;
-webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.stitch:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: -9px;
left: -9px;
background: #353535;
border-width: 9px;
-webkit-border-image: url('bg_stitch.png') 9 repeat;
-moz-border-image: url('bg_stitch.png') 9 repeat;
-o-border-image: url('bg_stitch.png') 9 repeat;
border-image: url('bg_stitch.png') 9 repeat;
}
.stitch .slide > h2 { background: #353535 }
.stitch .slide > h2 span {
height: auto;
padding-right: 5%;
color: white;
text-shadow: -1px 1px 0 #5b5b5b;
border-width: 9px;
background-image: url('bg_noise.png');
margin-top: 0;
-webkit-border-image: url('bg_stitch.png') 9 repeat;
-moz-border-image: url('bg_stitch.png') 9 repeat;
-o-border-image: url('bg_stitch.png') 9 repeat;
border-image: url('bg_stitch.png') 9 repeat;
}
.stitch .slide > h2.selected:after {
content: '';
display: block;
height: 11px;
width: 11px;
position: absolute;
bottom: -3px;
right: 38px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
border-width: 9px;
border-top: 0;
border-left: 0;
-webkit-border-image: url('bg_stitch.png') 9 repeat;
-moz-border-image: url('bg_stitch.png') 9 repeat;
-o-border-image: url('bg_stitch.png') 9 repeat;
border-image: url('bg_stitch.png') 9 repeat;
background-image: url('bg_noise.png');
}
.stitch .slide:nth-child(1) > h2 span, .stitch .slide:nth-child(1) > h2:after { background-color: #c25252 }
.stitch .slide:nth-child(2) > h2 span, .stitch .slide:nth-child(2) > h2:after { background-color: #ca9859 }
.stitch .slide:nth-child(3) > h2 span, .stitch .slide:nth-child(3) > h2:after { background-color: #96ba5f }
.stitch .slide:nth-child(4) > h2 span, .stitch .slide:nth-child(4) > h2:after { background-color: #59abb7 }
.stitch .slide:nth-child(5) > h2 span, .stitch .slide:nth-child(5) > h2:after { background-color: #bb6098 }
.stitch .slide > h2 b { top: 19%; color: white; text-shadow: 1px 1px 0 #5b5b5b }
.stitch .slide > div { margin-right: 6px }
.stitch.rounded > ol { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0 }
/*************************************** Rounded */
.rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px }
.rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px }
/******************************************** IE */
.ie .slide > h2 b { top: 42%; left: 5% }
.ie9 .slide > h2 { filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }
.ie.dark .slide > h2 b, .ie.light .slide > h2 b { top: 44% }
.ie9.dark .slide > h2.selected span, .ie9.dark .slide > h2.selected span:hover, .light .slide > h2 span { filter: none }
.ie9.stitch { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); }
.ie.stitch .slide > h2 { line-height: 265% }
.ie.stitch .slide > h2 span { height: 89%; padding-right: 8% }
.ie.stitch .slide > h2 b { top: 33% }
.ie.stitch .slide > h2.selected:after { display: none }
.ie.stitch .slide-0 > h2 span { background-color: #c25252 }
.ie.stitch .slide-1 > h2 span { background-color: #ca9859 }
.ie.stitch .slide-2 > h2 span { background-color: #96ba5f }
.ie.stitch .slide-3 > h2 span { background-color: #59abb7 }
.ie.stitch .slide-4 > h2 span { background-color: #bb6098 }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://nicolahibbert.com/demo/liteAccordion/js/jquery.easing.1.3.js"></script>
<script src="http://nicolahibbert.com/demo/liteAccordion/js/liteaccordion.jquery.js"></script>
<!--[if lt IE 9]>
<script>
document.createElement('figure');
document.createElement('figcaption');
</script>
<![endif]-->
<!--[if lt IE 8]>
<script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
<![endif]-->
</head>
<body>
<div id="demo">
<ol>
<li name="one">
<h2><span>Slide One</span></h2>
<div>
<figure>
<img src="img-demo/1.jpg" alt="image" />
<figcaption>Assassini!</figcaption>
</figure>
</div>
</li>
<li name="two">
<h2><span>Slide Two</span></h2>
<div>
<figure>
<img src="img-demo/2.jpg" alt="image" />
<figcaption>Couldn't find an image of a Khajit thief! Fail!</figcaption>
</figure>
</div>
</li>
<li name="three">
<h2><span>Slide Three</span></h2>
<div>
<figure>
<img src="img-demo/3.jpg" alt="image" />
<figcaption>That's one angry looking red dude.</figcaption>
</figure>
</div>
</li>
<li name="four">
<h2><span>Slide Four</span></h2>
<div>
<figure>
<img src="img-demo/4.jpg" alt="image" />
<figcaption>Was fun for a couple of hours or so...</figcaption>
</figure>
</div>
</li>
<li name="five">
<h2><span>Slide Five</span></h2>
<div>
<figure>
<img src="img-demo/5.jpg" alt="image" />
<figcaption>Not as good as Hot Pursuit.</figcaption>
</figure>
</div>
</li>
</ol>
<noscript>
<p>Please enable JavaScript to get the full experience.</p>
</noscript>
</div>
<script src="http://nicolahibbert.com/demo/liteAccordion/js/demosuite.js"></script>
</body>
</html>
Re: Adding slideshow
nutsonlizards wrote:this will get you started i would try to learn basic html and css
- Code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>liteAccordion - a horizontal accordion plugin for jQuery</title>
<style>
html { overflow-y: scroll }
body { font: 14px/24px 'Helvetica Neue', Arial, sans-serif; color: #333; width: 960px; margin: 30px auto 60px; background: #eee }
h1, dd { margin: 0 }
dt { font-weight: bold }
figure { display: block; width: 100%; height: 100%; margin: 0 }
figcaption { padding: 10px 15px; position: absolute; bottom: 20px; right: 30px; z-index: 3; background: black; background: rgba(0,0,0,0.7); color: white;
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px }
.options h2 { margin: 30px 0 15px; text-shadow: 1px 1px 0 white; border-bottom: 2px solid #333; padding-bottom: 5px }
.options p { width: 48%; float: left; margin: 5px 0 }
p.heading, p.reset, .output { width: 100%; float: left; clear: left }
.output { position: relative }
.output h2 a { content: ''; position: absolute; top: 30px; right: 0; font-size: 14px; font-weight: normal; color: #333; text-decoration: none }
.output h2 a:hover { text-decoration: underline }
label { display: inline-block; width: 160px }
select { width: 160px; margin-right: 20px }
input[type='text'] { width: 40px }
textarea { width: 50%; height: 100px; font-family: monospace }
section { height: 100%; width: 100%; background: white; overflow-y: scroll }
@charset 'utf-8';
/*************************************************!
*
* project: liteAccordion - a horizontal accordion plugin for jQuery
* author: Nicola Hibbert
* url: http://nicolahibbert.com/liteaccordion-v2/
* demo: http://www.nicolahibbert.com/demo/liteAccordion/
*
* Version: 2.0.1
* Copyright: (c) 2010-2011 Nicola Hibbert
* Licence: MIT
*
**************************************************/
/****************************************** Core */
.accordion { text-align: left; font: 'Helvetica Neue', Verdana, Arial, sans-serif }
.accordion > ol { position: relative; overflow: hidden; height: 100%; margin: 0; padding: 0; list-style-type: none }
.accordion .slide > h2 {
color: black;
font-size: 16px;
font-weight: normal;
margin: 0;
z-index: 100;
position: absolute;
top: 0;
left: 0;
-webkit-transform: translateX(-100%) rotate(-90deg);
-webkit-transform-origin: right top;
-moz-transform: translateX(-100%) rotate(-90deg);
-moz-transform-origin: right top;
-o-transform: translateX(-100%) rotate(-90deg);
-o-transform-origin: right top;
transform: translateX(-100%) rotate(-90deg);
transform-origin: right top;
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.accordion .slide > h2 span {
display: block;
padding-right: 8%;
text-align: right;
height: 90%;
margin-top: 5px;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.accordion .slide > h2 b {
display: inline-block;
position: absolute;
top: 13%;
left: 10%;
text-align: center;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.accordion .slide > h2:hover { cursor: pointer }
.accordion .slide > div { height: 100%; position: absolute; top: 0; z-index: 10; overflow: hidden; background: white }
.accordion noscript p { padding: 10px; margin: 0; background: white }
/****************************************** Basic */
.basic .slide > h2 { background: #333; color: white; line-height: 225% }
/****************************************** Dark */
.dark {
border: 9px solid #353535;
border-bottom-width: 8px;
padding: 5px 5px 6px 0;
background: #030303;
-webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-ms-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.dark .slide > h2 { background: #030303; text-shadow: 0 -1px 0 #030303; line-height: 265% }
.dark .slide > h2 span { background: #353535; color: white }
.dark .slide > h2 b { background: #353535; color: #030303; text-shadow: -1px 1px 0 #5b5b5b }
.dark .slide > h2.selected span, .dark .slide > h2.selected span:hover {
background: #353535;
background: -moz-linear-gradient(left, #353535 0%, #555555 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555));
background: -webkit-linear-gradient(left, #353535 0%,#555555 100%);
background: -o-linear-gradient(left, #353535 0%,#555555 100%);
background: -ms-linear-gradient(left, #353535 0%,#555555 100%);
background: linear-gradient(left, #353535 0%,#555555 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 );
}
.dark .slide > h2.selected b {
background: #383838;
background: -moz-linear-gradient(top, #3a3a3a 0%, #363636 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#363636));
background: -webkit-linear-gradient(top, #3a3a3a 0%,#363636 100%);
background: -o-linear-gradient(top, #3a3a3a 0%,#363636 100%);
background: -ms-linear-gradient(top, #3a3a3a 0%,#363636 100%);
background: linear-gradient(top, #3a3a3a 0%,#363636 100%);
}
.dark .slide > div { background: #030303; margin-left: 5px }
/***************************************** Light */
.light {
border: 9px solid white;
border-bottom-width: 8px;
padding: 5px 5px 6px 0;
background: #a0a0a0;
-webkit-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
-moz-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
-ms-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
-o-box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
box-shadow: -1px -1px 0 #c0c0c0, 1px 1px 0 #c0c0c0, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.light .slide > h2 { background: #a0a0a0; text-shadow: 0 -1px 0 white; line-height: 265% }
.light .slide > h2 span {
background: #fcfcfc;
background: -moz-linear-gradient(left, #fcfcfc 0%, #ededed 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#fcfcfc), color-stop(100%,#ededed));
background: -webkit-linear-gradient(left, #fcfcfc 0%,#ededed 100%);
background: -o-linear-gradient(left, #fcfcfc 0%,#ededed 100%);
background: -ms-linear-gradient(left, #fcfcfc 0%,#ededed 100%);
background: linear-gradient(left, #fcfcfc 0%,#ededed 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#ededed',GradientType=1 );
-webkit-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
-moz-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
-o-box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
box-shadow: -1px -1px 0 #909090 inset, 1px 1px 0 #909090 inset;
color: #909090;
}
.light .slide > h2 b { background: #ffffff; color: #909090; text-shadow: -1px 1px 0 white }
.light .slide > h2.selected span, .light .slide h2.selected span:hover, .light .slide > h2.selected b { background: #ffffff }
.light .slide > div { background: #a0a0a0; margin-left: 5px }
/**************************************** Stitch */
.stitch {
position: relative;
padding: 5px 0 5px 5px;
border: 11px solid #353535;
background: #353535;
-webkit-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
-o-box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
box-shadow: 0 -1px 0 #5b5b5b inset, 0 5px 15px rgba(0, 0, 0, 0.4);
}
.stitch:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: -9px;
left: -9px;
background: #353535;
border-width: 9px;
-webkit-border-image: url('bg_stitch.png') 9 repeat;
-moz-border-image: url('bg_stitch.png') 9 repeat;
-o-border-image: url('bg_stitch.png') 9 repeat;
border-image: url('bg_stitch.png') 9 repeat;
}
.stitch .slide > h2 { background: #353535 }
.stitch .slide > h2 span {
height: auto;
padding-right: 5%;
color: white;
text-shadow: -1px 1px 0 #5b5b5b;
border-width: 9px;
background-image: url('bg_noise.png');
margin-top: 0;
-webkit-border-image: url('bg_stitch.png') 9 repeat;
-moz-border-image: url('bg_stitch.png') 9 repeat;
-o-border-image: url('bg_stitch.png') 9 repeat;
border-image: url('bg_stitch.png') 9 repeat;
}
.stitch .slide > h2.selected:after {
content: '';
display: block;
height: 11px;
width: 11px;
position: absolute;
bottom: -3px;
right: 38px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
border-width: 9px;
border-top: 0;
border-left: 0;
-webkit-border-image: url('bg_stitch.png') 9 repeat;
-moz-border-image: url('bg_stitch.png') 9 repeat;
-o-border-image: url('bg_stitch.png') 9 repeat;
border-image: url('bg_stitch.png') 9 repeat;
background-image: url('bg_noise.png');
}
.stitch .slide:nth-child(1) > h2 span, .stitch .slide:nth-child(1) > h2:after { background-color: #c25252 }
.stitch .slide:nth-child(2) > h2 span, .stitch .slide:nth-child(2) > h2:after { background-color: #ca9859 }
.stitch .slide:nth-child(3) > h2 span, .stitch .slide:nth-child(3) > h2:after { background-color: #96ba5f }
.stitch .slide:nth-child(4) > h2 span, .stitch .slide:nth-child(4) > h2:after { background-color: #59abb7 }
.stitch .slide:nth-child(5) > h2 span, .stitch .slide:nth-child(5) > h2:after { background-color: #bb6098 }
.stitch .slide > h2 b { top: 19%; color: white; text-shadow: 1px 1px 0 #5b5b5b }
.stitch .slide > div { margin-right: 6px }
.stitch.rounded > ol { -webkit-border-radius: 0; -moz-border-radius: 0; -ms-border-radius: 0; border-radius: 0 }
/*************************************** Rounded */
.rounded, .rounded > ol { -webkit-border-radius: 6px; -moz-border-radius: 6px; -ms-border-radius: 6px; border-radius: 6px }
.rounded .slide > h2 span { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px }
/******************************************** IE */
.ie .slide > h2 b { top: 42%; left: 5% }
.ie9 .slide > h2 { filter: none; -ms-transform: translateX(-100%) rotate(-90deg); -ms-transform-origin: right top }
.ie.dark .slide > h2 b, .ie.light .slide > h2 b { top: 44% }
.ie9.dark .slide > h2.selected span, .ie9.dark .slide > h2.selected span:hover, .light .slide > h2 span { filter: none }
.ie9.stitch { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4); }
.ie.stitch .slide > h2 { line-height: 265% }
.ie.stitch .slide > h2 span { height: 89%; padding-right: 8% }
.ie.stitch .slide > h2 b { top: 33% }
.ie.stitch .slide > h2.selected:after { display: none }
.ie.stitch .slide-0 > h2 span { background-color: #c25252 }
.ie.stitch .slide-1 > h2 span { background-color: #ca9859 }
.ie.stitch .slide-2 > h2 span { background-color: #96ba5f }
.ie.stitch .slide-3 > h2 span { background-color: #59abb7 }
.ie.stitch .slide-4 > h2 span { background-color: #bb6098 }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://nicolahibbert.com/demo/liteAccordion/js/jquery.easing.1.3.js"></script>
<script src="http://nicolahibbert.com/demo/liteAccordion/js/liteaccordion.jquery.js"></script>
<!--[if lt IE 9]>
<script>
document.createElement('figure');
document.createElement('figcaption');
</script>
<![endif]-->
<!--[if lt IE 8]>
<script src="http://cdnjs.cloudflare.com/ajax/libs/json2/20110223/json2.js"></script>
<![endif]-->
</head>
<body>
<div id="demo">
<ol>
<li name="one">
<h2><span>Slide One</span></h2>
<div>
<figure>
<img src="img-demo/1.jpg" alt="image" />
<figcaption>Assassini!</figcaption>
</figure>
</div>
</li>
<li name="two">
<h2><span>Slide Two</span></h2>
<div>
<figure>
<img src="img-demo/2.jpg" alt="image" />
<figcaption>Couldn't find an image of a Khajit thief! Fail!</figcaption>
</figure>
</div>
</li>
<li name="three">
<h2><span>Slide Three</span></h2>
<div>
<figure>
<img src="img-demo/3.jpg" alt="image" />
<figcaption>That's one angry looking red dude.</figcaption>
</figure>
</div>
</li>
<li name="four">
<h2><span>Slide Four</span></h2>
<div>
<figure>
<img src="img-demo/4.jpg" alt="image" />
<figcaption>Was fun for a couple of hours or so...</figcaption>
</figure>
</div>
</li>
<li name="five">
<h2><span>Slide Five</span></h2>
<div>
<figure>
<img src="img-demo/5.jpg" alt="image" />
<figcaption>Not as good as Hot Pursuit.</figcaption>
</figure>
</div>
</li>
</ol>
<noscript>
<p>Please enable JavaScript to get the full experience.</p>
</noscript>
</div>
<script src="http://nicolahibbert.com/demo/liteAccordion/js/demosuite.js"></script>
</body>
</html>
Well, you are a good learner thank's a lot. Keep it up.
Re: Adding slideshow
well i could spend hours going thought it but this way you can teach your self there loads of sites on the net that will help you and it was just easier lol its not completely set up so there still work to be done also i would host the scripts on your forum
when you host the scripts you will notice you can change the settings the theme etc..
here the part to look out for
here part of the script which been edited
when you host the scripts you will notice you can change the settings the theme etc..
here the part to look out for
- Code:
var LiteAccordion = function(elem, options) {
var defaults = {
containerWidth : 960, // fixed (px)
containerHeight : 320, // fixed (px)
headerWidth: 48, // fixed (px)
activateOn : 'click', // click or mouseover
firstSlide : 1, // displays slide (n) on page load
slideSpeed : 800, // slide animation speed
onTriggerSlide : function() {}, // callback on slide activate
onSlideAnimComplete : function() {}, // callback on slide anim complete
autoPlay : false, // automatically cycle through slides
pauseOnHover : false, // pause on hover
cycleSpeed : 6000, // time between slide cycles
easing : 'swing', // custom easing function
theme : 'basic', // basic, dark, light, or stitch
rounded : false, // square or rounded corners
enumerateSlides : false, // put numbers on slides
linkable : false // link slides via hash
},
here part of the script which been edited
- Code:
;(function($) {
var LiteAccordion = function(elem, options) {
var defaults = {
containerWidth : 960, // fixed (px)
containerHeight : 320, // fixed (px)
headerWidth: 48, // fixed (px)
activateOn : 'mouseover', // click or mouseover
firstSlide : 1, // displays slide (n) on page load
slideSpeed : 800, // slide animation speed
onTriggerSlide : function() {}, // callback on slide activate
onSlideAnimComplete : function() {}, // callback on slide anim complete
autoPlay : true, // automatically cycle through slides
pauseOnHover : false, // pause on hover
cycleSpeed : 6000, // time between slide cycles
easing : 'swing', // custom easing function
theme : 'light', // basic, dark, light, or stitch
rounded : false, // square or rounded corners
enumerateSlides : false, // put numbers on slides
linkable : false // link slides via hash
},
Last edited by nutsonlizards on May 12th 2012, 6:23 pm; edited 1 time in total (Reason for editing : added more info)
Re: Adding slideshow
hello can u tell me how u made the place down there where can see whos online and stuff to center please
Re: Adding slideshow
nutsonlizards wrote:well i could spend hours going thought it but this way you can teach your self there loads of sites on the net that will help you and it was just easier lol its not completely set up so there still work to be done also i would host the scripts on your forum
when you host the scripts you will notice you can change the settings the theme etc..
here the part to look out for
- Code:
var LiteAccordion = function(elem, options) {
var defaults = {
containerWidth : 960, // fixed (px)
containerHeight : 320, // fixed (px)
headerWidth: 48, // fixed (px)
activateOn : 'click', // click or mouseover
firstSlide : 1, // displays slide (n) on page load
slideSpeed : 800, // slide animation speed
onTriggerSlide : function() {}, // callback on slide activate
onSlideAnimComplete : function() {}, // callback on slide anim complete
autoPlay : false, // automatically cycle through slides
pauseOnHover : false, // pause on hover
cycleSpeed : 6000, // time between slide cycles
easing : 'swing', // custom easing function
theme : 'basic', // basic, dark, light, or stitch
rounded : false, // square or rounded corners
enumerateSlides : false, // put numbers on slides
linkable : false // link slides via hash
},
here part of the script which been edited
- Code:
;(function($) {
var LiteAccordion = function(elem, options) {
var defaults = {
containerWidth : 960, // fixed (px)
containerHeight : 320, // fixed (px)
headerWidth: 48, // fixed (px)
activateOn : 'mouseover', // click or mouseover
firstSlide : 1, // displays slide (n) on page load
slideSpeed : 800, // slide animation speed
onTriggerSlide : function() {}, // callback on slide activate
onSlideAnimComplete : function() {}, // callback on slide anim complete
autoPlay : true, // automatically cycle through slides
pauseOnHover : false, // pause on hover
cycleSpeed : 6000, // time between slide cycles
easing : 'swing', // custom easing function
theme : 'light', // basic, dark, light, or stitch
rounded : false, // square or rounded corners
enumerateSlides : false, // put numbers on slides
linkable : false // link slides via hash
},
and where would this go under?
Re: Adding slideshow
they are just part of the script so you no what script to look at to do the changes ie theme as so on
here's the full script
- Code:
/*************************************************!
*
* project: liteAccordion - a horizontal accordion plugin for jQuery
* author: Nicola Hibbert
* url: http://nicolahibbert.com/liteaccordion-v2/
* demo: http://www.nicolahibbert.com/demo/liteAccordion/
*
* Version: 2.0.2
* Copyright: (c) 2010-2011 Nicola Hibbert
* Licence: MIT
*
**************************************************/
;(function($) {
var LiteAccordion = function(elem, options) {
var defaults = {
containerWidth : 960, // fixed (px)
containerHeight : 320, // fixed (px)
headerWidth: 48, // fixed (px)
activateOn : 'click', // click or mouseover
firstSlide : 1, // displays slide (n) on page load
slideSpeed : 800, // slide animation speed
onTriggerSlide : function() {}, // callback on slide activate
onSlideAnimComplete : function() {}, // callback on slide anim complete
autoPlay : false, // automatically cycle through slides
pauseOnHover : false, // pause on hover
cycleSpeed : 6000, // time between slide cycles
easing : 'swing', // custom easing function
theme : 'basic', // basic, dark, light, or stitch
rounded : false, // square or rounded corners
enumerateSlides : false, // put numbers on slides
linkable : false // link slides via hash
},
// merge defaults with options in new settings object
settings = $.extend({}, defaults, options),
// 'globals'
slides = elem.children('ol').children('li'),
header = slides.children(':first-child'),
slideLen = slides.length,
slideWidth = settings.containerWidth - slideLen * settings.headerWidth,
// public methods
methods = {
// start elem animation
play : function(index) {
var next = core.nextSlide(index && index);
if (core.playing) return;
// start autoplay
core.playing = setInterval(function() {
header.eq(next()).trigger('click.liteAccordion');
}, settings.cycleSpeed);
},
// stop elem animation
stop : function() {
clearInterval(core.playing);
core.playing = 0;
},
// trigger next slide
next : function() {
methods.stop();
header.eq(core.currentSlide === slideLen - 1 ? 0 : core.currentSlide + 1).trigger('click.liteAccordion');
},
// trigger previous slide
prev : function() {
methods.stop();
header.eq(core.currentSlide - 1).trigger('click.liteAccordion');
},
// destroy plugin instance
destroy : function() {
// stop autoplay
methods.stop();
// remove hashchange event bound to window
$(window).unbind('.liteAccordion');
// remove generated styles, classes, data, events
elem
.attr('style', '')
.removeClass('accordion basic dark light stitch')
.removeData('liteAccordion')
.unbind('.liteAccordion')
.find('li > :first-child')
.unbind('.liteAccordion')
.filter('.selected')
.removeClass('selected')
.end()
.find('b')
.remove();
slides
.removeClass('slide')
.children()
.attr('style', '');
},
// poke around the internals (NOT CHAINABLE)
debug : function() {
return {
elem : elem,
defaults : defaults,
settings : settings,
methods : methods,
core : core
};
}
},
// core utility and animation methods
core = {
// set style properties
setStyles : function() {
// set container heights, widths, theme & corner style
elem
.width(settings.containerWidth)
.height(settings.containerHeight)
.addClass('accordion')
.addClass(settings.rounded && 'rounded')
.addClass(settings.theme);
// set tab width, height and selected class
slides
.addClass('slide')
.children(':first-child')
.width(settings.containerHeight)
.height(settings.headerWidth)
.eq(settings.firstSlide - 1)
.addClass('selected');
// set initial positions for each slide
header.each(function(index) {
var $this = $(this),
left = index * settings.headerWidth,
margin = header.first().next(),
offset = parseInt(margin.css('marginLeft'), 10) || parseInt(margin.css('marginRight'), 10) || 0;
if (index >= settings.firstSlide) left += slideWidth;
$this
.css('left', left)
.next()
.width(slideWidth - offset)
.css({ left : left, paddingLeft : settings.headerWidth });
// add number to bottom of tab
settings.enumerateSlides && $this.append('<b>' + (index + 1) + '</b>');
});
},
// bind click and mouseover events
bindEvents : function() {
if (settings.activateOn === 'click') {
header.bind('click.liteAccordion', core.triggerSlide);
} else if (settings.activateOn === 'mouseover') {
header.bind({
'mouseover.liteAccordion' : core.triggerSlide,
'click.liteAccordion' : core.triggerSlide
});
}
// pause on hover (can't use custom events with $.hover())
if (settings.pauseOnHover && settings.autoPlay) {
elem.bind('mouseover.liteAccordion', function() {
core.playing && methods.stop();
}).bind('mouseout.liteAccordion', function() {
!core.playing && methods.play(core.currentSlide);
});
}
},
linkable : function() {
var cacheSlideNames = (function() {
var slideNames = [];
slides.each(function() {
if ($(this).attr('name')) slideNames.push(($(this).attr('name')).toLowerCase());
});
// memoize
return cacheSlideNames = slideNames;
})();
var triggerHash = function(e) {
var index;
if (e.type === 'load' && !window.location.hash) return;
if (e.type === 'hashchange' && core.playing) return;
index = $.inArray((window.location.hash.slice(1)).toLowerCase(), cacheSlideNames);
if (index > -1 && index < cacheSlideNames.length) header.eq(index).trigger('click.liteAccordion');
};
$(window).bind({
'hashchange.liteAccordion' : triggerHash,
'load.liteAccordion' : triggerHash
});
},
// counter for autoPlay (zero index firstSlide on init)
currentSlide : settings.firstSlide - 1,
// next slide index
nextSlide : function(index) {
var next = index + 1 || core.currentSlide + 1;
// closure
return function() {
return next++ % slideLen;
};
},
// holds interval counter
playing : 0,
// animates left and right groups of slides
// side: denotes left side
animSlideGroup : function(index, next, side) {
var filterExpr = side ? ':lt(' + (index + 1) + ')' : ':gt(' + index + ')';
slides
.filter(filterExpr)
.each(function() {
var $this = $(this),
slideIndex = slides.index($this);
$this
.children()
.stop(true)
.animate({
left : (side ? 0 : slideWidth) + slideIndex * settings.headerWidth
},
settings.slideSpeed,
settings.easing,
function() {
// flag ensures that fn is only called one time per triggerSlide
if (!core.slideAnimCompleteFlag) {
settings.onSlideAnimComplete.call(next);
core.slideAnimCompleteFlag = true;
}
});
});
},
slideAnimCompleteFlag : false,
// trigger slide animation
triggerSlide : function(e) {
var $this = $(this),
index = header.index($this),
next = $this.next();
// update core.currentSlide
core.currentSlide = index;
// reset onSlideAnimComplete callback flag
core.slideAnimCompleteFlag = false;
// remove, then add selected class
header.removeClass('selected').filter($this).addClass('selected');
// reset current slide index in core.nextSlide closure
if (e.originalEvent && settings.autoPlay) {
methods.stop();
methods.play(index);
}
// set location.hash
if (settings.linkable && !core.playing) window.location.hash = $this.parent().attr('name');
// trigger callback in context of sibling div
settings.onTriggerSlide.call(next);
// animate left & right groups
core.animSlideGroup(index, next, true);
core.animSlideGroup(index, next);
},
ieClass : function() {
var version = +($.browser.version).charAt(0);
if (version < 7) methods.destroy();
if (version === 7 || version === 8) {
slides.each(function(index) {
$(this).addClass('slide-' + index);
});
}
elem.addClass('ie ie' + version);
},
init : function() {
// test for ie
if ($.browser.msie) core.ieClass();
// init styles and events
core.setStyles();
core.bindEvents();
// check slide speed is not faster than cycle speed
if (settings.cycleSpeed < settings.slideSpeed) settings.cycleSpeed = settings.slideSpeed;
// init hash links
if (settings.linkable && 'onhashchange' in window) core.linkable();
// init autoplay
settings.autoPlay && methods.play();
}
};
// init plugin
core.init();
// expose methods
return methods;
};
$.fn.liteAccordion = function(method) {
var elem = this,
instance = elem.data('liteAccordion');
// if creating a new instance
if (typeof method === 'object' || !method) {
return elem.each(function() {
var liteAccordion;
// if plugin already instantiated, return
if (instance) return;
// otherwise create a new instance
liteAccordion = new LiteAccordion(elem, method);
elem.data('liteAccordion', liteAccordion);
});
// otherwise, call method on current instance
} else if (typeof method === 'string' && instance[method]) {
// debug method isn't chainable b/c we need the debug object to be returned
if (method === 'debug') {
return instance[method].call(elem);
} else { // the rest of the methods are chainable though
instance[method].call(elem);
return elem;
}
}
};
})(jQuery);
Last edited by nutsonlizards on May 13th 2012, 2:08 am; edited 1 time in total
Re: Adding slideshow
thanks for that!!!!!
aditijain- New Member
- Posts : 20
Reputation : 1
Language : english
Re: Adding slideshow
well at a guess you put the css in your forum speed sheet ? the example was for a html page so you would need to remove some of the css or there is a easier way by simple setting it up on a html page and adding it to you homepage via iframe code
i put the iframe in a div for two reason's to center it and also so you can give a id to add css if need
i would remove this part of the css in my example because its not really need
- Code:
<div id:"slider" align=center style="margin: 0 auto"><iframe src="link of -slider goes here " width="970" height="350"frameborder="0"></iframe></div>
i put the iframe in a div for two reason's to center it and also so you can give a id to add css if need
i would remove this part of the css in my example because its not really need
- Code:
html { overflow-y: scroll }
body { font: 14px/24px 'Helvetica Neue', Arial, sans-serif; color: #333; width: 960px; margin: 30px auto 60px; background: #eee }
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum