» افکت نمایش صفحه با استفاده از جی کوئری

اخبار سایت : پلن تبلیغاتی EG با نمایش تبلیغات متنی شما به همراه لوگو گوگل پلاس شما علاوه بر افزایش رنک گوگل سبب افزایش محبوبیت شما در گوگل می شود - تبلیغات در تک طرح
تبلیغات شما
تبلیغات شما در این مکان, ماهانه 10.000 تومان
YourSite.Com
تبلیغات شما
تبلیغات شما در این مکان, ماهانه 10.000 تومان
YourSite.Com
سرورها
سرورها، فروش فضای وب و دامنه و اعطای نمایندگی فروش
تبلیغات شما
تبلیغات شما در این مکان, ماهانه 10.000 تومان
YourSite.Com
تبلیغات شما
تبلیغات شما در این مکان, ماهانه 10.000 تومان
YourSite.Com
تبلیغات شما
تبلیغات شما در این مکان, ماهانه 10.000 تومان
YourSite.Com
کمپ خبری
اخبار ورزشی ، حوادث ، جهان سیاست ، دنیای فرهنگ و هنر
News.MyCamp.Ir
طراحی وب سایت
طراحی گرافیک سایت
AzinWeb.Com
تبلیغات شما
تبلیغات شما در این مکان, ماهانه 10.000 تومان
YourSite.Com
فال حافظ
نیت کنید و با اشاره فال حافظ بگیرید . قدرت گرفته از تک طرح
Fal.Taktarh.Com
تبلیغات شما
تبلیغات شما در این مکان, ماهانه 10.000 تومان
YourSite.Com
تبلیغات شما
تبلیغات شما در این مکان با نماش گوگل پلاس شما ماهانه 20.000 تومان
YourSite.Com
تبلیغات شما
تبلیغات شما در این مکان, ماهانه 10.000 تومان
YourSite.Com
تبلیغات شما
تبلیغات شما در این مکان, ماهانه 10.000 تومان
YourSite.Com
تبلیغات شما
تبلیغات شما در این مکان با نماش گوگل پلاس شما ماهانه 20.000 تومان
YourSite.Com
فال حافظ شیرازی | قدرت گرفته از تک طرح
با استفاده از این باکس فال حافظ بگیرید , ابتدا نیت کنید
شاید بهتر باشد برای شادی روح حافظ، صلوات یا فاتحه ای نثار نماییم
براي نمايش فال بر روي اعلان رو به رو کليک کنيد

افکت نمایش صفحه با استفاده از جی کوئری


در ادامه ی مطالب و نوشته های اسکریپت های جی کوئری و آجاکس برای شما دوستان افکت نمایش صفحه ی جدید به کمک این فناوری رو آماده کردم که صفحه ی جدید در باکسی در همان صفحه نمایش داده می شود

برای مشاهده ی دمو و آموزش به ادامه ی مطلب رجوع کنید

ابتدا فایل های زیر را دانلود کنید

دانلود اسکریپت های لازمه

فایل بالا رو بعد از دانلود از حالت زیپ خارج کرده و پوشه ی js  را داخل پوشه public_html یا www هاست خود آپلود کنید

سپس پوسته ی سایت رو ویرایش کرده و کد زیر را پیدا کنید
</head>
قبل از کد بالا کد زیر را قرار دهید
<script type="text/javascript" src="[sitename]/js/jquery.min.js"></script>
<script type="text/javascript" src="[sitename]/js/main.js"></script>
<link href="[sitename]/js/fancy.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
$(document).ready(function(){
 $("a.fancy").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'overlayShow': true });
});
</script>

* در کد بالا جای [sitename] آدرس سایت خود را وارد کنید
در مرحله ی بعد لینک دلخواه خود را انتخاب کرده و class=”fancy” را مانند نمونه ی زیر به آن اضافه کنید
<a class="fancy" href="http://www.taktarh.com">تک طرح</a>

دانلود نمونه

مشاهده ی دمو

انتشار از تک طرح

نهایت گرافیک
نایس تو نت گفته :

رو وردپرس جواب نمیده داداش
شایدم من نمید.نم رو کدوم فایل بیارم
توضیح میدین؟


علی هدشی گفته :

حط لود جی کوئری رو حذف کنید . احتمالا قالب شما از کتابخانه حی کوئری استفاده میکنه


نایس تو نت گفته :

از کجاش این کارو بکنم؟
شرمنده داداش تازه کاریم دیگه


محمد رسول گفته :

سلام وبسایت زیبا و پر محتوایی دارید . خوشحال میشم به ما هم در طراح ها سری بزنید . موفق باشید . به امید دیدار در طراح ها


علی هدشی گفته :

سلام
خط زیر رو از کد قرار داده شده حذف کنید
<script type="text/javascript" src="[sitename]/js/jquery.min.js"></script>


نایس تو نت گفته :

نمیشه داداش این کارم کردم


علی هدشی گفته :

لینک صفحه وبسایت رو بزارید تا بررسی کنم
افکت بالا هم نصب کنید


نایس تو نت گفته :

افکت بالا تو مسیر

http://www.nice2net.com/wp-content/themes/js

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


علی هدشی گفته :

در مسیر بالا
در پوشه ی js فایلی با نام demo.html بسازید و کد های مربوطه رو داخلش بریزید


نایس تو نت گفته :

نشد دادا بیخیال
ممنون که تا اینجا کمک کردین


علی هدشی گفته :

خواهش
میتونید فایل آماده رو دانلود کنید و روی هاست آپلود کنید ( ویرایش لینک های داخل دمو فراموش نشه )


نایس تو نت گفته :

این کارو کردم من میخواستم تو یه بلوک دکمه بزارم که با زدنش بیاد بالا
ولی سایت شما بالا اومد به جاش :d


علی هدشی گفته :

در قسمت آخر جای
href="www.taktarh.com"
جای تک طرح آدرس صفحه مورد نظر رو بزارید


نایس تو نت گفته :

نشد که نشد
دادا میشه شما خودتون تو سایتتون جا بدین؟
البته تو وردپرس نه html


علی هدشی گفته :

در این صفحه قرار داده شده


نایس تو نت گفته :

خب داداش این یه صفحس که جدا از قالبتونه من میخواستم رو قالب وردپرسم بیارم خو تو صفحه جدا خودمم میتونم بیارمش


علی هدشی گفته :

یه بار داخل قالب وردپرس تست کن . اگر مشکلی داشت پیام بزار تا کد ها رو چک کنم ….


نایس تو نت گفته :

داداش بازم مشکل داره به جای اینکه افکت بالا بیاد میره لینک که تو کد هست ضمنا من کد ها رو تو ایدنکس قالبم بعد ار تگ هد میزارم


meisam گفته :

سلام

علی آقا شما چقدر خوبین ، خیلی شما رو دوست داریم .

با تشکر


ali rokh گفته :

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


علی هدشی گفته :

سلام . اگه منظورتون اینه که لینک های داخل باکس رو داخل تب جدید باز کنه میتونید روی لینک کد زیر رو تست کنید
target="_blank"


ali rokh گفته :

حل شد . مرسی


شهریار گفته :

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


نایس تو نت گفته :

هنوز که هنزه دنبالشم ولی اصلا جور نمیشه


شاهین گفته :

این تو وبلاگ هم اجرا میشه ؟؟؟


علی هدشی گفته :

بله مشکلی نداره


ahmad گفته :

چطور میتونم اندازه صفحه نمایش داده شده با استفاده از جی کوئری را بزرگتر کنم؟؟

کجا را باید ویرایش کنم؟؟؟


علی هدشی گفته :

برای ویرایش عرض در فایل main.js کد زیر را پیدا کنید و عدد عرض رو تغییر دهید
frameWidth:600
و برای ویرایش ارتفاع در فایل main.js کد زیر را پیدا کنید و عدد ارتفاع رو تغییر دهید
frameHeight:400
موفق باشید


ahmad گفته :

بابت راهنماییتون ممنون
یک مشکل که وجود داره اینه که تصویر loading بصورت ثابت نشون داده نمیشه و چشمک زن هستش
چطور میشه تصویر را درسا نمایش داد و زیر آن عبارت “چند لحظه صبر نمایید…” را هم درج کرد؟؟

اینم یه سوپرایز:
برای راحتی ، دوستان بجای دستکاری فایل main.js میتونند این کد را
$(“a.fancy”).fancybox({ ‘zoomSpeedIn’: 300, ‘zoomSpeedOut’: 300, ‘frameWidth’:800, ‘frameHeight’:600, ‘overlayOpacity’:0.1, ‘overlayShow’: true });
بجای
$(“a.fancy”).fancybox({ ‘zoomSpeedIn’: 300, ‘zoomSpeedOut’: 300, ‘overlayShow’: true });
استفاده کنند


ahmad گفته :

آقا علی مشکل را نتونستین حل کنید؟!

“یک مشکل که وجود داره اینه که تصویر loading بصورت ثابت نشون داده نمیشه و چشمک زن هستش
چطور میشه تصویر را درست نمایش داد و زیر آن عبارت “چند لحظه صبر نمایید…” را هم درج کرد؟؟”


علی هدشی گفته :

برای ثابت شدن لودینگ فایل main.js رو از اینجا دانلود کنید و جایگزین فایل اصلی کنید


ahmad گفته :

ممنون آقا علی


محمد سلطانی گفته :

سلام آقا ممنون از این پستتون

نمیشه این رو در صفحه به صورت اتومات بدون کلیک بر روی لینک فعال کرد

یعنی با باز شدن صفحه خودش روی صفحه بالا بیاد؟؟؟

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


محمدرضا گفته :

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


علی هدشی گفته :

سلام . با این کار دو پایگاه جی کوئری لود میشه و مشکل پیش میاد . جی کوئری موجود در این آموزش رو حذف کنید ! ( چون یه بار اسلایدر جی گوئری رو لود میکنه رو قالیتون )


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


تبادل لینک

عضویت در خبرنامه ی سایت آپلود سنتر پرتال اطلاع رسانی تک طرح تقویم سال 91


0
تنظیمات سایت