the Seven Wonders


Pyramids of Egypt
In Giza near Cairo, the Egyptian capital. And was built around 2480-2550 BC.M Great Pyramid of the most important Egyptian antiquities, which lies 28 km from Cairo and was built by a king of Egypt, the ancient of the fourth country that ruled the country since thousands of years called Khufu The Greeks They were called by the name Ikhyeeobs built to be tombs of Khufu, died-Jabbar, who wanted to perpetuate his name and his body's Tomb large, leaving only the name and marvel at the stones to buildBehold the greatness of architecture with a height of about 481 feet along the north side of 612 feet. Of the pyramid, four aspects of each of them 755 feet, 8 inches in the end is very much like to be the wonders of the world and be adamant about the center of Jeeptin of these wonders, the Pyramids are still standing on the West Bank of the River Nile.Despite the pollution emitted from the city of Cairo, which causes the scourge stones.

Hanging gardens of Babylon
And was named outstanding because it is grown on the balconies of the palaces and the royal palace balcony in Babylon around 600 BC.M and where it is in honor of his wife built Nebuchadnezzar's hanging gardens and he wanted to renew the city of Babylon in order to fit the beauty and luxury and grandeur of his wife and the city was the same: the walls of a height of 350 ft and thickness of 87-feet and had the walls a hundred door made of gold and each section lists and ceilings of gold also .And the greatest city in the hanging gardens or the Hanging Gardens.Which is the charm and strange countries and ancient times was built on decades of stone precious presented gifts to the king in agriculture were layers suitable for various plants, trees and water is lifted and stored in the upper layers of water tanks for watering the trees, the building shall be considered one of the greatest art architectural language of Babylon and Nineveh, where related classes with each tray and a broad pGrown spring comes and the flowers and foliate trees and roses in this altitude in the environment of high heat, these gardens are the Commission published in the land smell fragrant, cold, kind of deserve to be one of the wonders of the world SevenBuilt by Nebuchadnezzar in order to enjoy his wife Bhoaiha, beauty and smell and kindness of its climate and stunning landscape.

Temple of Artemis

In Greece, built around 356 BC. M woman represents the mother and put on the Greeks worship of that filmed them in the statues of strange women account for smart, strong and young, a building length of 425 feet and the 127 in place at altitudes of 60 feet and some of them decorated with statues and images and various graphics and some of them still preserved in the Museum of British and some Hajjar used to build a church in Istanbul.


Statue of Zeus

Length in 1912 and built about 435 BC. M and broke Goth in 262 BC. M is a temple in the Greek city of Ephesus was built on the ruins of three temples, where thousands of ancient artifacts and there are now replaced by Oayasolok Turkish city in Central Asia and the construction date back to 700 BC. AD In 660 BC.M demolition barbarians temple and rebuilt several times badly was burned in 356 by Hero Strat but the women selling jewelry and bought building materials and then passed him for the Iskandar, he has a picture of him has not received his admiration for the year / 260 / attacked the Goths at Ephesus, destroying the Temple after plundering then built a church destroyed it, but also
Lighthouse of Alexandria

And a height of about 134 m in Alexandria BjmHurreh Arab Egypt, Alexandria and the Egyptian city now bride of the Mediterranean was built by Alexander when he conquered Egypt and became the largest ports in the Mediterranean in 285 to 247 BC.M and as a result of the breadth of international trade between Alexandria and the world decided to Ptolemy Philadelphus government to build a lighthouse guiding the ships were built on an island near Alexandria called Faross and construction style Babylonian and the children are resistant to waves where they placed stones solid Hatdha and included parts of dead Cast in the top stove great spark aFire inside the fuel carries it to the top vehicles and then flying to the top ropes and contains 300 rooms on the words of one historian, home to the military to protect the country and said to be in the top mirror large to burn the enemy ships but the newborn Umayyad caliph after the intrigue of the Emperor of Constantinople was deceived and demolished after luring him it containing the treasures beneath fallen in 1375T. lighthouse as a result of the entire earthquake in the sea.
Giant Rhodes
In Rhodes, Greece in 280 BC.M large statue of bronze does not exist now, but selling long pieces of metal and valuables and it was located on the island of Rhodes in Greece now, which is a knight holding a torch in the left hand and a crossbow in the other hand Mada his feet to pass Navy ships between Hadte a height of about 1950 the statue was destroyed after 65 years by an earthquake hit the region in fullHere in 284 BC. M and large size have fingers bigger than a statue in this era and it was inside the spiral staircase from the base to the head and said that the people of the island were put fire in the eyes of the statue to guide ships at sea and the way the island of Rhodes one of the islands task and tourism good in Greece now.
Shrine Mozhul

It was about 353 BC.M to the King of Caria in Asia, Central banana well as the Lord of the Greeks and the temple is rectangular in shape and multi-room large and made from a template of wood and veneered with ivory and gold, and some historians say he was sitting on the throne and his crown of olive and holds his hand right female statue made of ivory and gold represent the victory and left hand scepter and eagle perched upon his clothes was from aWent to the throne and also add to the precious metals and gems and ivory statue of the private and this is exaggerated, and its value, as they say, but it is a symbol of the era of Grecian past.
These are the wonders of the world Seven , which are known about since ancient times and there are wondersMuch admired in all to watch and even come to see millions of people is the following:
* Great Wall of China: The Great Wall of China from buildings, breathtaking as it dates back to the era of construction of the wall (Chen Shi Huang me) in the third century BC.M and the reason for building the fence, which was the conflict between China and the northern tribes and invasive Subscribe hundreds of thousands of workers and freed criminals to work in the building and the fence along the 2414 km.
* Leaning Tower of Pisa:There are Tower of Pisa in Italy, city of Tuscany and the reason for his fame and his oblique and the reason for the tendency is the decline in soil under part of its base and rises 55 meters, and the eight-story and tries to engineers currently thinking in solving the problem of the tower where not inclined and is considered one of the most difficult engineering problems in the modern world.
* Taj Mahal:The Taj Mahal of the most beautiful Islamic buildings in the Indian city of Accra and appropriate building the Taj Mahal is the wish of Shah Jahan to build a palace for the marriage, but fate was quicker than him and died of his lover after he completed the construction and judge Ceyhan deeply saddened decided to bury construction, which lasted 18 years.

طريقة احترافية لعمل الـ slideshow

يعتبر تصميم سلايد شو من احدث التقنيات فى عالم المواقع والمنتديات ووجدت انه لابد من شرح هذا الموضوع الهام الذى يوفر ميزة كبيرة لموقعك او منتداك

ومن لا يعرف السلايد شو هذه صورة للمعاينة



هيا بنا لشرح كيفية التنفيذ : -

عباره عن سلايد شو يعمل تلقائيا ويعرض فيه نص او اذا احببت صور ونص كما تريد وتستطيع ايقاف العمل التلقائي ويمكنك ايضا اعاده تشغيله

التأثير : اختفاء المحتوى الحالي ومن ثم ظهور تدريجي للمحتوى الجديد

اولا كيف ستكون التركيبه للسلايد شو اي الـ (html)

كود :



المحتوى سوف يكون داخل
كود :


لنرى صوره توضيحه لما سوف نقوم بعمله
الصورة تم تقليصها , إضغط على هذا الشريط لعرض الصورة الأصلية..
[صورة مرفقة: slidei.png]

لنبدأ بالـ css

اولا تنسيق الصندوق الخارجي (الذي يحتوي جميع العناصر الداخليه) - container
كود :

.container {
width:600px; /* عرض الصندوق الخارجي */
height:290px;/* ارتفاع الصندوق الخارجي */
background:#ddd;/* الخلفية */
margin:40px auto;/* لكي يتم توسيطه وسط الصفحه بالاضافه للبعد من الاسفل والاعلى */
overflow:hidden;/* مهم جدا لكي يخفي كل العناصر الخارجه من الصندوق */
-moz-box-shadow:2px 3px 5px #000; /*ظل للنص يعمل مع الفيرفوكس*/
-webkit-box-shadow:2px 3px 5px #000;/*كروم وسفاري*/
box-shadow:2px 3px 5px #000;/*ظل للنص يعمل مع الاوبرا*/
position:relative;/* مهم لاننا سوف نحتاج لاعطاء عناصر داخليه بوزشن */
}

لدينا صندوق خارحي سوف يحتوي صندوق اخر يسمى con هذا الصندوق هو

الذي يحتوي على صناديق المحتويات(slide) وعرضه سوف يكون حسب عدد صناديق المحتويات وبما انن قمنا باعطاء الصندوق الخارجي خاصيه

وكل (slide)سوف تأخذ نفس عرض الـ container بذلك نضمن اننا سوف نرى فقط

(slide)واحده امامنا والاخريات سوف تختفي لانها خارج حدود الـ container

لكن كيف سنرى الاخريات , ببساطه سوف نقوم بتحرك الـ con الذي يحتوي على الـ



دعونا لا نستبق الامور ونركز والان

تنسيق الـ con
overflow:hidden; slide وسوف نحركه بمقدار عرض الـ slide الواحده وبذلك سنرى واحده تلو الاخرى
كود :

.con {
margin:22.5px auto; /* تحديد البعد من الاعلى والاسفل*/
height:240px;/* الارتفاع*/
background:#bbb;/* لون الخلفية */
position:relative;/*مهم جدا لانها ستسمح لنا بتحريك هذا الصندوق*/
border-top:1px solid #fff;/*اطار علوي*/
border-bottom:1px solid #fff;/*اطار سفلي*/
color:#333;/*لون النص*/
text-shadow:0px 1px 0px #ddd;/*ظل للنص - سنعالج الخلل في الاكسبلورر باستخدام اضافه للجيكيوري*/
font-family:"Times New Roman",Georgia,Times, serif;/*نوع الخط*/
font-size:17px;/*حجم الخط*/
left:0; /*
مهمه جدا في سفاري والاكسبلورر وكروم لانه القيمه الاصليه فيهم تعطى
auto
ونحن نريدها صفر وسنستخدم هذه الخاصيه في الانماط التي فيها اسمهم تستخدم في التحريك
*/
}

لكن ماذا عن عرض الـ con ? سوف نقوم باعطائه عرض من خلال الـ javascript

لكي يكون مرن بحيث العرض يتغير حسب عدد الـ slides

وهذا يعطينا مرونه كبيره

الان سوف نقوم بعمل الـ css للـ slide

كود :

.slide {
width:560px;/* غير مهم */
padding:20px; /* 560+40 = 600 (عرض الـ con)*/
height:200px;/* 200+40 = 240* (ارتفاع الـ con)/
float:left;
}


لماذا العرض غير مهم ؟ لاننا سوف نقوم باعطائه عرض من خلال الـ jquery

حسب عرض الـ container وبذلك حتى لو قمنا بتوسيع الـ container سوف

توسع هذه تلقائيا او حتى لو قلصناها شيء جميل اليس كذلك

سوف نعود لتنسيق الـ ايقونات البدايه والايقاف فيما بعد

الان لنبدا بالـ jquery

نستدعي ملف المكتبه والملف الذي نريد ان نكتب فيه الاكواد

كود :




الان داخل ملفـ script.js

كود :

$(function(){ نكتب هنا الاكواد});

الان كود الـ jquery
شرح كامل في التعليقات
كود :

$(function(){
var realWidth= $('.slide').size(); //ايجاد عدد الـ slide
var realslideWidth = $('.slide').outerWidth(); //ايجاد العرض الخارجي للـ slide
var realslidewidth2 = $('.slide').width();//ايجاد عرض الـ slide
var real_w = realslideWidth - realslidewidth2 ; //لمعرفه الـ padding
var containerWidth= $('.container').width(); //عرض الـ container
/*الان سنحدد عرض الـ slide
,وسوف يكون العرض هو نفس عرض الـ container
لكن ننقص منه الـ padding
الخاص بـ slide
لكي تكون النتيجه متساويه تماما
*/
$('.slide').css('width',containerWidth-real_w); //تحديد عرض الـ slide

/*الان سوف نحدد عرض ال
con
وسوف يكون حسب عدد الـ
slide
*/
$('.con').width((containerWidth)*realslideWidth); //تحديد عرض الـ con
var i=1; //تعريف متغير
var count = 0; //تعريف متغير
function animation(){ // الفنكشن الخاص بالحركه

if(count != realWidth-1){
/*
الشرط يتحقق باننا لسنا في اخر سلايد
لانناان كنا في اخر سلايد نريده ان يرجعنا للاولى بعدها
اما ان لم نكن فعليه ان يتقدم للسلايد التاليه
*/
$('.con').fadeOut('slow'); //اختفاء تدريجي للسلايد الحاليه
$('.con').animate({'left':(-containerWidth)*i},500);
/*
كيف سنجعله يعرض لنا السيلايد التاليه ؟
نحرك الصندوق الكلي (con)
بنفس عرض السلايد الواحده وبذلك تظهر السلايد التاليه
وهذا ما فعلناه هنا
حركنا الـ con
بمقدار عرض الـ slide
الى اليسار
لكنك لن تشاهد الحركه لان السلايد مختفيه !
المتغير i
يبين لنا في اي سلايد نحن الان
الاولى الثانيه الثالثه اي واحده ؟
لانه حسب اي واحده سوف نقرر كم مقدار الازاحه لليسار بالنسبة لل
con
*/
$('.con').fadeIn(1500);
/*
بعد انتهاء الحركه سوف يتم عرض السلايد الجديده
وسوف تشاهدها
*/
i++; /*
زياده المتغير بمقدار واحد

*/
count++;
/*
زياده المتغير بمقدار واحد

*/
}
else { //في حال كنا في السلايد الاخيره
$('.con').fadeOut('slow');//اخفاء السلايد الاخيره
$('.con').animate({'left':0},500);
/*
ارجاع الـ con
للبدايه اي انه سيعود للسلايد الاولى

*/
$('.con').fadeIn(1500);//اظهار السلايد والتي سوف تكون الاولى
count=0;//ارجاع القيم الافتراضيه للمتغيرات
i=1;//ارجاع القيم الافتراضيه للمتغيرات
}
}
/*
تشغيل الفنكشن
animation
مره كل 7 ثواني
*/
var e = setInterval(animation,7000);

});

الان سوف نعود لـ ايقونتا الايقاف والتشغيل

اولا الـ css

كود :

.stop {
position:absolute; /*مهم*/
left:35px;/*البعد من يسار الـ container*/
bottom:1px;/*البعد من اسفل الـ container*/
width:24px;/*العرض*/
height:24px;/*الارتفاع*/
text-indent:-999999px;/*لاخفاء النص*/
background:url('../images/stop.png');/*مسار الخلفيه*/
}
.start {
position:absolute; /*مهم*/
left:85px;/*البعد من يسار الـ container*/
bottom:1px;/*البعد من اسفل الـ container*/
background:url('../images/start-clicked.png');/*مسار الخلفيه*/
width:24px;/*العرض*/
height:24px;/*الارتفاع*/
text-indent:-999999px;/*لاخفاء النص*/
}

عند وضع الماوس علي الايقونات والضغط

كود :

.start:hover {background:url('../images/start-hover.png');}
.stop:hover {background:url('../images/stop-hover.png');}
.stop:active {background:url('../images/stop.png');}
.start:active('../images/start.png');}

الان سوف نرى اكواد الـ jquery

كود :

$('.stop').click(function(){ //عند الضغط على الايقاف
$(this).css({'background':'url("images/stop-clicked.png")'}); //تغيير الخلفيه للايقاف
$(this).next().css({'background':'url("images/start.png")'}); // تغيير الخلفيه للـ تشغيل
clearInterval(e); // ايقاف الـ slideshow
return false; //تعطيل التصرف الافتراضي للرابط

});
$('.start').click(function(){//عند الضغط على التشغيل
$(this).css({'background':'url("images/start-clicked.png")'}); // تغيير الخلفيه للـ تشغيل
$(this).prev().css({'background':'url("images/stop.png")'}); //تغيير الخلفيه للايقاف
e = setInterval(animation,7000); //بدء الـ slideshow
return false;//تعطيل التصرف الافتراضي للرابط
});


الان انتهينا من النمط الاول وسننتقل للنمط الثاني

النمط الثاني هو عباره عن سلايد شو يعمل تلقائيا ويعرض فيه نص او اذا احببت صور ونص كما تريد وتستطيع ايقاف العمل التلقائي ويمكنك ايضا اعاده تشغيله

التأثير : تحريك المحتوى امامك بدون اخفاء وظهور

النمط الثاني مطابق للاول في كل شيء الا في شي بسيط سوف اوضحه

ونفس الشيء في الـ html

لكن نغير الكلاسات - فضلت وضع كلاسات وليسid
مع العلم ان كل نمط كلاسات مختلفه لكي لا يحدث اخلاط في الـ jquery
والكلاسات افضل لانه ممكن اكرر نفس لسلايد ولكن انت تستطيع اختيار ما تشاء
حسب استخدامك للسلايد
كود :

slideshow(auto scroll)




لذلك في الـ css سوف نقوم باضافه الكلاسات الجيده فقط للتنسيق السابق

مثل هذا
كود :

.container, .container-scroll {}
ونفس الشيء للباقين
اما الاختلاف فهو في الـjquery
وبالتحديد في الدالهـ المسؤوله عن التأثير

لنرى الاختلاف
كود :

function animationscrolling(){

if(countscroll != realWidth_scroll-1){

$('.con-scroll').animate({'left':(-containerWidth_scroll)*iscroll},500);

iscroll++;
countscroll++;
}
else {

$('.con-scroll').animate({'left':0},500);

countscroll=0;
iscroll=1;
}
}

طبعا قمنا بتغيرر اسماء المتغير مع العلم من الممكن ابقائها نفس الشيء لانها

داخل فنكشن لكن افضل تغييرها

وقمنا بوضع اسماء الكلاسات الجديده

والاختلاف اننا حذفنا الـ fadeOut & fadeIn

[+/-]

the Seven Wonders

[+/-]

طريقة احترافية لعمل الـ slideshow

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Free Web Hosting