אפקט הפיכה (Flip) עם jQuery ששווה להכיר!

[php] // שנו את המסלולים של הקבצים למסלולים שמתאימים לאתר שלכם // וודאו כי flippy נטען אחרי jQuery <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.flippy.js"></script> [/php]

נוסיף את פקודת הjQuery שתפעיל את flippy בדף שלנו. שמים קוד זה מתחת לפקודות ההכללה בחלק הקודם או בתחתית הדף שלכם מעל התג הסוגר של הBODY.

[html] <script type="text/javascript"> $(function(){

$("#btn-reverse").on("click",function(e){ $(".flipbox").flippyReverse(); e.preventDefault(); });

$("#btn-left").on("click",function(e){ $(".flipbox").flippy({ color_target: "red", direction: "left", duration: "750", verso: '<a href="https://sagive.co.il/professional-library/web-marketing/create-google-plus-business-page/" target="_blank"><img src="https://sagive.co.il/wp-content/uploads/2013/05/how-to-create-a-business-page-in-gplus.jpg" alt="איך יוצרים דף לעסקים בגוגל פלוס" class="nob" /></a>', }); e.preventDefault(); });

$("#btn-right").on("click",function(e){ $(".flipbox").flippy({ color_target: "red", direction: "right", duration: "750", verso: '<a href="https://sagive.co.il/professional-library/web-marketing/penguin-update/" target="_blank"><img src="https://sagive.co.il/wp-content/uploads/2013/05/learn-about-penguin-update.jpg" alt="למדו עוד על עדכון פינגווין" class="nob" /></a>', }); e.preventDefault(); });

$("#btn-top").on("click",function(e){ $(".flipbox").flippy({ color_target: "#b6d635", direction: "top", duration: "750", verso: '<a href="https://sagive.co.il/professional-library/web-marketing/25-jewish-internet-superstars/" target="_blank"><img src="https://sagive.co.il/wp-content/uploads/2013/05/25-guys-that-shaped-the-web.jpg" alt="25 יזמים ישראליים שעשו לנו את הרשת" class="nob" /></a>', }); e.preventDefault(); });

$("#btn-bottom").on("click",function(e){ $(".flipbox").flippy({ color_target: "#03588C", direction: "bottom", duration: "750", verso: '<a href="https://sagive.co.il/professional-library/web-marketing/seo-clients-type/" target="_blank"><img src="https://sagive.co.il/wp-content/uploads/2013/05/clients-type-seo.jpg" alt="סוגי לקוחות בקידום אתרים" /></a>', }); e.preventDefault(); });

SyntaxHighlighter.all(); }) </script> [/html]

כדי להשתמש בוורדפרס שנו את השורה הבאה

[html] $(function(){ [/html]

לשורה הזאת

[html] jQuery(function($){ [/html]

[html] <div class="flippyBox"> <div class="flipbox-container box100"> <div id="flipbox1" class="flipbox tcenter"> <a href="https://sagive.co.il/seo-blog/50-seo-guys-about-10-seo-factors/" target="_blank"><img src="https://sagive.co.il/wp-content/uploads/2014/01/50-seo-on-10-params.jpg" alt="50 מקדמים על 10 פרמטרים" class="nob" /></a> </div> </div>

<ul id="action-btn"> <li><a class="btn" id="btn-left" href="#">שמאלה</a></li> <li><a class="btn" id="btn-right" href="#">ימינה</a></li> <li><a class="btn" id="btn-top" href="#">למעלה</a></li> <li><a class="btn" id="btn-bottom" href="#">למטה</a></li> <li><a class="btn" id="btn-reverse" href="#">חזרה</a></li> <br class="clear"/> </ul>

</div> [/html]

[html] <style type="text/css"> .flipbox-container.box50{display:inline-block;} .flipbox{height:300px;background:#2893b9;position:relative;} .flipbox span{position:absolute;bottom:10px;left:10px;} .flipbox span.big{font-size:65px;top:110px;left:190px;} .box100{width:100%;margin-bottom:15px;} .box50{width:49.180327868%;float:left;} .odd{margin-right:1.639344262%;} .btn{padding:5px 10px;margin:0 5px;background:#2893b9;color:#FFF;text-decoration:none;display:block;} #action-btn{margin:0 auto 15px;padding:0;width:350px;} #action-btn a{color: #fff; font-weight: bold; text-decoation: none;} #action-btn li{float:left;list-style-type:none;} #btn-left{background:red;}#btn-top{background:#b6d635;} #btn-bottom{background:#03588C;} #social{position:absolute;top:55px;left:-100px;width:120px;} </style> [/html]

הפרטים הקטנים עושים את ההבדל:

רוצים לשנות את המהירות? את הצבע רקע? את כיוון התנועה? בואו נעבור על האפשרויות בעזרת פונקציה לדוגמה

* שימו לב להערות בתוך הקוד

בואו נעבור שורה על הפונקציה המלאה

[js] $("#btn-bottom").on("click",function(e){ $(".flipbox").flippy({ color_target: "#03588C", direction: "bottom", duration: "750", verso: '<a href="https://sagive.co.il/professional-library/web-marketing/seo-clients-type/" target="_blank"><img src="https://sagive.co.il/wp-content/uploads/2013/05/clients-type-seo.jpg" alt="סוגי לקוחות בקידום אתרים" /></a>', }); e.preventDefault(); }); [/js]

ראשית, נסתכל על המעטפת!

[js] // המעטפת של הפונקציה אומרת: // כאשר לוחצים על כפתור עם ID בשם btn-button תבצע את הפעולה בתוך המעטפת $("#btn-bottom").on("click",function(e){

e.preventDefault(); // שורה זאת אומרת להמנע מהפעולה האוטומטית של הלינק }); [/js]

איך משנים את האפשרויות של כל ריבוע

[js] $(".flipbox").flippy({ color_target: "#03588C", // צבע הרקע של הריבוע direction: "bottom", // סוג המעבר אל הריבוע duration: "750", // כמה זמן יקח המעבר verso: 'מה שכאן יוצג בתוך הריבוע', }); [/js]