Mohammad-tashi
دوشنبه 06 مهر 1394, 17:59 عصر
باسلام
من یک اسلایدشو و گالری میخاستم چون اکثرا تداخل داشتند از گالری جی کوئری استفاده کردم و اسلایدشو ساده html وقتی یک صفحه تست میسازم و ایلهای مورد نیاز گالری رو بهش پیوست میکنم و استایل مورد استفاده اسلایشو رو در تگ <style>قراردادم و دایو هاشون کپی کردم و به خوبی کار کرد
اما وقتی در سایت خودم که دارم با php مینویسم تسش میکنم گالری خوب اجرا میشه اما اسلایشئو یا اجرا نمیشه یا خیلی بهم ریختس مثلا یک موردش اینه اسلایشو یک اسلایدش که میره 20 ثانیه طول میکشه اسلایدبعدی بیاد در حالی که در اون صفحه HTML ساده که ساختم واسه تست عکسها پشت سر هم میارنو میرن
حتی اون صفحه ساده رو با php هم سیو کردم درست بود
مشکل چیه؟
کد صفح ساده :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!--slide-->
<style type="text/css">
import url(http://fonts.googleapis.com/css?family=Istok+Web);
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body, figure {
margin: 0; background: #101010;
font-family: Istok Web, sans-serif;
font-weight: 100;
}
div#captioned-gallery {
width: 100%; overflow: hidden;
}
figure.slider {
position: relative; width: 500%;
font-size: 0; animation: 30s slidy infinite;
}
figure.slider figure {
width: 20%; height: auto;
display: inline-block; position: inherit;
}
figure.slider img { width: 100%; height: auto; }
figure.slider figure figcaption {
position: absolute; bottom: 0;
background: rgba(0,0,0,0.4);
color: #fff; width: 100%;
font-size: 2rem; padding: .6rem;
}
</style>
<!--slide-->
<!--gallery-->
<link rel="stylesheet" href="g-s/dist/css/lightbox.css">
<!--gallery-->
</head>
<body>
xxcxc
<div style=" width:400px;">
<div id="captioned-gallery">
<figure class="slider">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/hobbiton-lake.jpg" alt>
<figcaption>Hobbiton, New Zealand</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/wanaka-drowned-tree.jpg" alt>
<figcaption>Wanaka, New Zealand</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/utah-peak.jpg" alt>
<figcaption>Utah, United States</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/bryce-canyon-utah.jpg" alt>
<figcaption>Bryce Canyon, Utah, United States</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/hobbiton-lake.jpg" alt>
<figcaption>Hobbiton, New Zealand</figcaption>
</figure>
</figure>
</div>
</div>
<section>
<h3>A Four Image Set</h3>
<div>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt=""/></a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="" /></a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="" /></a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-6.jpg" alt="" /></a>
</div>
</section>
<script src="g-s/dist/js/lightbox-plus-jquery.min.js"></script>
</body>
</html>
:
<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>صفحه اصلی سایت </title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<!--slide-->
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Istok+Web);
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body, figure {
margin: 0; background: #101010;
font-family: Istok Web, sans-serif;
font-weight: 100;
}
div#captioned-gallery {
width: 100%; overflow: hidden;
}
figure.slider {
position: relative; width: 500%;
font-size: 0; animation: 30s slidy infinite;
}
figure.slider figure {
width: 20%; height: auto;
display: inline-block; position: inherit;
}
figure.slider img { width: 100%; height: auto; }
figure.slider figure figcaption {
position: absolute; bottom: 0;
background: rgba(0,0,0,0.4);
color: #fff; width: 100%;
font-size: 2rem; padding: .6rem;
}
</style>
<!--slide-->
<!--gallery-->
<link rel="stylesheet" href="g-s/dist/css/lightbox.css">
<!--gallery-->
</head>
<body>
<?php
include "jdf.php";
$t=time();
$t2=jdate('Y/m/d',1443259282);
echo "$t2";
?>
<?php
$names_length=count($_SESSION['total_elements']);
if($names_length>0){ echo'
<div id="basket1">
<p style="border-color:#F00; color:#FFF; border-radius:2px; border-width:5px;">سبد خرید</p>';
include "bas.php";
echo '
</div>
';
}?>
<center>
<div id="main">
<div id="header">
</div><!--payan header-->
<div id="menu">
<nav>
<ul>
<?php
include "menu.php";
?>
</ul>
</nav>
</div><!--payan menu-->
<div id="slideshow">
<div style=" width:400px;">
<div id="captioned-gallery">
<figure class="slider">
<figure>
<img src="img/img1.jpg" alt>
<figcaption>Hobbiton, New Zealand</figcaption>
</figure>
<figure>
<img src="img/img2.jpg" alt>
<figcaption>Wanaka, New Zealand</figcaption>
</figure>
<figure>
<img src="img/img1.jpg" alt>
<figcaption>Utah, United States</figcaption>
</figure>
<figure>
<img src="img/img2.jpg" alt>
<figcaption>Bryce Canyon, Utah, United States</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/hobbiton-lake.jpg" alt>
<figcaption>Hobbiton, New Zealand</figcaption>
</figure>
</figure>
</div>
</div>
</div><!--payan slideshow-->
<div style="width:1180px; height:50px; background:#006; color:#FFF; font-size:28px; border-radius:10%;"><h2 style="margin:0 auto;">محصولات</h2></div>
<div id="mahsulat">
<?php
include "shop.php";
?>
<?php
include "shop.php";
?>
<?php
include "shop.php";
?>
<?php
include "shop.php";
?>
<?php
include "shop.php";
?>
<?php
include "shop.php";
?>
</div><!--payan mahsulat-->
<div id="gvid">
<?php
include "gvid.php";
?>
</div><!--payan gvid-->
<div id="gpic">
<h2 style="width:1180px; height:50px; background:#006; color:#FFF; font-size:28px; border-radius:10%;">گالری ویدئو</h2>
<div id="gallery">
<section>
<h3>A Four Image Set</h3>
<div>
<a class="example-image-link" href="dade24.net" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt=""/></a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="" /></a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="" /></a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-6.jpg" alt="" /></a>
</div>
</section>
<script src="g-s/dist/js/lightbox-plus-jquery.min.js"></script>
</div>
</div><!--payan gpic-->
<div id="tabliq">
<?php
include "tabliq.php";
?>
</div><!--payan tablig-->
<div id="footer">
<?php
include "footer.php";
?>
</div><!--payan foter-->
</div><!--payan main-->
</center>
</body>
</html>
من یک اسلایدشو و گالری میخاستم چون اکثرا تداخل داشتند از گالری جی کوئری استفاده کردم و اسلایدشو ساده html وقتی یک صفحه تست میسازم و ایلهای مورد نیاز گالری رو بهش پیوست میکنم و استایل مورد استفاده اسلایشو رو در تگ <style>قراردادم و دایو هاشون کپی کردم و به خوبی کار کرد
اما وقتی در سایت خودم که دارم با php مینویسم تسش میکنم گالری خوب اجرا میشه اما اسلایشئو یا اجرا نمیشه یا خیلی بهم ریختس مثلا یک موردش اینه اسلایشو یک اسلایدش که میره 20 ثانیه طول میکشه اسلایدبعدی بیاد در حالی که در اون صفحه HTML ساده که ساختم واسه تست عکسها پشت سر هم میارنو میرن
حتی اون صفحه ساده رو با php هم سیو کردم درست بود
مشکل چیه؟
کد صفح ساده :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!--slide-->
<style type="text/css">
import url(http://fonts.googleapis.com/css?family=Istok+Web);
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body, figure {
margin: 0; background: #101010;
font-family: Istok Web, sans-serif;
font-weight: 100;
}
div#captioned-gallery {
width: 100%; overflow: hidden;
}
figure.slider {
position: relative; width: 500%;
font-size: 0; animation: 30s slidy infinite;
}
figure.slider figure {
width: 20%; height: auto;
display: inline-block; position: inherit;
}
figure.slider img { width: 100%; height: auto; }
figure.slider figure figcaption {
position: absolute; bottom: 0;
background: rgba(0,0,0,0.4);
color: #fff; width: 100%;
font-size: 2rem; padding: .6rem;
}
</style>
<!--slide-->
<!--gallery-->
<link rel="stylesheet" href="g-s/dist/css/lightbox.css">
<!--gallery-->
</head>
<body>
xxcxc
<div style=" width:400px;">
<div id="captioned-gallery">
<figure class="slider">
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/hobbiton-lake.jpg" alt>
<figcaption>Hobbiton, New Zealand</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/wanaka-drowned-tree.jpg" alt>
<figcaption>Wanaka, New Zealand</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/utah-peak.jpg" alt>
<figcaption>Utah, United States</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/bryce-canyon-utah.jpg" alt>
<figcaption>Bryce Canyon, Utah, United States</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/hobbiton-lake.jpg" alt>
<figcaption>Hobbiton, New Zealand</figcaption>
</figure>
</figure>
</div>
</div>
<section>
<h3>A Four Image Set</h3>
<div>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-3.jpg" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt=""/></a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="" /></a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="" /></a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-6.jpg" alt="" /></a>
</div>
</section>
<script src="g-s/dist/js/lightbox-plus-jquery.min.js"></script>
</body>
</html>
:
<!DOCTYPE>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>صفحه اصلی سایت </title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<!--slide-->
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Istok+Web);
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
body, figure {
margin: 0; background: #101010;
font-family: Istok Web, sans-serif;
font-weight: 100;
}
div#captioned-gallery {
width: 100%; overflow: hidden;
}
figure.slider {
position: relative; width: 500%;
font-size: 0; animation: 30s slidy infinite;
}
figure.slider figure {
width: 20%; height: auto;
display: inline-block; position: inherit;
}
figure.slider img { width: 100%; height: auto; }
figure.slider figure figcaption {
position: absolute; bottom: 0;
background: rgba(0,0,0,0.4);
color: #fff; width: 100%;
font-size: 2rem; padding: .6rem;
}
</style>
<!--slide-->
<!--gallery-->
<link rel="stylesheet" href="g-s/dist/css/lightbox.css">
<!--gallery-->
</head>
<body>
<?php
include "jdf.php";
$t=time();
$t2=jdate('Y/m/d',1443259282);
echo "$t2";
?>
<?php
$names_length=count($_SESSION['total_elements']);
if($names_length>0){ echo'
<div id="basket1">
<p style="border-color:#F00; color:#FFF; border-radius:2px; border-width:5px;">سبد خرید</p>';
include "bas.php";
echo '
</div>
';
}?>
<center>
<div id="main">
<div id="header">
</div><!--payan header-->
<div id="menu">
<nav>
<ul>
<?php
include "menu.php";
?>
</ul>
</nav>
</div><!--payan menu-->
<div id="slideshow">
<div style=" width:400px;">
<div id="captioned-gallery">
<figure class="slider">
<figure>
<img src="img/img1.jpg" alt>
<figcaption>Hobbiton, New Zealand</figcaption>
</figure>
<figure>
<img src="img/img2.jpg" alt>
<figcaption>Wanaka, New Zealand</figcaption>
</figure>
<figure>
<img src="img/img1.jpg" alt>
<figcaption>Utah, United States</figcaption>
</figure>
<figure>
<img src="img/img2.jpg" alt>
<figcaption>Bryce Canyon, Utah, United States</figcaption>
</figure>
<figure>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/hobbiton-lake.jpg" alt>
<figcaption>Hobbiton, New Zealand</figcaption>
</figure>
</figure>
</div>
</div>
</div><!--payan slideshow-->
<div style="width:1180px; height:50px; background:#006; color:#FFF; font-size:28px; border-radius:10%;"><h2 style="margin:0 auto;">محصولات</h2></div>
<div id="mahsulat">
<?php
include "shop.php";
?>
<?php
include "shop.php";
?>
<?php
include "shop.php";
?>
<?php
include "shop.php";
?>
<?php
include "shop.php";
?>
<?php
include "shop.php";
?>
</div><!--payan mahsulat-->
<div id="gvid">
<?php
include "gvid.php";
?>
</div><!--payan gvid-->
<div id="gpic">
<h2 style="width:1180px; height:50px; background:#006; color:#FFF; font-size:28px; border-radius:10%;">گالری ویدئو</h2>
<div id="gallery">
<section>
<h3>A Four Image Set</h3>
<div>
<a class="example-image-link" href="dade24.net" data-lightbox="example-set" data-title="Click the right half of the image to move forward."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-3.jpg" alt=""/></a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-4.jpg" data-lightbox="example-set" data-title="Or press the right arrow on your keyboard."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-4.jpg" alt="" /></a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-5.jpg" data-lightbox="example-set" data-title="The next image in the set is preloaded as you're viewing."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-5.jpg" alt="" /></a>
<a class="example-image-link" href="http://lokeshdhakar.com/projects/lightbox2/images/image-6.jpg" data-lightbox="example-set" data-title="Click anywhere outside the image or the X to the right to close."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/images/thumb-6.jpg" alt="" /></a>
</div>
</section>
<script src="g-s/dist/js/lightbox-plus-jquery.min.js"></script>
</div>
</div><!--payan gpic-->
<div id="tabliq">
<?php
include "tabliq.php";
?>
</div><!--payan tablig-->
<div id="footer">
<?php
include "footer.php";
?>
</div><!--payan foter-->
</div><!--payan main-->
</center>
</body>
</html>