جابه جایی تصاویر در صفحه

[mahtab kf]

سلام
من در صفحه ام یک تصویر بزرگ و سه تا کوچک دارم می خواستم بدونم چطوری با کلیک روی یک تصویر کوچک می تونم جاشو با بزرگه عوض کنم؟ در ضمن عکسها از بانکم خوانده میشوند.

ممنون میشم اگه راهنماییم کنید.

[mahtab kf]

کسی میتونه کمکم کنه؟

[Mohammad_dn]

جاوا اسکریپت و جی کوئری

[mahtab kf]

جاوا اسکریپت و جی کوئری
میدونم اما نتونستم ازشون استفاده کنم وقتی ازش استفاده میکنم میریزه به هم! چون اصلا js بلد نیستم نمی تونم تغییرش بدم راه دیگه ای نداره؟

[alimobe]

vb و asp بلدی؟
اگر بلدی بگو تا بگم

[Mohammad_dn]

دوست عزیز راه حل جی کوئری هست...من به یکی از دوستان گفتم که طراحی کنه اما متاسفانه اون هم وقت نداشت .... انشاالله تا فردا شب نمونه ی پروژه با جی کوئری رو میزارم

[ahmad156]

چون اصلا js بلد نیستم نمی تونم تغییرش بدم راه دیگه ای نداره؟
پس توصیه میکنم اول JavaScript رو یاد بگیرین بعد دنبال حل مسئلتون باشین!!

[mahtab kf]

vb و asp بلدی؟
اگر بلدی بگو تا بگم
c# , asp بلدم اما اگه راه حلشو بگید می فهمم

[mahtab kf]

دوست عزیز راه حل جی کوئری هست...من به یکی از دوستان گفتم که طراحی کنه اما متاسفانه اون هم وقت نداشت .... انشاالله تا فردا شب نمونه ی پروژه با جی کوئری رو میزارم
از لطفتون ممنونم

[mahtab kf]

پس توصیه میکنم اول JavaScript رو یاد بگیرین بعد دنبال حل مسئلتون باشین!!
هیچ کدوم از برنامه نویسهایی که می شناسم حتی خیلی حرفه ای ها هم تمام زبانهای برنامه نویسی رو حرفه ای بلد نیستن من طراح وب سایت نیستم برنامه نویس وبم این کارو هم از روی علاقه شخصی انجام میدم و وقت یادگیری هم ندارم یک سوال درباره کدنویسی کردم گفتم شاید این امکان وجود داشته باشه این کارو کرد

[ahmad156]

دوست عزیز برنامه نویسی وب بدون دونستن JavaScript به نظر من کار بیخودی هست.

[mRizvandi]

کار سخت و پیچیده ای نیست، شما روی عکسی که کلیک شد، مقادیر خصوصیت src اون رو بریز تو یه متغیر، بعد مقدار خصوصیت src عکس بزرگ رو بریز تو کوچیکه و بعد مقدار متغیر رو بریز تو عکس بزرگه (خیلی عمومی نوشتم)
این روش کار هست.

یه کد راهنما هم برات میذارم:

اسکریپت:


<script type="text/javascript">
$(document).ready(function(){
$(".thumbs a").click(function(){

var largImgSrc = $("#largeImg").attr("src");
var largePath = $(this).attr("href");
$("#largeImg").attr({ src: largePath });
$(this).children(":first").attr({ src: largImgSrc});
$(this).attr({ href: largImgSrc});
return false;
});

});
</script>

کد HTML:


<img id="largeImg" src="images/img1.jpg" />
<div class="thumbs">
<a href="images/img2-lg.jpg" ><img src="images/img2-thumb.jpg" /></a>
<a href="images/img3-lg.jpg" ><img src="images/img3-thumb.jpg" /></a>
<a href="images/img4-lg.jpg" ><img src="images/img4-thumb.jpg" /></a>
<a href="images/img5-lg.jpg" ><img src="images/img5-thumb.jpg" /></a>
<a href="images/img6-lg.jpg" ><img src="images/img6-thumb.jpg" /></a>
</div>

[mahtab kf]

دوست عزیز برنامه نویسی وب بدون دونستن JavaScript به نظر من کار بیخودی هست.
هر کسی برای خودش نظری داره و لزوما مورد تایید دیگری نیست اینجا هم میدونه جنگ نیست پس لطفا اگه نمی تونید کمک بکنید نظر ندهید من همیشه خالصانه به سوالات دیگران جواب میدهم و دانستنی های کسی رو مورد سنجش قرار نمی دهم و قصدم فقط کمکه فکر کنم هدف این سایت هم همینه

[mahtab kf]

دوستان سرانجام تونستم با css این کارو انجام بدم فایلشو میذارم برای بقیه دوستانی که لازمش دارند :تشویق:
این css اش:


<style type="text/css">

* {
margin: 0;
padding: 0;
}

img {border: none;}

a {outline: none;}

body {
font-family: Helvetica, Verdana, Arial, sans-serif;
background: url(images/post-BG.png) repeat;
text-align: center;
color: #fff;
}

h1 {
margin: 30px 0 0 0;
text-shadow: #d6d6d6 0px 1px 2px;
color: #030303
}

h3 {
margin: 10px 0 10px 0;
text-shadow: #d6d6d6 0px 1px 2px;
color: #030303
}



/* Fades in the slideshow. Hides the initial animation on the li tag. Ooops!! */


#box {
text-align: left;
width: 700px;
margin: 30px auto 0 auto;
background: #000;
overflow: hidden;
border: 10px solid #000;
-webkit-box-shadow: #131313 0px 2px 10px;
-moz-box-shadow: #131313 0px 3px 10px;
box-shadow: #131313 0px 3px 10px;
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 0s;
}

ul#slider{
-webkit-border-radius: 10px;
margin: 0px;
padding: 0px;
list-style: none;
position: relative;
width: 700px;
height: 438px;
overflow: hidden;
}

ul#thumb {
overflow: none;
margin: 0px 0px 0px 0px;
padding: 0px;
list-style: none;
position: relative;
background: #000;
overflow: auto;
width: 700px;
}

ul#thumb a {
-webkit-transition: opacity .2s ease-in-out;
border: 1px solid #979797;
width: 35px;
height: 35px;
display: block;
overflow: hidden;
float: right;
margin: 10px 0px 0px 10px;
opacity: 0.75;
}

ul#thumb a:hover {
opacity: 1;
}

ul#slider li {
width: 700px;
height: 438px;
position: absolute;
}

ul#slider li p {
position: absolute;
bottom: 0;
left: 0;
z-index: inherit;
color: #fff;
background: rgba(0, 0, 0, .5);
width: 100%;
}

ul#slider li p span {
line-height: 1.2em;
padding: 10px;
display: block;
}

/* Animation for the :target image. Slides the image in. */



ul#slider li:target {
-webkit-animation-name: moveTarget;
-webkit-animation-duration: .5s;
-webkit-animation-iteration-count: 1;
top:0px;
left: 0px;
z-index: 10;
}

/*
Animation for the current image. Slides it out the frame and back to the starting position.
Adds a lower z-index than the now current image.
*/


ul#slider li:not(:target) {
-webkit-animation-name: moveIt;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 1;
top:0px;
left: 0px;
}

</style>

این هم html اش:


<div id="box">

<ul id="slider">
<li id="1" >
<img id="img1" runat="server" alt="grass-blades" width="700" height="438" />
</li>
<li id="2">
<img id="img2" runat="server" alt="ladybug" width="700" height="438" />
</li>
<li id="3">
<img id="img3" runat="server" alt="lotus" width="700" height="438" />
</li>
<li id="4">
<img id="img4" runat="server" alt="stones" width="700" height="438" />
</li>
</ul>

<ul id="thumb">
<li><a href="#1"><img id="img11" runat="server" alt="grass-blades" width="50" height="50" /></a></li>
<li><a href="#2"><img id="img22" runat="server" alt="ladybug" width="50" height="50" /></a></li>
<li><a href="#3"><img id="img33" runat="server" alt="lotus" width="50" height="50" /></a></li>
<li><a href="#4"><img id="img44" runat="server" alt="stones" width="50" height="50" /></a></li>
</ul>

که عکس ها از بانک خونده شدن در یک datatable ریختم و اینطوری هم ربطش دادم به img هام:


img1.Src = "~/pics/" + dr2["Img1"].ToString();

[ahmad156]

هر کسی برای خودش نظری داره و لزوما مورد تایید دیگری نیست اینجا هم میدونه جنگ نیست پس لطفا اگه نمی تونید کمک بکنید نظر ندهید من همیشه خالصانه به سوالات دیگران جواب میدهم و دانستنی های کسی رو مورد سنجش قرار نمی دهم و قصدم فقط کمکه فکر کنم هدف این سایت هم همینه
من نظرم رو در جهت کمک به شما دادم نه در جهت جنگ با شما.نمیدونم چقدر وقته که دارین برنامه نویسی میکنین ولی مطمئناً یه روزی به حرف من خواهید رسید.

[mRizvandi]

دوستان سرانجام تونستم با css این کارو انجام بدم فایلشو میذارم برای بقیه دوستانی که لازمش دارند :تشویق:
این css اش:


<style type="text/css">

* {
margin: 0;
padding: 0;
}

img {border: none;}

a {outline: none;}

body {
font-family: Helvetica, Verdana, Arial, sans-serif;
background: url(images/post-BG.png) repeat;
text-align: center;
color: #fff;
}

h1 {
margin: 30px 0 0 0;
text-shadow: #d6d6d6 0px 1px 2px;
color: #030303
}

h3 {
margin: 10px 0 10px 0;
text-shadow: #d6d6d6 0px 1px 2px;
color: #030303
}



/* Fades in the slideshow. Hides the initial animation on the li tag. Ooops!! */


#box {
text-align: left;
width: 700px;
margin: 30px auto 0 auto;
background: #000;
overflow: hidden;
border: 10px solid #000;
-webkit-box-shadow: #131313 0px 2px 10px;
-moz-box-shadow: #131313 0px 3px 10px;
box-shadow: #131313 0px 3px 10px;
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: 1;
-webkit-animation-delay: 0s;
}

ul#slider{
-webkit-border-radius: 10px;
margin: 0px;
padding: 0px;
list-style: none;
position: relative;
width: 700px;
height: 438px;
overflow: hidden;
}

ul#thumb {
overflow: none;
margin: 0px 0px 0px 0px;
padding: 0px;
list-style: none;
position: relative;
background: #000;
overflow: auto;
width: 700px;
}

ul#thumb a {
-webkit-transition: opacity .2s ease-in-out;
border: 1px solid #979797;
width: 35px;
height: 35px;
display: block;
overflow: hidden;
float: right;
margin: 10px 0px 0px 10px;
opacity: 0.75;
}

ul#thumb a:hover {
opacity: 1;
}

ul#slider li {
width: 700px;
height: 438px;
position: absolute;
}

ul#slider li p {
position: absolute;
bottom: 0;
left: 0;
z-index: inherit;
color: #fff;
background: rgba(0, 0, 0, .5);
width: 100%;
}

ul#slider li p span {
line-height: 1.2em;
padding: 10px;
display: block;
}

/* Animation for the :target image. Slides the image in. */



ul#slider li:target {
-webkit-animation-name: moveTarget;
-webkit-animation-duration: .5s;
-webkit-animation-iteration-count: 1;
top:0px;
left: 0px;
z-index: 10;
}

/*
Animation for the current image. Slides it out the frame and back to the starting position.
Adds a lower z-index than the now current image.
*/


ul#slider li:not(:target) {
-webkit-animation-name: moveIt;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: 1;
top:0px;
left: 0px;
}

</style>

این هم html اش:


<div id="box">

<ul id="slider">
<li id="1" >
<img id="img1" runat="server" alt="grass-blades" width="700" height="438" />
</li>
<li id="2">
<img id="img2" runat="server" alt="ladybug" width="700" height="438" />
</li>
<li id="3">
<img id="img3" runat="server" alt="lotus" width="700" height="438" />
</li>
<li id="4">
<img id="img4" runat="server" alt="stones" width="700" height="438" />
</li>
</ul>

<ul id="thumb">
<li><a href="#1"><img id="img11" runat="server" alt="grass-blades" width="50" height="50" /></a></li>
<li><a href="#2"><img id="img22" runat="server" alt="ladybug" width="50" height="50" /></a></li>
<li><a href="#3"><img id="img33" runat="server" alt="lotus" width="50" height="50" /></a></li>
<li><a href="#4"><img id="img44" runat="server" alt="stones" width="50" height="50" /></a></li>
</ul>
ال
که عکس ها از بانک خونده شدن در یک datatable ریختم و اینطوری هم ربطش دادم به img هام:

تریک قشنگی زده، البتخ جای عکسها رو عوض نمیکنه بلکه عکسها در هر دو حالت وجود دارند و فقط با انیمیشن به نظر میاد که عوض میشه. روش خیلی خوبی بود، ممنون.