PDA

View Full Version : حرفه ای: عكس بصورت اسلايد


s_mokhtari
پنج شنبه 20 خرداد 1389, 14:56 عصر
با سلام:اشتباه:
من دو تا عكس را ميخوام مثل اسلايد نشون بدم يعني خودش چند دقه يكبار عوض بشه بايد چه راهي استفاده كنم
با تشكر:ناراحت:
hamedsabzian
پنج شنبه 20 خرداد 1389, 14:59 عصر
1. خودت کد JavaScript بنویسی.
2. از Plugin های JQuery استفاده کنی. ( جستجو در Google)
Peyman.Gh
پنج شنبه 20 خرداد 1389, 15:01 عصر
این کد را در یک فایل HTML در پوشه پروژه خود ذخیره کنید
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Page</title>
<style type="text/css">
body
{
background-color: #FFFFFF;
color: #000000;
}
</style>
<script type="text/javascript">
<!--
function FadeImage(id, duration)
{
var millisec = Math.round(duration / 100);
var timer = 0;
for(i = 0; i <= 100; i++)
{
setTimeout("SetOpacity('" + id + "'," + i + ")",(timer * millisec));
timer++;
}
}
function SetOpacity(id, opacity)
{
var element = document.getElementById(id).style;
element.opacity = (opacity / 100);
element.MozOpacity = (opacity / 100);
element.KhtmlOpacity = (opacity / 100);
element.filter = "alpha(opacity=" + opacity + ")";
}
//-->
</script>
<script type="text/javascript">
<!--
function PreloadImages()
{
var imageObj = new Image();
var images = new Array();
images[0]="./images/1.jpg";
images[1]="./images/0.jpg";
for (var i=0; i<=1; i++)
{
imageObj.src = images[i];
}
}
// -->
</script>
</head>
<body>
<div id="wb_SlideShow1" style="position:absolute;left:235px;top:109px;width:560px ;height:390px;z-index:0;overflow:hidden" align="left">
<script type="text/javascript">
<!--
var SlideShow1_Index = -1;
var SlideShow1_Images = new Array();
SlideShow1_Images[0] = ["/images/1.jpg","",""];
SlideShow1_Images[1] = ["/images/0.jpg","",""];

function SlideShow1ShowNext()
{
SlideShow1_Index = SlideShow1_Index + 1;
if (SlideShow1_Index > 1)
SlideShow1_Index = 0;
document.getElementById('SlideShow1_Fade').src = document.getElementById('SlideShow1').src;
SetOpacity('SlideShow1', 0);
eval("document.SlideShow1.src = SlideShow1_Images[" + SlideShow1_Index + "][0]");
setTimeout("SlideShow1ShowNext();", 5000);
FadeImage('SlideShow1', 1500);
}
// -->
</script>
<img src="/images/1.jpg" style="position:absolute;left:0px;top:0px;" id="SlideShow1_Fade" border="0" align="top" alt="" width="560" height="390" name="SlideShow1_Fade">
<img src="/images/1.jpg" style="position:absolute;left:0px;top:0px;" id="SlideShow1" border="0" align="top" alt="" width="560" height="390" name="SlideShow1">
<script type="text/javascript">
<!--
SlideShow1ShowNext();
// -->
</script>
</div>
</body>
</html>
در این مثال دو تصویر در پوشه Images هستند (پوشه Images در پروژه شما میباشد).
برای استفاده در پروژه به طور مثال به این صورت عمل نمایید :
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text= System.IO.File.ReadAllText(Server.MapPath("Slide.html"));
}
موفق باشید.
Mostafa_Dindar
پنج شنبه 20 خرداد 1389, 15:28 عصر
سلام ،

به روشهاي بسياري ميتونيد اين كار رو انجام بديد ، در صورتي كه ميخواهيد يك Image Slider كه هر تعداد عكس رو با فاصله زماني مشخص با Effect زيبا نمايش بديد ، ميتونيد از Jquery بدون هيچگونه Plugin به صورت زير استفاده كنيد

اول از همه يك Div تگ به صورت زير ايجاد كنيد و عكسها رو به صورت زير آدرس دهي كنيد :

<div id="photoShow">
<div class="current">
<img src="/images/Image1.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
</div>
<div>
<img src="/images/Image2.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
</div>
<div>
<img src="/images/Image3.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
</div>
<div>
<img src="/images/Image4.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
</div>
</div>

بعد از اينكه عكسها رو آدرس دهي كرديد ( عكس ها بايد هم اندازه باشند كه من فرض كردم همه عكسها 400 در 400 پيكسل هستند.) بايد توسط css اونها رو در جاي مشخصي قرار دهيد :

<style type="text/css">
#photoShow {
height:400px;
width:400px;
}
#photoShow div {
position:absolute;
z-index: 0;
}
#photoShow div.previous {
z-index: 1;
}
#photoShow div.current {
z-index: 2;
}
</style>

بعد از اون كافيه اسكريپت Jquery رو به صفحه تزريق كنيد و اين كد رو براش بنويسيد .

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function() {
// create the image rotator
setInterval("rotateImages()", 2000);
});

function rotateImages() {
var oCurPhoto = $('#photoShow div.current');
var oNxtPhoto = oCurPhoto.next();
if (oNxtPhoto.length == 0)
oNxtPhoto = $('#photoShow div:first');

oCurPhoto.removeClass('current').addClass('previou s');
oNxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 1000,
function() {
oCurPhoto.removeClass('previous');
});
}
</script>

سربلند باشيد
hamedsabzian
پنج شنبه 20 خرداد 1389, 15:34 عصر
ميتونيد از Jquery بدون هيچگونه Plugin به صورت زير استفاده كنيد
منظور از JQury Plugin همین هاست دیگه! یا...؟
Mostafa_Dindar
پنج شنبه 20 خرداد 1389, 15:41 عصر
منظور از JQury Plugin همین هاست دیگه! یا...؟
سلام ،

Jquery يك كتابخانه جاوااسكريپتي رايگان هست كه كارهايي كه قبلا قرار بود با چندين خط كد توسط جاوااسكريپت انجام دهيد رو خيلي راحتتر با تعداد خطهاي كمتر انجام دهيد .

حال ميتونيد از اين كتابخانه رايگان استفاده كنيد ( مثل كاري كه الان من انجام دادم ) يا براي كارهاي پيچيده تر از Plugin هايي كه براي كارهاي خاص تدارك ديدن استفاده كنيد .

الان من كاري كه كردم تنها Effect هاي FadeIn and FadeOut رو توسط متدهاي كتابخانه اصلي جي كوئري پياده سازي كردم . در صورتي كه بخوام كارهاي خيلي پيشرفته تر انجام بدم ، در گوگل به دنبال پلاگين هاي مخصوص اون كار ميگردم و از اونها استفاده ميكنم .

بديهي هست كه در صورت استفاده از پلاگين هاس جي كوئري ، علاوه بر تزريق كتابخانه اصلي جي كوئري ، كتابخانه اون پلاگين ها رو هم تزريق كنم .
همچنين بايد به مستندات اون پلاگين رجوع كنم تا نحوه استفاده از اون رو فرابگيرم ( بايد بدونم كه از چه متدهايي و چه پارامترهايي استفاده ميكند )


سربلند باشيد
s_mokhtari
جمعه 21 خرداد 1389, 14:19 عصر
سلام ،

به روشهاي بسياري ميتونيد اين كار رو انجام بديد ، در صورتي كه ميخواهيد يك Image Slider كه هر تعداد عكس رو با فاصله زماني مشخص با Effect زيبا نمايش بديد ، ميتونيد از Jquery بدون هيچگونه Plugin به صورت زير استفاده كنيد

اول از همه يك Div تگ به صورت زير ايجاد كنيد و عكسها رو به صورت زير آدرس دهي كنيد :

<div id="photoShow">
<div class="current">
<img src="/images/Image1.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
</div>
<div>
<img src="/images/Image2.jpg" alt="Photo Gallery" width="400" height="400"
class="gallery" />
</div>
<div>
<img src="/images/Image3.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
</div>
<div>
<img src="/images/Image4.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
</div>
</div>

بعد از اينكه عكسها رو آدرس دهي كرديد ( عكس ها بايد هم اندازه باشند كه من فرض كردم همه عكسها 400 در 400 پيكسل هستند.) بايد توسط css اونها رو در جاي مشخصي قرار دهيد :

<style type="text/css">
#photoShow {
height:400px;
width:400px;
}
#photoShow div {
position:absolute;
z-index: 0;
}
#photoShow div.previous {
z-index: 1;
}
#photoShow div.current {
z-index: 2;
}
</style>

بعد از اون كافيه اسكريپت Jquery رو به صفحه تزريق كنيد و اين كد رو براش بنويسيد .

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function() {
// create the image rotator
setInterval("rotateImages()", 2000);
});

function rotateImages() {
var oCurPhoto = $('#photoShow div.current');
var oNxtPhoto = oCurPhoto.next();
if (oNxtPhoto.length == 0)
oNxtPhoto = $('#photoShow div:first');

oCurPhoto.removeClass('current').addClass('previou s');
oNxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 1000,
function() {
oCurPhoto.removeClass('previous');
});
}
</script>

سربلند باشيد
با سلام
من فقط تيكه اول دستورات رو ميدونم كجا بذارم ولي دو تكه ديگه را ميشه بيشتر راهنمايي كنيد
يا فايلشو برام بفرستيد
با تشكر
Mostafa_Dindar
جمعه 21 خرداد 1389, 14:22 عصر
با سلام
من فقط تيكه اول دستورات رو ميدونم كجا بذارم ولي دو تكه ديگه را ميشه بيشتر راهنمايي كنيد
يا فايلشو برام بفرستيد
با تشكر

در قسمت Head صفحتون بزاريد


سربلند باشيد
s_mokhtari
جمعه 21 خرداد 1389, 15:48 عصر
این کد را در یک فایل HTML در پوشه پروژه خود ذخیره کنید
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled Page</title>
<style type="text/css">
body
{
background-color: #FFFFFF;
color: #000000;
}
</style>
<script type="text/javascript">
<!--
function FadeImage(id, duration)
{
var millisec = Math.round(duration / 100);
var timer = 0;
for(i = 0; i <= 100; i++)
{
setTimeout("SetOpacity('" + id + "'," + i + ")",(timer * millisec));
timer++;
}
}
function SetOpacity(id, opacity)
{
var element = document.getElementById(id).style;
element.opacity = (opacity / 100);
element.MozOpacity = (opacity / 100);
element.KhtmlOpacity = (opacity / 100);
element.filter = "alpha(opacity=" + opacity + ")";
}
//-->
</script>
<script type="text/javascript">
<!--
function PreloadImages()
{
var imageObj = new Image();
var images = new Array();
images[0]="./images/1.jpg";
images[1]="./images/0.jpg";
for (var i=0; i<=1; i++)
{
imageObj.src = images[i];
}
}
// -->
</script>
</head>
<body>
<div id="wb_SlideShow1" style="position:absolute;left:235px;top:109px;width:560px ;height:390px;z-index:0;overflow:hidden" align="left">
<script type="text/javascript">
<!--
var SlideShow1_Index = -1;
var SlideShow1_Images = new Array();
SlideShow1_Images[0] = ["/images/1.jpg","",""];
SlideShow1_Images[1] = ["/images/0.jpg","",""];

function SlideShow1ShowNext()
{
SlideShow1_Index = SlideShow1_Index + 1;
if (SlideShow1_Index > 1)
SlideShow1_Index = 0;
document.getElementById('SlideShow1_Fade').src = document.getElementById('SlideShow1').src;
SetOpacity('SlideShow1', 0);
eval("document.SlideShow1.src = SlideShow1_Images[" + SlideShow1_Index + "][0]");
setTimeout("SlideShow1ShowNext();", 5000);
FadeImage('SlideShow1', 1500);
}
// -->
</script>
<img src="/images/1.jpg" style="position:absolute;left:0px;top:0px;" id="SlideShow1_Fade" border="0" align="top" alt="" width="560" height="390" name="SlideShow1_Fade">
<img src="/images/1.jpg" style="position:absolute;left:0px;top:0px;" id="SlideShow1" border="0" align="top" alt="" width="560" height="390" name="SlideShow1">
<script type="text/javascript">
<!--
SlideShow1ShowNext();
// -->
</script>
</div>
</body>
</html>
در این مثال دو تصویر در پوشه Images هستند (پوشه Images در پروژه شما میباشد).
برای استفاده در پروژه به طور مثال به این صورت عمل نمایید :
protected void Page_Load(object sender, EventArgs e)
{
Label1.Text= System.IO.File.ReadAllText(Server.MapPath("Slide.html"));
}
موفق باشید.
با سلام
دوست عزيز من يه فايل با نام slide.html درست كردم بدش كد شمارو هم نوشتم و توي لود صفحه كد دوم را نوشتم ولي اصلان نه خطا ميده و نه عكسي نشون ميده نكنه بايد تو كد بالايي تنظيم خاصي انجام بدم
عكسم 1.jpg,0.jpg
با تشكر
Peyman.Gh
جمعه 21 خرداد 1389, 17:03 عصر
پروژه ضمیمه شد.

موفق باشید.
s_mokhtari
شنبه 22 خرداد 1389, 12:16 عصر
در قسمت Head صفحتون بزاريد


سربلند باشيد
با سلام:گریه::گریه:
دوست عزيز هر كاري ميكنم بازم نشد حتي يه فيلم آموزشي توي سايت پيدا كردم ولي راهش با شما فرق مي كرد ولي بازم نشد خواهشان اگه ميشه يه نمونه بهم نشون بديد ديگه دارم قاطي مي‌كنم
با تشكر:عصبانی::عصبانی::متعجب:
profnami
شنبه 22 خرداد 1389, 13:05 عصر
ببينيد قبلا مطرح شده بود . از پلاگين JQuery Cycle استفاده كنيد
Mostafa_Dindar
شنبه 22 خرداد 1389, 13:21 عصر
با سلام:گریه::گریه:
دوست عزيز هر كاري ميكنم بازم نشد حتي يه فيلم آموزشي توي سايت پيدا كردم ولي راهش با شما فرق مي كرد ولي بازم نشد خواهشان اگه ميشه يه نمونه بهم نشون بديد ديگه دارم قاطي مي‌كنم
با تشكر:عصبانی::عصبانی::متعجب:

سلام ، من تعجب ميكنم ، تصور ميكنم كه شما صحيح آدرس دهي نكرديد ، به صورت زير هست :

<!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>
<title>jQuery Image Rotator</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function() {
// create the image rotator
setInterval("rotateImages()", 2000);
});

function rotateImages() {
var oCurPhoto = $('#photoShow div.current');
var oNxtPhoto = oCurPhoto.next();
if (oNxtPhoto.length == 0)
oNxtPhoto = $('#photoShow div:first');

oCurPhoto.removeClass('current').addClass('previou s');
oNxtPhoto.css({ opacity: 0.0 }).addClass('current').animate({ opacity: 1.0 }, 1000,
function() {
oCurPhoto.removeClass('previous');
});
}
</script>
<style type="text/css">
#photoShow {
height:400px;
width:400px;
}
#photoShow div {
position:absolute;
z-index: 0;
}
#photoShow div.previous {
z-index: 1;
}
#photoShow div.current {
z-index: 2;
}
</style>
</head>
<body>
<div id="photoShow">
<div class="current">
<img src="/images/Grass.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
</div>
<div>
<img src="/images/Leaf.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
</div>
<div>
<img src="/images/Spring.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
</div>
<div>
<img src="/images/Water.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />
</div>
</div>
</body>
</html>


در اينجا فرض شده كه از كتابخانه jquery-1.4.2.min.js از جي كوئري استفاده شده و در Root قرار دارد .

من يك نمونه ميزارم كه ديگه جاي هيچ حرف و حديثي باقي نمونه . ( لطفا ديگه نگين اين كار نميكنه )

موفق باشيد
Peyman.Gh
شنبه 22 خرداد 1389, 14:46 عصر
من يك نمونه ميزارم كه ديگه جاي هيچ حرف و حديثي باقي نمونه . ( لطفا ديگه نگين اين كار نميكنه ) مشکل کار نکردن به این علت میباشد که زمانی که کدها را با استفاده از SyntaxHighLighter نمایش داده میشود بطور پیشفرض برای src تگ img یک / اضافه میکند.
یعنی کد صحیح بصورت

http://barnamenevis.org/forum/attachment.php?attachmentid=51034&stc=1&d=1276336217

ولی SyntaxHighLighter به آن / اضافه میکند که اشتباه میباشد.
<img src="/images/Grass.jpg" alt="Photo Gallery" width="400" height="400" class="gallery" />

به این علت تصاویر نمایش داده نمیشود.
موفق باشید.
s_mokhtari
دوشنبه 24 خرداد 1389, 12:07 عصر
پروژه ضمیمه شد.

موفق باشید.
با سلام و تشكر:تشویق::تشویق:
دوست عزيز فايل رو ديدم ولي من ميخوام تصويرم را گوشه سمت راست بذارم و جاشو خودم تعيين كنم
با تشكر