رفتن به مطلب

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


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

سلام دوستان

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

لینک به ارسال

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

لینک به ارسال

سلام

من میخوام از این نمونه استفاده کنم (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 - و بعدشم باید استایلشو بدم ...

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

لینک به ارسال

سلام

من میخوام از این نمونه استفاده کنم (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>

لینک به ارسال

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

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

لینک به ارسال

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

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


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

لینک به ارسال

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

لینک به ارسال

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


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
}
});
});

لینک به ارسال

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


<?php echo catch_that_image() ?>

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

لینک به ارسال

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

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

لینک به ارسال

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


<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 کپی نمایید

لینک به ارسال

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

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

لینک به ارسال

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

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


</body>

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


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

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

لینک به ارسال

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


<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>

لینک به ارسال

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


<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 کپی کنید

لینک به ارسال

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

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

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

لینک به ارسال

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

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>

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

لینک به ارسال

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

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

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

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

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

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

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

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

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