Mohammad-tashi
شنبه 11 بهمن 1393, 10:06 صبح
باسلام وعرض احترام
بنده در یک صفحه از سایتم از wowslidesho استفاده کردم حالا میخام روش یک من کار کنم ... چجوری انجام بدم ؟
کد html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>جنگ هنر </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="جنگ هنر, WOW Slider, Javascript Fade Slideshow, Javascript Gallery Slideshow" />
<meta name="description" content="جنگ هنر created with WOW Slider, a free wizard program that helps you easily generate beautiful web slideshow" />
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<body style="background-color:#d7d7d7">
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li> <img src="data1/images/koala.jpg" alt="Koala" title="Koala" id="wows1_0"/></li>
<li><img src="data1/images/lighthouse.jpg" alt="Lighthouse" title="Lighthouse" id="wows1_1"/></li>
<li><img src="data1/images/penguins.jpg" alt="Penguins" title="Penguins" id="wows1_2"/></li>
<li><img src="data1/images/tulips.jpg" alt="Tulips" title="Tulips" id="wows1_3"/></li>
</ul>
</div>
<div class="ws_bullets">
<div>
<a href="#" title="Koala"><img src="data1/tooltips/koala.jpg" alt="Koala"/>1
</a>
<a href="#" title="Lighthouse"><img src="data1/tooltips/lighthouse.jpg" alt="Lighthouse"/>2</a>
<a href="#" title="Penguins"><img src="data1/tooltips/penguins.jpg" alt="Penguins"/>3</a>
<a href="#" title="Tulips"><img src="data1/tooltips/tulips.jpg" alt="Tulips"/>4</a>
</div></div>
<a class="wsl" href="http://wowslider.com">Javascript Picture Slideshow by WOWSlider.com v2.9</a>
<div class="ws_shadow"></div>
</div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</body>
</html>
inam css
/*
* generated by WOW Slider 2.9
* template Numeric
*/
#wowslider-container1 {
zoom: 1;
position: relative;
max-width:500px;
margin:5px auto 5px;
z-index:90;
border:none;
text-align:left; /* reset align=center */
}
* html #wowslider-container1{ width:500px }
#wowslider-container1 .ws_images ul{
position:relative;
width: 10000%;
height:auto;
left:0;
list-style:none;
margin:0;
padding:0;
border-spacing:0;
overflow: visible;
/*table-layout:fixed;*/
}
#wowslider-container1 .ws_images ul li{
width:1%;
line-height:0; /*opera*/
float:left;
font-size:0;
padding:0 0 0 0 !important;
margin:0 0 0 0 !important;
}
#wowslider-container1 .ws_images{
position: relative;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
}
#wowslider-container1 .ws_images a{
width:100%;
display:block;
color:transparent;
}
#wowslider-container1 img{
max-width: none !important;
}
#wowslider-container1 .ws_images img{
width:100%;
border:none 0;
max-width: none;
padding:0;
}
#wowslider-container1 a{
text-decoration: none;
outline: none;
border: none;
}
#wowslider-container1 .ws_bullets {
font-size: 0px;
float: left;
position:absolute;
z-index:70;
}
#wowslider-container1 .ws_bullets div{
position:relative;
float:left;
}
#wowslider-container1 a.wsl{
display:none;
}
#wowslider-container1 .ws_bullets {
padding: 10px;
}
#wowslider-container1 .ws_bullets a {
font:14px/32px Arial,Helvetica,sans-serif;
color:#3D3D3D;
text-align:center;
margin-left:-3px;
width:32px;
height:32px;
background: url(./bullet.png) left top;
float: left;
position:relative;
}
#wowslider-container1 .ws_bullets a.ws_selbull, #wowslider-container1 .ws_bullets a:hover{
background-position: right top;
}
#wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev {
position:absolute;
display:block;
top:50%;
margin-top:-21px;
z-index:60;
height: 43px;
width: 29px;
background-image: url(./arrows.png);
}
#wowslider-container1 a.ws_next{
background-position: 100% 0;
right:0px;
}
#wowslider-container1 a.ws_prev {
left:0px;
background-position: 0 0;
}
#wowslider-container1 a.ws_next:hover{
background-position: 100% 100%;
}
#wowslider-container1 a.ws_prev:hover {
background-position: 0 100%;
}
/* bottom center */
#wowslider-container1 .ws_bullets {
top: 5px;
right: 0px;
}
#wowslider-container1 .ws-title{
position: absolute;
bottom:15%;
left: 0px;
margin-right:5px;
z-index: 50;
padding:12px;
color: #3D3D3D;
text-transform:uppercase;
background:#fff;
font-family: Arial,Helvetica,sans-serif;
font-size: 18px;
-moz-border-radius:0 5px 5px 0;
border-radius:0 5px 5px 0;
opacity:0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opa city=80);
}
#wowslider-container1 .ws-title div{
padding-top:5px;
font-size: 12px;
text-transform:none;
}
#wowslider-container1 .ws_images ul{
animation: wsBasic 76.5s infinite;
-moz-animation: wsBasic 76.5s infinite;
-webkit-animation: wsBasic 76.5s infinite;
}
@keyframes wsBasic{0%{left:-0%} 29.41%{left:-0%} 33.33%{left:-100%} 62.75%{left:-100%} 66.67%{left:-200%} 96.08%{left:-200%} }
@-moz-keyframes wsBasic{0%{left:-0%} 29.41%{left:-0%} 33.33%{left:-100%} 62.75%{left:-100%} 66.67%{left:-200%} 96.08%{left:-200%} }
@-webkit-keyframes wsBasic{0%{left:-0%} 29.41%{left:-0%} 33.33%{left:-100%} 62.75%{left:-100%} 66.67%{left:-200%} 96.08%{left:-200%} }
#wowslider-container1 .ws_shadow{
background-image: url(./bg.png);
background-size:100%;
position:absolute;
z-index: -1;
left:-1%;
top:-2.5%;
width:102%;
height:105%;
}
* html #wowslider-container1 .ws_shadow{/*ie6*/
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader( src='engine1/bg.png', sizingMethod='scale');
}
*+html #wowslider-container1 .ws_shadow{/*ie7*/
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader( src='engine1/bg.png', sizingMethod='scale');
}
#wowslider-container1 .ws_bullets a img{
text-indent:0;
display:block;
top:25px;
left:-60px;
visibility:hidden;
position:absolute;
-moz-box-shadow: 0 0 5px #3D3D3D;
box-shadow: 0 0 5px #3D3D3D;
border: 5px solid #ffffff;
max-width:none;
}
#wowslider-container1 .ws_bullets a:hover img{
visibility:visible;
}
#wowslider-container1 .ws_bulframe div div{
height:48px;
overflow:visible;
position:relative;
}
#wowslider-container1 .ws_bulframe div {
left:0;
overflow:hidden;
position:relative;
width:120px;
background-color:#ffffff;
}
#wowslider-container1 .ws_bullets .ws_bulframe{
display:none;
top:35px;
overflow:visible;
position:absolute;
cursor:pointer;
-moz-box-shadow: 0 0 5px #3D3D3D;
box-shadow: 0 0 5px #3D3D3D;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border: 5px solid #ffffff;
}
#wowslider-container1 .ws_bulframe span{
display:block;
position:absolute;
top:-17px;
margin-left:2px;
left:60px;
background:url(./triangle.png);
width:20px;
height:12px;
}
من میخام روی اسلاید شو یه دکمه اینتر بذارم که بره تو سایت اصلی
بنده در یک صفحه از سایتم از wowslidesho استفاده کردم حالا میخام روش یک من کار کنم ... چجوری انجام بدم ؟
کد html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>جنگ هنر </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="جنگ هنر, WOW Slider, Javascript Fade Slideshow, Javascript Gallery Slideshow" />
<meta name="description" content="جنگ هنر created with WOW Slider, a free wizard program that helps you easily generate beautiful web slideshow" />
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
</head>
<body style="background-color:#d7d7d7">
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li> <img src="data1/images/koala.jpg" alt="Koala" title="Koala" id="wows1_0"/></li>
<li><img src="data1/images/lighthouse.jpg" alt="Lighthouse" title="Lighthouse" id="wows1_1"/></li>
<li><img src="data1/images/penguins.jpg" alt="Penguins" title="Penguins" id="wows1_2"/></li>
<li><img src="data1/images/tulips.jpg" alt="Tulips" title="Tulips" id="wows1_3"/></li>
</ul>
</div>
<div class="ws_bullets">
<div>
<a href="#" title="Koala"><img src="data1/tooltips/koala.jpg" alt="Koala"/>1
</a>
<a href="#" title="Lighthouse"><img src="data1/tooltips/lighthouse.jpg" alt="Lighthouse"/>2</a>
<a href="#" title="Penguins"><img src="data1/tooltips/penguins.jpg" alt="Penguins"/>3</a>
<a href="#" title="Tulips"><img src="data1/tooltips/tulips.jpg" alt="Tulips"/>4</a>
</div></div>
<a class="wsl" href="http://wowslider.com">Javascript Picture Slideshow by WOWSlider.com v2.9</a>
<div class="ws_shadow"></div>
</div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</body>
</html>
inam css
/*
* generated by WOW Slider 2.9
* template Numeric
*/
#wowslider-container1 {
zoom: 1;
position: relative;
max-width:500px;
margin:5px auto 5px;
z-index:90;
border:none;
text-align:left; /* reset align=center */
}
* html #wowslider-container1{ width:500px }
#wowslider-container1 .ws_images ul{
position:relative;
width: 10000%;
height:auto;
left:0;
list-style:none;
margin:0;
padding:0;
border-spacing:0;
overflow: visible;
/*table-layout:fixed;*/
}
#wowslider-container1 .ws_images ul li{
width:1%;
line-height:0; /*opera*/
float:left;
font-size:0;
padding:0 0 0 0 !important;
margin:0 0 0 0 !important;
}
#wowslider-container1 .ws_images{
position: relative;
left:0;
top:0;
width:100%;
height:100%;
overflow:hidden;
}
#wowslider-container1 .ws_images a{
width:100%;
display:block;
color:transparent;
}
#wowslider-container1 img{
max-width: none !important;
}
#wowslider-container1 .ws_images img{
width:100%;
border:none 0;
max-width: none;
padding:0;
}
#wowslider-container1 a{
text-decoration: none;
outline: none;
border: none;
}
#wowslider-container1 .ws_bullets {
font-size: 0px;
float: left;
position:absolute;
z-index:70;
}
#wowslider-container1 .ws_bullets div{
position:relative;
float:left;
}
#wowslider-container1 a.wsl{
display:none;
}
#wowslider-container1 .ws_bullets {
padding: 10px;
}
#wowslider-container1 .ws_bullets a {
font:14px/32px Arial,Helvetica,sans-serif;
color:#3D3D3D;
text-align:center;
margin-left:-3px;
width:32px;
height:32px;
background: url(./bullet.png) left top;
float: left;
position:relative;
}
#wowslider-container1 .ws_bullets a.ws_selbull, #wowslider-container1 .ws_bullets a:hover{
background-position: right top;
}
#wowslider-container1 a.ws_next, #wowslider-container1 a.ws_prev {
position:absolute;
display:block;
top:50%;
margin-top:-21px;
z-index:60;
height: 43px;
width: 29px;
background-image: url(./arrows.png);
}
#wowslider-container1 a.ws_next{
background-position: 100% 0;
right:0px;
}
#wowslider-container1 a.ws_prev {
left:0px;
background-position: 0 0;
}
#wowslider-container1 a.ws_next:hover{
background-position: 100% 100%;
}
#wowslider-container1 a.ws_prev:hover {
background-position: 0 100%;
}
/* bottom center */
#wowslider-container1 .ws_bullets {
top: 5px;
right: 0px;
}
#wowslider-container1 .ws-title{
position: absolute;
bottom:15%;
left: 0px;
margin-right:5px;
z-index: 50;
padding:12px;
color: #3D3D3D;
text-transform:uppercase;
background:#fff;
font-family: Arial,Helvetica,sans-serif;
font-size: 18px;
-moz-border-radius:0 5px 5px 0;
border-radius:0 5px 5px 0;
opacity:0.8;
filter:progid:DXImageTransform.Microsoft.Alpha(opa city=80);
}
#wowslider-container1 .ws-title div{
padding-top:5px;
font-size: 12px;
text-transform:none;
}
#wowslider-container1 .ws_images ul{
animation: wsBasic 76.5s infinite;
-moz-animation: wsBasic 76.5s infinite;
-webkit-animation: wsBasic 76.5s infinite;
}
@keyframes wsBasic{0%{left:-0%} 29.41%{left:-0%} 33.33%{left:-100%} 62.75%{left:-100%} 66.67%{left:-200%} 96.08%{left:-200%} }
@-moz-keyframes wsBasic{0%{left:-0%} 29.41%{left:-0%} 33.33%{left:-100%} 62.75%{left:-100%} 66.67%{left:-200%} 96.08%{left:-200%} }
@-webkit-keyframes wsBasic{0%{left:-0%} 29.41%{left:-0%} 33.33%{left:-100%} 62.75%{left:-100%} 66.67%{left:-200%} 96.08%{left:-200%} }
#wowslider-container1 .ws_shadow{
background-image: url(./bg.png);
background-size:100%;
position:absolute;
z-index: -1;
left:-1%;
top:-2.5%;
width:102%;
height:105%;
}
* html #wowslider-container1 .ws_shadow{/*ie6*/
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader( src='engine1/bg.png', sizingMethod='scale');
}
*+html #wowslider-container1 .ws_shadow{/*ie7*/
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImag eLoader( src='engine1/bg.png', sizingMethod='scale');
}
#wowslider-container1 .ws_bullets a img{
text-indent:0;
display:block;
top:25px;
left:-60px;
visibility:hidden;
position:absolute;
-moz-box-shadow: 0 0 5px #3D3D3D;
box-shadow: 0 0 5px #3D3D3D;
border: 5px solid #ffffff;
max-width:none;
}
#wowslider-container1 .ws_bullets a:hover img{
visibility:visible;
}
#wowslider-container1 .ws_bulframe div div{
height:48px;
overflow:visible;
position:relative;
}
#wowslider-container1 .ws_bulframe div {
left:0;
overflow:hidden;
position:relative;
width:120px;
background-color:#ffffff;
}
#wowslider-container1 .ws_bullets .ws_bulframe{
display:none;
top:35px;
overflow:visible;
position:absolute;
cursor:pointer;
-moz-box-shadow: 0 0 5px #3D3D3D;
box-shadow: 0 0 5px #3D3D3D;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border: 5px solid #ffffff;
}
#wowslider-container1 .ws_bulframe span{
display:block;
position:absolute;
top:-17px;
margin-left:2px;
left:60px;
background:url(./triangle.png);
width:20px;
height:12px;
}
من میخام روی اسلاید شو یه دکمه اینتر بذارم که بره تو سایت اصلی