romaissa
11-01-2013, بتوقيت غرينيتش 04:28 PM
http://www.dzbatna.com/images/icons/icon20.gif ظƒطھط¨ ط¥ظ„ظƒطھط±ظˆظ†ظٹط© ط«ظ„ط§ط«ظٹط© ط§ظ„ط£ط¨ط¹ط§ط¯ ظ…ط¹ JQuery iBook (http://www.dzbatna.com/t2146417/)
http://michael-designs.com/wp-content/uploads/ibook.jpg (http://michael-designs.com/كتب-إلكترونية-ثلاثية-الأبعاد-مع-ibook/)
http://michael-designs.com/wp-content/uploads/online_demo.jpg (http://michael-designs.com/scripts/jquery-ibook/) http://michael-designs.com/wp-content/uploads/download_03.jpg (http://michael-designs.com/كتب-إلكترونية-ثلاثية-الأبعاد-مع-ibook/)
هل لديك مجموعة صور وتود تجميعهم في شكل ألبوم ؟ هل لديك مجموعة صفحات تود تجميعهم في شكل كتاب جذاب ثلاثي الأبعاد ؟ أقدم لك iBook !
~ كود code الـ HTML ~
كالعادة نبدأ بملف html5 بسيط مثل الموضح أسفل “ملف index.php”
رمز Code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Making an Instagram Magazine | Tutorialzine Demo</title> <!-- ملفات الإستايل style --> <link rel="stylesheet" href="assets/css/styles.css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="magazine" class="centerStart"> <!-- كود code الصور هنا --> </div> <!-- الجافاسكربت --> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="assets/js/turn.js"></script> <script src="assets/js/script.js"></script> </body> </html>
كما نرى ، قمنا بإستدعاء ملفات الإستايل style ، وملفات مكتبة turn.js ، وملف الإعدادات كباقي الإسكربتات … يوجد في منتصف الملف div#magazine والذي سيحتوي أكواد صفحات الكتاب ،
~ كود code الـ PHP ~
لكي نقوم بوضع صور الصفحات ، قمنا بكتابة كود code بي إتش بي بسيط .. يمكنك إستبدال الصور الموجودة بالصور الخاصة بك .. المثال يتضمن 8 صفحات “غلاف + خاتمة + 6 صفحات” ، يمكنك زيادة العدد كما تحب ، لكن يفضل أن يكون عدد الصفحات يساوي مضاعفات الرقم 4 “بمعني 8-16-20 وهكذا” … وإليكم كود code البي إتش بي “يتم إدراجه داخل منطقة كود code الصور في ملف index.php”
رمز PHP:
<code style="white-space:nowrap"> <code> <?php
#بداية نقوم بإعداد متغير لإستقبال كل صور الصفحات
$images = array();
#نقوم بتعيين صور الصفحات وإضافتها للمتغير الرئيسي
#صورة الغلاف
$images[] = array(
"title" => "Cover",
"src" => "assets/img/cover.jpg"
);
$images[] = array(
"title" => "Page1",
"src" => "assets/img/page1.jpg"
);
$images[] = array(
"title" => "Page2",
"src" => "assets/img/page2.jpg"
);
$images[] = array(
"title" => "Page3",
"src" => "assets/img/page3.jpg"
);
$images[] = array(
"title" => "Page4",
"src" => "assets/img/page4.jpg"
);
$images[] = array(
"title" => "Page5",
"src" => "assets/img/page5.jpg"
);
$images[] = array(
"title" => "Page6",
"src" => "assets/img/page6.jpg"
);
#صورة الخاتمة
$images[] = array(
"title" => "End",
"src" => "assets/img/end.jpg"
);
#الكود code الخاص ببناء الكتاب
$totalPages = count($images);
foreach($images as $i=>$image){
?>
<div id="page<?php echo $i+1?>" class="page">
<div class="img<?php echo $i+1; ?>">
<span class="pageNum <?php echo ($i+1)%2? 'right' : 'left'?>"><?php echo $i+1; ?>
/ <?php echo $totalPages?></span>
<img alt="<?php echo $image['title']; ?>" src="<?php echo $image['src']; ?>" />
</div>
</div>
<?php
}
?> </code> </code>
ببساطة نقوم بإعداد كل الصور على شكل arrays ، يمكننا إضافة الصور بحرية وفي النهاية نقوم بإدراجها عبر دالة foreach ..
~ كود code الـ JQuery ~
نقوم بإستدعاء الدالة turn() للبدء في إستخدام أكواد هذه المكتبة الفريدة ، بالإضافة إلى تعيين خاصية التنقل بين الصفحات بإستخدام الأسهم ، “ملف assets/js/script.js”
يتضمن هذا الملف أيضاً متغير مهم جداً ، وهو عدد الصور الحالية .. المثال الحالي يضم 8 صور فقط ، يمكنك زيادة عدد الصور كما تحب ،
رمز Code:
$(function(){ var mag = $('#magazine'); mag.turn(); mag.bind('turned', function(e, page, pageObj) { if(page == 1 && $(this).data('done')){ mag.addClass('centerStart').removeClass('centerEnd '); } //الرقم 8 يمثل عدد الصور في الألبوم الحالي ... else if (page == 8 && $(this).data('done')){ mag.addClass('centerEnd').removeClass('centerStart '); } else { mag.removeClass('centerStart centerEnd'); } }); setTimeout(function(){ mag.fadeTo(500,1); },1000); $(window).bind('keydown', function(e){ if (e.keyCode == 37){ mag.turn('previous'); } else if (e.keyCode==39){ mag.turn('next'); } }); });
~ دعم المتصفح ~
معظم المتصفحات الحديثة يعمل عليها الإسكربت بدون مشاكل ، وإن كان أفضلهم متصفح جوجل GOOGLE كروم … ولا يعمل على الإنترنت إكسبلورر “كالعادة!”
~ تم بحمد الله ~
إلى هنا نكون قد وصلنا لنهاية الشرح طريقة ، لا تبخل علينا بآرائك http://www.dzbatna.com/images/smilies/shiny01.gif
وتابعنا على موقعنا (http://www.michael-designs.com)لمزيد من الإسكربتات المميزة
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
http://michael-designs.com/wp-content/uploads/ibook.jpg (http://michael-designs.com/كتب-إلكترونية-ثلاثية-الأبعاد-مع-ibook/)
http://michael-designs.com/wp-content/uploads/online_demo.jpg (http://michael-designs.com/scripts/jquery-ibook/) http://michael-designs.com/wp-content/uploads/download_03.jpg (http://michael-designs.com/كتب-إلكترونية-ثلاثية-الأبعاد-مع-ibook/)
هل لديك مجموعة صور وتود تجميعهم في شكل ألبوم ؟ هل لديك مجموعة صفحات تود تجميعهم في شكل كتاب جذاب ثلاثي الأبعاد ؟ أقدم لك iBook !
~ كود code الـ HTML ~
كالعادة نبدأ بملف html5 بسيط مثل الموضح أسفل “ملف index.php”
رمز Code:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Making an Instagram Magazine | Tutorialzine Demo</title> <!-- ملفات الإستايل style --> <link rel="stylesheet" href="assets/css/styles.css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="magazine" class="centerStart"> <!-- كود code الصور هنا --> </div> <!-- الجافاسكربت --> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="assets/js/turn.js"></script> <script src="assets/js/script.js"></script> </body> </html>
كما نرى ، قمنا بإستدعاء ملفات الإستايل style ، وملفات مكتبة turn.js ، وملف الإعدادات كباقي الإسكربتات … يوجد في منتصف الملف div#magazine والذي سيحتوي أكواد صفحات الكتاب ،
~ كود code الـ PHP ~
لكي نقوم بوضع صور الصفحات ، قمنا بكتابة كود code بي إتش بي بسيط .. يمكنك إستبدال الصور الموجودة بالصور الخاصة بك .. المثال يتضمن 8 صفحات “غلاف + خاتمة + 6 صفحات” ، يمكنك زيادة العدد كما تحب ، لكن يفضل أن يكون عدد الصفحات يساوي مضاعفات الرقم 4 “بمعني 8-16-20 وهكذا” … وإليكم كود code البي إتش بي “يتم إدراجه داخل منطقة كود code الصور في ملف index.php”
رمز PHP:
<code style="white-space:nowrap"> <code> <?php
#بداية نقوم بإعداد متغير لإستقبال كل صور الصفحات
$images = array();
#نقوم بتعيين صور الصفحات وإضافتها للمتغير الرئيسي
#صورة الغلاف
$images[] = array(
"title" => "Cover",
"src" => "assets/img/cover.jpg"
);
$images[] = array(
"title" => "Page1",
"src" => "assets/img/page1.jpg"
);
$images[] = array(
"title" => "Page2",
"src" => "assets/img/page2.jpg"
);
$images[] = array(
"title" => "Page3",
"src" => "assets/img/page3.jpg"
);
$images[] = array(
"title" => "Page4",
"src" => "assets/img/page4.jpg"
);
$images[] = array(
"title" => "Page5",
"src" => "assets/img/page5.jpg"
);
$images[] = array(
"title" => "Page6",
"src" => "assets/img/page6.jpg"
);
#صورة الخاتمة
$images[] = array(
"title" => "End",
"src" => "assets/img/end.jpg"
);
#الكود code الخاص ببناء الكتاب
$totalPages = count($images);
foreach($images as $i=>$image){
?>
<div id="page<?php echo $i+1?>" class="page">
<div class="img<?php echo $i+1; ?>">
<span class="pageNum <?php echo ($i+1)%2? 'right' : 'left'?>"><?php echo $i+1; ?>
/ <?php echo $totalPages?></span>
<img alt="<?php echo $image['title']; ?>" src="<?php echo $image['src']; ?>" />
</div>
</div>
<?php
}
?> </code> </code>
ببساطة نقوم بإعداد كل الصور على شكل arrays ، يمكننا إضافة الصور بحرية وفي النهاية نقوم بإدراجها عبر دالة foreach ..
~ كود code الـ JQuery ~
نقوم بإستدعاء الدالة turn() للبدء في إستخدام أكواد هذه المكتبة الفريدة ، بالإضافة إلى تعيين خاصية التنقل بين الصفحات بإستخدام الأسهم ، “ملف assets/js/script.js”
يتضمن هذا الملف أيضاً متغير مهم جداً ، وهو عدد الصور الحالية .. المثال الحالي يضم 8 صور فقط ، يمكنك زيادة عدد الصور كما تحب ،
رمز Code:
$(function(){ var mag = $('#magazine'); mag.turn(); mag.bind('turned', function(e, page, pageObj) { if(page == 1 && $(this).data('done')){ mag.addClass('centerStart').removeClass('centerEnd '); } //الرقم 8 يمثل عدد الصور في الألبوم الحالي ... else if (page == 8 && $(this).data('done')){ mag.addClass('centerEnd').removeClass('centerStart '); } else { mag.removeClass('centerStart centerEnd'); } }); setTimeout(function(){ mag.fadeTo(500,1); },1000); $(window).bind('keydown', function(e){ if (e.keyCode == 37){ mag.turn('previous'); } else if (e.keyCode==39){ mag.turn('next'); } }); });
~ دعم المتصفح ~
معظم المتصفحات الحديثة يعمل عليها الإسكربت بدون مشاكل ، وإن كان أفضلهم متصفح جوجل GOOGLE كروم … ولا يعمل على الإنترنت إكسبلورر “كالعادة!”
~ تم بحمد الله ~
إلى هنا نكون قد وصلنا لنهاية الشرح طريقة ، لا تبخل علينا بآرائك http://www.dzbatna.com/images/smilies/shiny01.gif
وتابعنا على موقعنا (http://www.michael-designs.com)لمزيد من الإسكربتات المميزة
ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)
https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©
