• اطلاعیه ها

    • Morteza

      باهم بسازیم: اطلس ووکامرس و وردپرس   14/07/96

      تاپیک ایجاد شده برای بحث در جهت ایجاد یک منبع، ویکی، صفحات توضیحی و یا بخش آموزشی جامع برای وردپرس و متعلقات مختلف آن است. لطفا جهت مشارکت در این بحث، ارائه پیشنهاد و یا انتقاد به تاپیک فوق مراجعه کنید. باهم بسازیم: اطلس ووکامرس و وردپرس
بویکا

بهترین روش سیاه سفید کردن عکس ( قابل اجرا در اکثر مرورگرها)

5 پست در این موضوع قرار دارد

دوستان شاید خیلی ها مثل من بخوان افکت سیاه سفید به عکسهاشون بدن که بعد از رفتن موس روی عکس عکس رنگی بشه . من اکثر راههای این روش تو تست کردم که دو تا راه جواب داد که .

1 - فقط با css : تو این روش فقط با css انجام می شکه فقط یه مشکل داره . اونم اینه که تو گوگل کروم با انمیشن تغییر رنگ پیدا می کنه ولی تو فایرفاکس انمیشنش کار نمی کنه . تاکید می کنم کد کار میکنه فقط انیمیشنش کار نمی کنه . در حالی که واسه اونم نوشته شده . اینم کدش . اگه کسی بدونه چرا کار نمی کنه به ما هم بگه . مرسی


.picss img{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\'
values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); filter: gray; -
webkit-filter: grayscale(100%); filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%);
transition: 1.5s; -webkit-transition: 1.5s; -moz-transition: 1.5s; -o-transition: 1.5s; -ms-transition: 1.5s; -khtml-transition: 1.5s; }
.picss img:hover{ -webkit
-filter: grayscale(0%); -moz-filter: grayscale(0%); -ms-filter: grayscale(0%);-o-filter: grayscale(0%); filter: none; transition: 1.5s; -webkit
-transition: 1.5s; -moz-transition: 1.5s; -o-transition: 1.5s; -ms-transition: 1.5s; -khtml-transition: 1.5s; }

در کد بالا من عکسهایی که داخل تگ picss باشن رو افکتی کردم اگه بخواین کل عکسهای وب اینطوری بشه می تونین picss رو پاک کنین و فقط img بمونه که روی همه ی عکسها اعمال بشه .

2 - استفاده از css و جی کوئری : تو این روش هم می تونین با استفاده از جی کوئری و سی اس اس افکت رو اعمال کنین به درد خود من نخورد چون با جی کوئری سایتم تداخل داشت .

کد جی کوئری


<script>
// On window load. This waits until images have loaded which is essential
$(window).load(function(){

// Fade in images so there isn't a color "pop" document load and then on window load
$(".picss img").fadeIn(500);

// clone image
$('.picss img').each(function(){
var el = $(this);
el.css({"position":"absolute"}).wrap("<div class='img_wrapper' style='display: inline-block'>").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){
var el = $(this);
el.parent().css({"width":this.width,"height":this.height});
el.dequeue();
});
this.src = grayscale(this.src);
});

// Fade image
$('.picss img').mouseover(function(){
$(this).parent().find('img:first').stop().animate({opacity:1}, 1000);
})
$('.img_grayscale').mouseout(function(){
$(this).stop().animate({opacity:0}, 1000);
});
});

// Grayscale w canvas method
function grayscale(src){
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var imgObj = new Image();
imgObj.src = src;
canvas.width = imgObj.width;
canvas.height = imgObj.height;
ctx.drawImage(imgObj, 0, 0);
var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);
for(var y = 0; y < imgPixels.height; y++){
for(var x = 0; x < imgPixels.width; x++){
var i = (y * 4) * imgPixels.width + x * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
}

</script>

در کد بالا من در 3 جا از تگ .picss img استفاده کردم که می تونین picss رو با هر تگی که خواستین عوض کنین . فقط باید هر 3 شون هم نام باشن . عکستون هم به این صورت قرار بدید :


<div class="picss">
<img src="icondock.jpg"></div>

در ضمن فراموش نشه برای روش دوم باید کتابخانه jquery.min باید فراخوانی بشه . امیدوارم استفاه کرده باشین . در ضمن منتظر ایراد روش اول هستم اگه کسی بتونه کمک کنه

:)

ویرایش شده در توسط بویکا
3

به اشتراک گذاری این پست


لینک به پست

یکسری پلاگین با جی کوئری نوشته شده اما هنوز 100% درست کار نمیکنن

فعلا راه 100% مناسبی ندیدم

2

به اشتراک گذاری این پست


لینک به پست

یکسری پلاگین با جی کوئری نوشته شده اما هنوز 100% درست کار نمیکنن

فعلا راه 100% مناسبی ندیدم

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

0

به اشتراک گذاری این پست


لینک به پست

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

1

به اشتراک گذاری این پست


لینک به پست

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

احتمالا . با تشکر

0

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط poruamohammady
      سلام دوستان من یه مدت هست افزونه هایی که نصب می کنم ورد پرس بهم این اخطار هار رو میده کسی میتونه کمک کنه برای مثال تازگی ها افزونهwp-super cacheرو که نصب کردم این اومد قبلا هم چیزای دیگه بود مرسی اگر راهنمایی کنید

    • توسط mehran-b
      با سلام و عرض ادب خدمت تمامی کاربران انجمن وردپرس پارسی
       
      امروز یک کدی براتون قرار میدم که با استفاده از این کد میتونید به تمامی پست های یه دسته خاص از وب سایتتون متای robots با مقدار noindex,follow اضافه کنید.
       
      در صورت نصب بودن افزونه سئو وردپرس
      add_filter('wpseo_robots', 'mehran_specific_category_posts_add_noindex_yoast'); function mehran_specific_category_posts_add_noindex_yoast($content) { if(is_single() && in_category(777)) { return "noindex,follow"; } return $content; } در صورت نصب نبودن افزونه سئو وردپرس
      add_action('wp_head', 'mehran_specific_category_posts_add_noindex'); function mehran_specific_category_posts_add_noindex() { if(is_single() && in_category(777)) { $output = '<meta name="robots" content="noindex,follow" />' . "\n"; } echo $output; }  
      توجه1: کدهای بالا رو باید در فایل functions.php قالب سایتتون و زیر اولین
      <?php قرار بدید.
      توجه2: به جای عدد 777 در کد باید آیدی دسته ای رو قرار بدید که قراره پست هاش noindex,follow بشن.
       
      موفق باشید
    • توسط mbonjakhi
      باسلام
      سوالی از خدمتتون داشتم.
      میشه من یه دامنه .ir خریداری کنم و کد های یک سایت خاص رو کلا کپی کنم و تو دامنه خودم بکار ببرم؟
      یعنی اینکه دیگه نیازی به طراحی سایت نداشته باشه و به راحتی سایتم ساخته بشه؟
      اگه امکانش هست واسم یه مقدار توضیح بدید باید چیکار  کنم.
      ممنون
    • توسط behnam_buss
      سلام
      بخش دسته بندی محصولات در ووکامرس من غیرفعال شده و دسته بندی هایی که قبلا انجام داده بودم رو نمی تونم ببینم و ویرایش کنم و یا حتی وقتی یه دسته بندی جدید هم می سازم نمایش داده نمیشه.
      هر محصول هم که اضافه می کنم و جایی که باید محصول رو تو دسته بندی خودش قرار بدم بازم دسته بندی رو تو قسمت ویرایش خود محصول نمی بینم و نمی تونم تو دسته ی خاص خودش قرار بدم.
      ضمنا همین مشکل برای بخش فهرست های سایتم هم بوجود اومده و فهرست ها رو نمی بینم و کلا بخش فهرست های وردپرسم غیرفعال شده و نمی تونم فهرست جدید بسازم.
      نکته ای که هست اینه که فهرست ها و دسته بندی های قبلی که ساخته بودم تو خود سایت که داره نمایش داده میشه درسته و تو بخش مدیریت وردپرس این مشکلات وجود داره!!!
    • توسط iHooMan
      درود و وقت بخیر 
       
      من  توی پروژه ای لازم دارم از فرم وب سایت مبدا وارد یه وب سایت دیگه بشم .
      که دو حالت داره یکی یوزر معمولی - یکی همکار 
      واسه یوزر معمولی فقط کپچا میخواد سایت مقصد  واسه همکار یوزر و پسورد و کپچا 
      من میخوام با یه فرم تو وب سایت خودمون اطلاعات بگیرم پاس بدم توی اون وبسایت نمیخوام اون اطلاعات تو وبسایت مقصد پر بشه ( لوگین توی وب سایت ما انجام بشه بعد به صفحه لوگین شده اونور پاس بده )
      از چی استفاده کنم ajax یا ... ? 
      روند کاریش تو وردپرس کسی میتونه توضیح بده ؟
      پینوشت : وب سایت مقصد از md5.js واسه اینکرپشن دیتا استفاده میکنه . 
       
      سپاس