تقریبا شبیه به سایت یاهو قسمت ایمیل هاش می خواستم ایجاد کنم .
با بررسی کدهای مربوط به سایت یاهو میل به این نتیجه رسیدم که یاهو از دو تصویر استفاده می کنه . یکی که حالت شفاف داره برای کل زمینه و اون یکی که حالت blur داره برای اون قسمت wrapper سایت استفاده می کنه .
دارم بررسی می کنم ببینم میشه کاری کردش که با کلیک بروی یک زمینه به صورت user frindly بودن توسط کاربر ، قسمت Wrapper مربوط به عکس هم بروی قسمت wrapper لود بشود .
این مشکل تا حدودی برطرف کردم . دو تا بکگراند تعریف کردم که یکی مربوط میشه به Body و دیگر مربوط میشه به بخش wrapper که حالت کمی blur داره .
حالا من این امکان به کاربر دادم که مثل یاهو ایمیل بکگراند مورد نظر خودش رو انتخاب کنه و پس از انتخاب بکگراند مورد نظر کاربر که بر روی body اعمال می شود می خوام دقیقا عین همون بکگراند به صورت blur شده بروی زمینه wrapper من هم اعمال بشه .
بکگراندهایی که باید توسط کاربر انتخاب بشود ، به صورت لیستی درون سایت قرار دادم به صورت زیر هستش:
<div id="thumb">
<ul>
<li><img src="images/bg/thumbnail/pic1.jpg" width="80" height="44" dir="images/bg/pic1.jpg"></li>
<li><img src="images/bg/thumbnail/pic2.jpg" width="80" height="44" dir="images/bg/pic2.jpg"></li>
<li><img src="images/bg/thumbnail/pic3.jpg" width="80" height="44" dir="images/bg/pic3.jpg"></li>
<li><img src="images/bg/thumbnail/pic4.jpg" width="80" height="44" dir="images/bg/pic4.jpg"></li>
<li><img src="images/bg/thumbnail/pic5.jpg" width="80" height="44" dir="images/bg/pic5.jpg"></li>
<li><img src="images/bg/thumbnail/pic6.jpg" width="80" height="44" dir="images/bg/pic6.jpg"></li>
<li><img src="images/bg/thumbnail/pic7.jpg" width="80" height="44" dir="images/bg/pic7.jpg"></li>
<li><img src="images/bg/thumbnail/pic8.jpg" width="80" height="44" dir="images/bg/pic8.jpg"></li>
<li><img src="images/bg/thumbnail/pic9.jpg" width="80" height="44" dir="images/bg/pic9.jpg"></li>
<li><img src="images/bg/thumbnail/pic10.jpg" width="80" height="44" dir="images/bg/pic10.jpg"></li>
</ul>
</div>
حالا درون همون صفحه هم بکگراند های محو blur خودم رو نیز به صورت زیر قرار دادم :
<div class="blur">
<ul>
<li><img src="images/bg/thumbnail/pic1.jpg" width="80" height="44" dir="images/bg/blur/pic1.jpg"></li>
<li><img src="images/bg/thumbnail/pic2.jpg" width="80" height="44" dir="images/bg/blur/pic2.jpg"></li>
<li><img src="images/bg/thumbnail/pic3.jpg" width="80" height="44" dir="images/bg/blur/pic3.jpg"></li>
<li><img src="images/bg/thumbnail/pic4.jpg" width="80" height="44" dir="images/bg/blur/pic4.jpg"></li>
<li><img src="images/bg/thumbnail/pic5.jpg" width="80" height="44" dir="images/bg/blur/pic5.jpg"></li>
<li><img src="images/bg/thumbnail/pic6.jpg" width="80" height="44" dir="images/bg/blur/pic6.jpg"></li>
<li><img src="images/bg/thumbnail/pic7.jpg" width="80" height="44" dir="images/bg/blur/pic7.jpg"></li>
<li><img src="images/bg/thumbnail/pic8.jpg" width="80" height="44" dir="images/bg/blur/pic8.jpg"></li>
<li><img src="images/bg/thumbnail/pic9.jpg" width="80" height="44" dir="images/bg/blur/pic9.jpg"></li>
<li><img src="images/bg/thumbnail/pic10.jpg" width="80" height="44" dir="images/bg/blur/pic10.jpg"></li>
</ul>
</div>
همانطور که در مسیر Dir قالب مشاهده می کنید مسیر بکگراندهای blur داده شده من در مسیر images/bg/blur/ قرار دارد .
با استفاده از کد جی کوئری که تو یک مثالی گیر آوردم درباره body سایت اومده و بهش به صورت زیر گفته درصورتی که بروی هر کدوم از المان های تصویر داخل کلاس thumb کلیک کردش ، دقیقا مثل همون عکس و با استفاده از مسیرش تصویر بکگراند تغییر بده .
$('#thumb li img').click(function(){
var imgbg = $(this).attr('dir');
$('#bg').css({backgroundImage: "url("+imgbg+")"});
});
$('#bgimage').click(function(){
$('#thumb').hide();
});
حالا دقیقا می خوام با استفاده از این کدها بهش بگم که وقتی بروی عکس های تصویر کلاس thumb کلیک کردن بکگراند مربوط به wrapper من هم با استفاده از عکسهایی که در کلاس blur قرار داره تغییر بکنه .
کدی که نوشتم به صورت زیر هستش ولی عمل نمیکنه :پ
$('#thumb li img').click(function(){
var imgbgblur = $('#blur li img').attr('dir');
$('.wrapper').css({backgroundImage: "url("+imgbgblur+")"});
});
$('#bgimage').click(function(){
$('#thumb').hide();
});
در کل کدهای مربوط به HTML صفحه ام هم به صورت زیر هستش »
<body id="bg">
<div id="bgimage"></div>
<div id="menu"><img src="images/bgclick.png"></div>
<div id="thumb">
<ul>
<li><img src="images/bg/thumbnail/pic1.jpg" width="80" height="44" dir="images/bg/pic1.jpg"></li>
<li><img src="images/bg/thumbnail/pic2.jpg" width="80" height="44" dir="images/bg/pic2.jpg"></li>
<li><img src="images/bg/thumbnail/pic3.jpg" width="80" height="44" dir="images/bg/pic3.jpg"></li>
<li><img src="images/bg/thumbnail/pic4.jpg" width="80" height="44" dir="images/bg/pic4.jpg"></li>
<li><img src="images/bg/thumbnail/pic5.jpg" width="80" height="44" dir="images/bg/pic5.jpg"></li>
<li><img src="images/bg/thumbnail/pic6.jpg" width="80" height="44" dir="images/bg/pic6.jpg"></li>
<li><img src="images/bg/thumbnail/pic7.jpg" width="80" height="44" dir="images/bg/pic7.jpg"></li>
<li><img src="images/bg/thumbnail/pic8.jpg" width="80" height="44" dir="images/bg/pic8.jpg"></li>
<li><img src="images/bg/thumbnail/pic9.jpg" width="80" height="44" dir="images/bg/pic9.jpg"></li>
<li><img src="images/bg/thumbnail/pic10.jpg" width="80" height="44" dir="images/bg/pic10.jpg"></li>
</ul>
</div>
<div class="blur">
<ul>
<li><img src="images/bg/thumbnail/pic1.jpg" width="80" height="44" dir="images/bg/blur/pic1.jpg"></li>
<li><img src="images/bg/thumbnail/pic2.jpg" width="80" height="44" dir="images/bg/blur/pic2.jpg"></li>
<li><img src="images/bg/thumbnail/pic3.jpg" width="80" height="44" dir="images/bg/blur/pic3.jpg"></li>
<li><img src="images/bg/thumbnail/pic4.jpg" width="80" height="44" dir="images/bg/blur/pic4.jpg"></li>
<li><img src="images/bg/thumbnail/pic5.jpg" width="80" height="44" dir="images/bg/blur/pic5.jpg"></li>
<li><img src="images/bg/thumbnail/pic6.jpg" width="80" height="44" dir="images/bg/blur/pic6.jpg"></li>
<li><img src="images/bg/thumbnail/pic7.jpg" width="80" height="44" dir="images/bg/blur/pic7.jpg"></li>
<li><img src="images/bg/thumbnail/pic8.jpg" width="80" height="44" dir="images/bg/blur/pic8.jpg"></li>
<li><img src="images/bg/thumbnail/pic9.jpg" width="80" height="44" dir="images/bg/blur/pic9.jpg"></li>
<li><img src="images/bg/thumbnail/pic10.jpg" width="80" height="44" dir="images/bg/blur/pic10.jpg"></li>
</ul>
</div>
<header class="header">
</header>
<div class="wrapper">
</div>
</body>