رفتن به مطلب

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


پست های پیشنهاد شده

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

لینک به ارسال

ظاهرا پلاگینی واسه این کار وجود نداره!

من یه کدی پیدا کردم که نوشته تصاویر رو سیاه و سفید میکنه منتها برای وبلاگه.

میشه تو ای کد تغییراتی انجام داد که بشه تو وردپرس هم ازش استفاده کرد؟

----------------------------

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

ویرایش شده توسط fantome0
لینک به ارسال

سلام

شما باید بگردید دنبال یه پلاگین گالری که این استایل رو داشته باشه // ولی پلاگین های جاوا رایگانی هستن که روی عکس افکت هایی ایجاد میکنن ( مثلا سیاه سفید ، یا blur کردن ) ، با سرچ در گوگل این پلاگین ها رو پیدا کنید و با وردپرس ست کنید

لینک به ارسال

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

لینک به ارسال

من یک نمونه براتون پیوست کردم که افکت های مختلف روی عکس رو داره ;)

jquery_hover.zip

لینک به ارسال

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

الان تو این فایل که دادی 3 تا فایل داره :

picanim.css

jquery-1.7.2.min.js

jquery.picanim.min.js

اینهارو باید کجا قرار بدم ؟

لینک به ارسال

این سه فایل رو در قالبتون بارگذاری و سپس فراخوانیشون کنید.

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

با یک کد ساده هم این کار عملیه، به عنوان نمونه:


$(document).ready(function(){
$('.full-post-content img').picanim({initEf:'grayscale',hoverEf:'foldLeft'});
});

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

لینک به ارسال


$(document).ready(function(){
$('.full-post-content img').picanim({initEf:'grayscale',hoverEf:'foldLeft'});
});

این کد رو تو کدوم بخش سایت قرار بدم؟ قبل از head یا تو body ?

کد رو داخل تگ php قرار بدم یا script؟

من چون میخوام فقط واسه یه برگه جدا این افکت رو اعمال کنم احتیاجی به تغییر نام سلکتور هست؟

ویرایش شده توسط fantome0
لینک به ارسال

فرقی نمیکنه، اما چون فایل جاوااسکریپتی هست، بهتره در فوتر (یا همون body) قرارش بدید.

مسلما باید داخل تگ Script باشه. البته میتونید یک فایل با فرمت js هم بسازید و آدرس دهیش کنید.

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

لینک به ارسال

من الان این 3 فایل رو به این صورت فراخوای کردم تو هد سایت:


<link href="css/picanim.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.picanim.min.js" type="text/javascript"></script>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>

و کدی که شما دادی رو تو بادی به یان صورت قرار دادم:


<script>
$(document).ready(function(){
$('.full-post-content img').picanim({initEf:'grayscale',hoverEf:'foldLeft'});
});
</script>

الان فقط نمیدونم سلکتور متون قالبم چی هست. چطور پیداش کنم؟

این آدرس سایت موردنظر هست: سایت

لینک به ارسال

نکته اول:

این شکلی که شما آدرس دهی کردید در Html کاربرد داره، اما در وردپرس ما نمیتونیم به این صورت آدرس دهی کنیم، چرا که لینک سایت رو دربرنخواهد داشت.

باید از تابع Get_template، پیش از آدرس دهی ها استفاده کنید. به عنوان نمونه:


<link href="<?php echo get_template_directory_uri(); ?>/css/picanim.css" rel="stylesheet" type="text/css"/>

برای سلکتور هم کلاس cntnt_sec_news رو تست کنید.

لینک به ارسال

علی جان به همین صورتی که گفتی انجام دادم ولی کار نمیکنه.

الان من به اینصورت قرار دادم:


<link href="<?php echo get_template_directory_uri(); ?>/css/picanim.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>js/jquery.picanim.min.js"></script>
<script type="text/javascript" src="<?php bloginfo( 'stylesheet_directory' ); ?>js/jquery-1.7.2.min.js"></script>


<script>
$(document).ready(function(){
$('.cntnt_sec_news').picanim({initEf:'grayscale',hoverEf:'foldLeft'});
});
</script>

من تصاویر رو به صورت گالری قرار دادم.

شاید به این خاطره که کار نمیکنه

ویرایش شده توسط fantome0
لینک به ارسال

تو آدرس دهی اسکریپت ها، اسلش "/" رو قبل از نام فولدر js جا انداختی به همین خاطر فایلها به درستی در سورس قالب بارگذاری نشدن.

* راستی درستش اینه که کتابخانه جی کوئری قبل از بقیه اسکریپت ها قرار بگیره، بنابراین بهتره جای دو اسکریپت رو عوض کنی.

لینک به ارسال

الان درست شده ولی تصاویری که تو صفحه گذاشت بودم دیگه نمایش داده نمیشن(وقتی صفه رو رفرش میکنم عکس خیلی سریع نمایش داده میشه بعد یهو غیب میشه)

لطفا یه نگاهی بکنید: سایت

لینک به ارسال

الان که کلا هیچی رو نشون نمیداد! :)

این مشکل به خاطر حذف تگ img.

سلکتور رو باید به صورت زیر به کار ببرید:


.cntnt_sec_news img

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...