mahdi.a

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

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

سلام دوستان

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

0

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


لینک به پست

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

3

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


لینک به پست

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

0

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


لینک به پست

سلام

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

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

0

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


لینک به پست

سلام

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

3

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


لینک به پست

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


لینک به پست

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

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

0

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


لینک به پست

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

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


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

4

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


لینک به پست

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

0

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


لینک به پست

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

0

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


لینک به پست

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

0

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


لینک به پست

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

2

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


لینک به پست

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


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

4

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


لینک به پست

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


<?php echo catch_that_image() ?>

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

0

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


لینک به پست

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

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

3

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


لینک به پست

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

0

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


لینک به پست

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


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

1

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


لینک به پست

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

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

0

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


لینک به پست

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

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


</body>

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


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

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

1

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


لینک به پست

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


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

0

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


لینک به پست

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


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

3

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


لینک به پست
:( بازم نشد !!!!!!! دیگه چه کاری به سرش بدم ؟؟؟؟؟؟
0

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


لینک به پست

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

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

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

2

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


لینک به پست

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

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>

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

0

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


لینک به پست

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

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

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

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


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

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

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


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