Kaz3m
01-19-2012, 04:05 PM
با سلام خدمت دوستان عزیز
بار دیگه با آموزشی نوین و ابتکاری با فناوری Jquery در خدمت شما هستیم .
شما دوستان عزیز میتونید با استفاده از این آموزش یک عکس که با کلیک بر روی اون به صفحه ثبتنام منتقل میشید رو قرار بدید البته با کمی افکت و زیباتر . این عکس هروقت صفحه لود بشه از بالای صفحه مثل تابلو پایین میاد و اگر روی تابلو کلیک کنید تابلو بالا میره و شما به صفحه ثبت نام منتقل میشید و اگر بر روی ضربدر کلیک کنید تابلو بالا میره و تا زمانی که دوباره صفحه لود نشه نمیاد . البته بگم که این تابلو فقط برای مهمان ها نمایش داده میشه .
ابتدا به پنل مدیریت برید و از سربرگ استایل ها به قسمت قالب ها (Templates) برید و قالب مورد نظر رو ویرایش کنید ، از لیست قالب overall_header رو انتخاب و باز کنید و بعد از این کد :
<head>
این کد رو قرار بدید :
<script src="[Only registered and activated users can see links]"></script>
<style>
img.aa {
position:absolute;
top: -180px;
left:0px;
opacity:0.8;
}
img.bb {
position:absolute;
top: -37px;
left: 235px
}
</style>
حالا این کد رو پیدا کنید :
<body
و این ها رو در خط بعدیش قرار بدید :
<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
<a href="[Only registered and activated users can see links]"><img src="[Only registered and activated users can see links]" id="d1" border="0" class="aa"></a>
<img src="[Only registered and activated users can see links]" id="d2" border="0" class="bb">
<!-- ENDIF -->
حالا با آخر کد ها برید و این کد رو هم در آخر قرار بدید :
اين پايين بجاي ستاره ها تگ script شروع رو قرار بديد .
**********
$(document).ready(function(){
$("#d1").animate({"top": "+=180px"}, 3000);
});
$(document).ready(function(){
$("#d2").animate({"top": "+=80px"}, 2970);
});
$("#d1").click(function(){
$("#d2").animate({"top": "-=80px"}, 3000);
$("#d1").animate({"top": "-=165px"}, 4000);
});
$("#d2").click(function(){
$("#d2").animate({"top": "-=80px"}, 3000);
$("#d1").animate({"top": "-=165px"}, 4000);
});
</script>
خوب حالا ذخیره کنید و و قالب رو یکبار ویرایش کنید و ازش لذت ببرید . اگر شفافیت اذیت کرد و خواستید تغییرش بدید در اولین کدی که گفتم قرار بدید opacity رو مقدارش رو تغییر بدید و یا حذف کنید .
هر مشکلی بود در قسمت سوالات بگید و اگر خواستید تغییراتی بدید باز هم در قسمت سوالات بگید تا براتون انجام بدم و قرار بدم .
اگر خواستید عکس هارو خودتون آپلود کنید در فایل demo.zip موجود هست .
با تشکر
بار دیگه با آموزشی نوین و ابتکاری با فناوری Jquery در خدمت شما هستیم .
شما دوستان عزیز میتونید با استفاده از این آموزش یک عکس که با کلیک بر روی اون به صفحه ثبتنام منتقل میشید رو قرار بدید البته با کمی افکت و زیباتر . این عکس هروقت صفحه لود بشه از بالای صفحه مثل تابلو پایین میاد و اگر روی تابلو کلیک کنید تابلو بالا میره و شما به صفحه ثبت نام منتقل میشید و اگر بر روی ضربدر کلیک کنید تابلو بالا میره و تا زمانی که دوباره صفحه لود نشه نمیاد . البته بگم که این تابلو فقط برای مهمان ها نمایش داده میشه .
ابتدا به پنل مدیریت برید و از سربرگ استایل ها به قسمت قالب ها (Templates) برید و قالب مورد نظر رو ویرایش کنید ، از لیست قالب overall_header رو انتخاب و باز کنید و بعد از این کد :
<head>
این کد رو قرار بدید :
<script src="[Only registered and activated users can see links]"></script>
<style>
img.aa {
position:absolute;
top: -180px;
left:0px;
opacity:0.8;
}
img.bb {
position:absolute;
top: -37px;
left: 235px
}
</style>
حالا این کد رو پیدا کنید :
<body
و این ها رو در خط بعدیش قرار بدید :
<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
<a href="[Only registered and activated users can see links]"><img src="[Only registered and activated users can see links]" id="d1" border="0" class="aa"></a>
<img src="[Only registered and activated users can see links]" id="d2" border="0" class="bb">
<!-- ENDIF -->
حالا با آخر کد ها برید و این کد رو هم در آخر قرار بدید :
اين پايين بجاي ستاره ها تگ script شروع رو قرار بديد .
**********
$(document).ready(function(){
$("#d1").animate({"top": "+=180px"}, 3000);
});
$(document).ready(function(){
$("#d2").animate({"top": "+=80px"}, 2970);
});
$("#d1").click(function(){
$("#d2").animate({"top": "-=80px"}, 3000);
$("#d1").animate({"top": "-=165px"}, 4000);
});
$("#d2").click(function(){
$("#d2").animate({"top": "-=80px"}, 3000);
$("#d1").animate({"top": "-=165px"}, 4000);
});
</script>
خوب حالا ذخیره کنید و و قالب رو یکبار ویرایش کنید و ازش لذت ببرید . اگر شفافیت اذیت کرد و خواستید تغییرش بدید در اولین کدی که گفتم قرار بدید opacity رو مقدارش رو تغییر بدید و یا حذف کنید .
هر مشکلی بود در قسمت سوالات بگید و اگر خواستید تغییراتی بدید باز هم در قسمت سوالات بگید تا براتون انجام بدم و قرار بدم .
اگر خواستید عکس هارو خودتون آپلود کنید در فایل demo.zip موجود هست .
با تشکر