کد سیاه و سفید کردن عکس در CSS

mahdi.a · اسفند 91

سلام دوستان

*کد سیاه و سفید کردن عکس رو تو CSS میخوام ، تو گوگل سرچ کردم ولی مشکلاتی داشتن یکیش این بود که فقط مرورگر کروم اون کد رو میخوند ، حالا اگه کدی هستش که تمام مرورگرها ساپورتش کنن خیلی عالی میشه ...

**Morteza** · اسفند 91

برای css نیست اما برای جاوااسکریپت یکسری موارد هست.

mahdi.a · اسفند 91

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

imanfakhar · اسفند 91

سلام چک کنید

http://spyrestudios....ts-black-white/

http://gianlucaguarini.com/canvas-experiments/jQuery.BlackAndWhite/

mahdi.a · اسفند 91

سلام

من میخوام از این نمونه استفاده کنم (http://gianlucaguarini.com/canvas-experiments/jQuery.BlackAndWhite/)

1 - این تیکه کد من تو فایل header.php ، یعمی همون جایی که میخوام عکسها رو سیاه و سفید کنم ، هستش :


<li>
  <P>تاریخ انتشار : <?php the_time('j F Y') ?></p>
  <span><?php the_title(); ?></span>
  <a class="bwWrapper" href="<?php the_permalink() ?>">
  <canvas height="217" width="175" style="position: absolute; top: 0px; left: 0px; width: 201px; height: 142px; display: block;">
  </canvas>
  <img height="217" width="175" src="<?php echo catch_that_image() ?>">
  </a>
</li>

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

2 - بعد باید


<script src="js/jQuery.BlackAndWhite.js"></script>

این اسکریپت رو قبل از تگ header باید بزارم ، یعنی الان من باید یه فایل js بسازم و اطلاعات زیر رو داخلش بریزم که در واقع میشه همین اسکریپت


$(window).load(function(){
    $('.bwWrapper').BlackAndWhite({
	    hoverEffect : true, // default true
	    // set the path to BnWWorker.js for a superfast implementation
	    webworkerPath : false,
	    // for the images with a fluid width and height
	    responsive:true,
	    // to invert the hover effect
	    invertHoverEffect: false,
	    speed: { //this property could also be just speed: value for both fadeIn and fadeOut
		    fadeIn: 200, // 200ms for fadeIn animations
		    fadeOut: 800 // 800ms for fadeOut animations
	    }
    });
});

3 - و بعدشم باید استایلشو بدم ...

حالا این راه درسته برای اجرا یا نه ؟

imanfakhar · اسفند 91

سلام
من میخوام از این نمونه استفاده کنم (http://gianlucaguari....BlackAndWhite/)
1 - این تیکه کد من تو فایل header.php ، یعمی همون جایی که میخوام عکسها رو سیاه و سفید کنم ، هستش :
<li>
<P>تاریخ انتشار : <?php the_time('j F Y') ?></p>
<span><?php the_title(); ?></span>
<a class="bwWrapper" href="<?php the_permalink() ?>">
<canvas height="217" width="175" style="position: absolute; top: 0px; left: 0px; width: 201px; height: 142px; display: block;">
</canvas>
<img height="217" width="175" src="<?php echo catch_that_image() ?>">
</a>
</li>
البته من این تیکه رو طبق این سایت درست کردم ...
2 - بعد باید
<script src="js/jQuery.BlackAndWhite.js"></script>
این اسکریپت رو قبل از تگ header باید بزارم ، یعنی الان من باید یه فایل js بسازم و اطلاعات زیر رو داخلش بریزم که در واقع میشه همین اسکریپت
$(window).load(function(){
$('.bwWrapper').BlackAndWhite({
	 hoverEffect : true, // default true
	 // set the path to BnWWorker.js for a superfast implementation
	 webworkerPath : false,
	 // for the images with a fluid width and height
	 responsive:true,
	 // to invert the hover effect
	 invertHoverEffect: false,
	 speed: { //this property could also be just speed: value for both fadeIn and fadeOut
		 fadeIn: 200, // 200ms for fadeIn animations
		 fadeOut: 800 // 800ms for fadeOut animations
	 }
});
});
3 - و بعدشم باید استایلشو بدم ...
حالا این راه درسته برای اجرا یا نه ؟

اگر فرض کنیم که فایل jQuery.BlackAndWhite.js را در پوشه ای بنام js در قالب خود آپلود کرده باشید کد فراخوانی شما می شود


<script src="<?php bloginfo('template_url'); ?>/js/jQuery.BlackAndWhite.js"></script>

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


<script src="<?php bloginfo('url'); ?>/js/jQuery.BlackAndWhite.js"></script>

nikanwp · اسفند 91

آموزش + سورس + دمو

mahdi.a · اسفند 91

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

ادرس سایتم تو امضا هستش

imanfakhar · اسفند 91

jquery در سایتتان فعال است؟

برای اطمینان این کد را به header سایت اضافه کنید و تست بگیرید


  <script src="http://code.jquery.com/jquery-latest.js"></script>

mahdi.a · اسفند 91

اضافه کردم ولی نشد !!!

imanfakhar · اسفند 91

اگر سایتتون آنلاینه آدرس بگذارید

mahdi.a · اسفند 91

تو امضا بود .. www.takwarez.asia

**Morteza** · اسفند 91

ريالبل اجرا روی پوسته روی یک فایل html معمولی تست بگیرید ببینید درست کار میکنه؟

imanfakhar · اسفند 91

من عکسی که داخل لینکی با کلاس


bwWrapper

باشه ندیدم

عکس ها باید به این شکل باشند


<ul class="wrapper">
	    <li>
		    <a href="#" class="bwWrapper">
			    <img  src="files/image1.jpg" width="100%"  />
		    </a>
	    </li>
	    <li>
		    <a href="#" class="bwWrapper">
			    <img  src="files/image2.jpg" width="100%"  />
		    </a>
	    </li>
	    <li>
		    <a href="#" class="bwWrapper">
			    <img  src="files/image3.jpg" width="100%"  />
		    </a>
	    </li>
	    <li>
		    <a href="#" class="bwWrapper">
			    <img  src="files/image4.jpg" width="100%"  />
		    </a>
	    </li>
	    <li>
		    <a href="#" class="bwWrapper">
			    <img  src="files/image5.jpg" width="100%"  />
		    </a>
	    </li>
	    <li>
		    <a href="#" class="bwWrapper">
			    <img  src="files/image6.jpg" width="100%"  />
		    </a>
	    </li>
	    <li>
		    <a href="#" class="bwWrapper">
			    <img  src="files/image7.jpg" width="100%"  />
		    </a>
	    </li>
	    <li>
		    <a href="#" class="bwWrapper">
			    <img  src="files/image8.jpg" width="100%"  />
		    </a>
	    </li>
    </ul>

و این هم کد فراخوانیش


$(window).load(function(){
    $('.bwWrapper').BlackAndWhite({
	    hoverEffect : true, // default true
	    // set the path to BnWWorker.js for a superfast implementation
	    webworkerPath : false,
	    // for the images with a fluid width and height
	    responsive:true,
	    // to invert the hover effect
	    invertHoverEffect: false,
	    speed: { //this property could also be just speed: value for both fadeIn and fadeOut
		    fadeIn: 200, // 200ms for fadeIn animations
		    fadeOut: 800 // 800ms for fadeOut animations
	    }
    });
});

mahdi.a · اسفند 91

من این کد سیاه و سفید رو برای اون اسلایدر فیلمهای ایرانی که سه تا هستنو میخوام ، اونجا هم من از عکس استفاده نکردم از تابع


<?php echo catch_that_image() ?>

این دارم استفاده میکنم ...

عبدالماجد · اسفند 91

به این شکل تغییر بدید :

<div class="bwWrapper" >
<?php echo catch_that_image() ?>
</div>

mahdi.a · اسفند 91

خب اینجوری که اصلا عکسی رو نشون نمیده !!!!

imanfakhar · اسفند 91

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


<a href="http://www.takwarez.asia/%d8%af%d8%a7%d9%86%d9%84%d9%88%d8%af-%d9%81%db%8c%d9%84%d9%85-%d8%a7%db%8c%d9%86%d8%ac%d8%a7-%d8%a7%db%8c%d8%b1%d8%a7%d9%86%d9%87/">
<div class="bwWrapper">
    <img src="http://www.takwarez.asia/pic/film/Inja-Iraneh.jpg" height="217" width="177">
</div>
<script type="text/javascript">
$(window).load(function(){
    $('.bwWrapper').BlackAndWhite({
	    hoverEffect : true, // default true
	    // set the path to BnWWorker.js for a superfast implementation
	    webworkerPath : false,
	    // for the images with a fluid width and height
	    responsive:true,
	    speed: { //this property could also be just speed: value for both fadeIn and fadeOut
		    fadeIn: 200, // 200ms for fadeIn animations
		    fadeOut: 800 // 800ms for fadeOut animations
	    }
    });
});
</script>
</a>

که کلا اشتباه نه div می تونه داخل a قرار بگیره و نه کد فرخوانی باید لوپ بشه کد را بر دارید و لایه div را هم حذف کنید اگر می توانید کلاس را به پیوند ها اضافه کنید و الا یک لایه بالاتر بسازید یعنی هر سه اسلاید شما در داخل یک div با کلاس گفته شده باشند و کد فراخوانی را به این شکل تغییر دهید


<script type="text/javascript">
$(window).load(function(){
    $('.bwWrapper a').BlackAndWhite({
	    hoverEffect : true, // default true
	    // set the path to BnWWorker.js for a superfast implementation
	    webworkerPath : false,
	    // for the images with a fluid width and height
	    responsive:true,
	    speed: { //this property could also be just speed: value for both fadeIn and fadeOut
		    fadeIn: 200, // 200ms for fadeIn animations
		    fadeOut: 800 // 800ms for fadeOut animations
	    }
    });
});
</script>

و کد را در فایل footer قبل از بسته شدن تگ body کپی نمایید

mahdi.a · اسفند 91

که کلا اشتباه نه div می تونه داخل a قرار بگیره و نه کد فرخوانی باید لوپ بشه کد را بر دارید و لایه div را هم حذف کنید اگر می توانید کلاس را به پیوند ها اضافه کنید و الا یک لایه بالاتر بسازید یعنی هر سه اسلاید شما در داخل یک div با کلاس گفته شده باشند و کد فراخوانی را به این شکل تغییر دهید

حقیقتا متوجه نشدم چی گفتید ، الان من تگ div رو از تو تگ a باید حذف کنم ، بعد لوپ شدن کد فراخوانی یعنی چی ؟

imanfakhar · اسفند 91

ببینید در حالت فعلی کد را در ایی کپی کردید که برای عهر عکس یکبار ساخته می شه که این اشتباهه

div را از داخل لینک ها خارج کنید به لایه ی اصلی که هر سه عکس درون قرار دارند کلاس bwWrapper را بدهید و کدی که اصلاح کردم را در فایل footer.php و قبل از


</body>

قرار دهید در ضمن کد


<script src="http://code.jquery.com/jquery-latest.js"></script>

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

mahdi.a · اسفند 91

منظورتون اینجوریه ؟


<li>
<div class="bwWrapper" >
<P>تاریخ انتشار : <?php the_time('j F Y') ?></p>
<span><?php the_title(); ?></span>
<a href="<?php the_permalink() ?>">
    <img height="217" width="177" src="<?php echo catch_that_image() ?>" />
</a>
</div>
</li>

imanfakhar · اسفند 91

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


<li>
<P>تاریخ انتشار : <?php the_time('j F Y') ?></p>
<span><?php the_title(); ?></span>
<a href="<?php the_permalink() ?>" class="bwWrapper" >
	    <img height="217" width="177" src="<?php echo catch_that_image() ?>" />
</a>
</li>

در این حالت دیگر نیازی به تغییر کد js هم نیست همان کد اولی را در footer.php کپی کنید

mahdi.a · اسفند 91

بازم نشد !!!!!!! دیگه چه کاری به سرش بدم ؟؟؟؟؟؟

imanfakhar · اسفند 91

چه عرض کنم مسئله ی پیچیده ای نیست از صفحه ای که لینکش رو داده بدوم سورس کد بگیرید و بخش دموش رو ببینید کاملا متوجه می شید

این افزونه هم هست البته کمی فرق می کنه ولی به تستش می ارزه

http://wordpress.org/extend/plugins/grayscale/

mahdi.a · اسفند 91

این راه حله من درسته ؟

1 - قبل از تگ </head>


<script src="<?php bloginfo('template_url'); ?>/js/jQuery.BlackAndWhite.js"></script>
<script src="<?php bloginfo('template_url'); ?>/js/jquery.min.js"></script>

2 - اینم کد اسلایدر


<li>
<P>تاریخ انتشار : <?php the_time('j F Y') ?></p>
<span><?php the_title(); ?></span>
<a href="<?php the_permalink() ?>" class="bwWrapper" >
			    <img height="217" width="177" src="<?php echo catch_that_image() ?>" />
</a>
</li>

3 - این کد هم قبل از تگ </body>


<script type="text/javascript">
$(window).load(function(){
	    $('.bwWrapper').BlackAndWhite({
			    hoverEffect : true, // default true
			    // set the path to BnWWorker.js for a superfast implementation
			    webworkerPath : false,
			    // for the images with a fluid width and height
			    responsive:true,
			    speed: { //this property could also be just speed: value for both fadeIn and fadeOut
					    fadeIn: 200, // 200ms for fadeIn animations
					    fadeOut: 800 // 800ms for fadeOut animations
			    }
	    });
});
</script>

پس اگه درسته چرا مشکل حل نمیشه ؟

کد سیاه و سفید کردن عکس در CSS

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

mahdi.a 432

لینک به ارسال

Morteza 34190

لینک به ارسال

mahdi.a 432

لینک به ارسال

imanfakhar 26231

لینک به ارسال

mahdi.a 432

لینک به ارسال

imanfakhar 26231

لینک به ارسال

nikanwp 629

لینک به ارسال

mahdi.a 432

لینک به ارسال

imanfakhar 26231

لینک به ارسال

mahdi.a 432

لینک به ارسال

imanfakhar 26231

لینک به ارسال

mahdi.a 432

لینک به ارسال

Morteza 34190

لینک به ارسال

imanfakhar 26231

لینک به ارسال

mahdi.a 432

لینک به ارسال

عبدالماجد 3203

لینک به ارسال

mahdi.a 432

لینک به ارسال

imanfakhar 26231

لینک به ارسال

mahdi.a 432

لینک به ارسال

imanfakhar 26231

لینک به ارسال

mahdi.a 432

لینک به ارسال

imanfakhar 26231

لینک به ارسال

mahdi.a 432

لینک به ارسال

imanfakhar 26231

لینک به ارسال

mahdi.a 432

لینک به ارسال

لطفا برای ارسال دیدگاه وارد شوید