floatbox أسطورة الابداع في عرض الملفات

10‏/07‏/2010

تم اقتباس هته الفكرة من هدا الموقع

إذا كنت تريد إضافة معرض جذاب جدا لمدونتك الخاصة بك يجب 



عليك قراءة هذا الموضوع ، من خلال هذاالموضوع ، 

3خطوات فقط عليك أن تكون قادرا على جعل معرض قطعة خاصة مميزة

للمشاهدة  /   DEMO

يمكنك إنشاء معرض الصور / الألبوم ليتم عرضه للقراء

باستخدام هذا السيناريو الكبير ستجعل مدونتك مميزة

ليس فقط الصور و انما جميع الملفا و مهما كان امتدادها






كما يمكنكم اختيار العديد من الستايلات بتغيير كود الCSS






و العديد من النمادج بتغيير كود ال HTML

كود ال javascript


<script src='http://blogspacetech.googlecode.com/files/framebox.js' type='text/javascript'/>
 

كودال CSS


/* Floatbox v3.24 */

/* December 01, 2008 */



#fbOverlay{position:fixed; top:0; left:0; width:100%; height:100%; border-width:0; margin:0; padding:0}

div.fbOverlay_black{background-color:#000}

div.fbOverlay_white{background-color:#000}

div.fbOverlay_blue{background-color:#0b183b}

div.fbOverlay_yellow{background-color:#752}

div.fbOverlay_red{background-color:#280000}

div.fbOverlay_custom{background-color:#1b2642}



#fbBox{position:absolute; border-style:solid; border-width:0; margin:0; padding:0}

div.fbBox_black{border-color:#888;  background-color:#000}

div.fbBox_white{border-color:#888; background-color:#fff}

div.fbBox_blue{border-color:#4060a8; background-color:#0b183b}

div.fbBox_yellow{border-color:#680c0c; background-color:#ed9}

div.fbBox_red{border-color:#945848; background-color:#580808}

div.fbBox_custom{border-color:#da7b4d; background-color:#eed39e}



#fbBox div, #fbBox a, #fbBox img, #fbBox iframe{border-width:0; margin:0; padding:0; outline:none; -moz-outline:none}

#fbBox a{background:url(http://img9.imageshack.us/img9/2276/blankqsl.gif); zoom:1}



#fbZoomDiv, a.fbPopup img, #fbBox #fbIndexLinks img{position:absolute; left:0; top:-9999px; border-style:solid; border-color:black; margin:0; padding:0}



#fbBox #fbLoader{position:absolute; top:0; left:0; min-width:100%; min-height:100%; width:100%; height:100%; background-position:center; background-repeat:no-repeat}

#fbBox .fbLoader_black{background-image:url(http://img9.imageshack.us/img9/2276/blankqsl.gif)}

#fbBox .fbLoader_white{background-image:url(http://img48.imageshack.us/img48/5186/loadingwhite.gif)}

#fbBox .fbLoader_blue{background-image:url(http://img48.imageshack.us/img48/403/loadingblack.gif)}

#fbBox .fbLoader_yellow{background-image:url(http://img48.imageshack.us/img48/5186/loadingwhite.gif)}

#fbBox .fbLoader_red{background-image:url(http://img140.imageshack.us/img140/5233/loadingblacksmall.gif)}

#fbBox .fbLoader_custom{background-image:url(http://img140.imageshack.us/img140/5233/loadingblacksmall.gif)}



#fbBox #fbShadowTop, #fbShadowRight, #fbBox #fbShadowBottom, #fbBox #fbShadowLeft, #fbBox #fbShadowCorner{position:absolute; left:0; top:0; width:100%; height:100%; background-repeat:no-repeat}

#fbBox #fbShadowTop{background-position:top left}

#fbBox .fbShadowTop_halo8{background-image:url(http://img105.imageshack.us/img105/2018/shadowtophalo8.png)}

#fbBox .fbShadowTop_halo12{background-image:url(http://img264.imageshack.us/img264/5214/shadowtophalo12.png)}

#fbBox .fbShadowTop_halo16{background-image:url(http://img264.imageshack.us/img264/3408/shadowtophalo16.png)}

#fbBox .fbShadowTop_halo24{background-image:url(http://img264.imageshack.us/img264/349/shadowtophalo24.png)}



#fbBox #fbShadowRight{background-position:top right}

#fbBox .fbShadowRight_drop8{background-image:url(http://img21.imageshack.us/img21/5117/shadowrightdrop8.png)}

#fbBox .fbShadowRight_drop12{background-image:url(http://img3.imageshack.us/img3/4956/shadowrightdrop12.png)}

#fbBox .fbShadowRight_drop16{background-image:url(http://img19.imageshack.us/img19/4744/shadowrightdrop16.png)}

#fbBox .fbShadowRight_drop24{background-image:url(http://img3.imageshack.us/img3/7958/shadowrightdrop24.png)}

#fbBox .fbShadowRight_halo8{background-image:url(http://img11.imageshack.us/img11/4483/shadowrighthalo8.png)}

#fbBox .fbShadowRight_halo12{background-image:url(http://img22.imageshack.us/img22/7527/shadowrighthalo12.png)}

#fbBox .fbShadowRight_halo16{background-image:url(http://img14.imageshack.us/img14/7161/shadowrighthalo16.png)}

#fbBox .fbShadowRight_halo24{background-image:url(http://img4.imageshack.us/img4/5783/shadowrighthalo24.png)}



#fbBox #fbShadowBottom{background-position:bottom right}

#fbBox .fbShadowBottom_drop8{background-image:url(http://img7.imageshack.us/img7/922/shadowbottomdrop8.png)}

#fbBox .fbShadowBottom_drop12{background-image:url(http://img14.imageshack.us/img14/5782/shadowbottomdrop12.png)}

#fbBox .fbShadowBottom_drop16{background-image:url(http://img8.imageshack.us/img8/6815/shadowbottomdrop16.png)}

#fbBox .fbShadowBottom_drop24{background-image:url(http://img10.imageshack.us/img10/5016/shadowbottomdrop24.png)}

#fbBox .fbShadowBottom_halo8{background-image:url(http://img5.imageshack.us/img5/6572/shadowbottomhalo8.png)}

#fbBox .fbShadowBottom_halo12{background-image:url(http://img7.imageshack.us/img7/3879/shadowbottomhalo12.png)}

#fbBox .fbShadowBottom_halo16{background-image:url(http://img7.imageshack.us/img7/74/shadowbottomhalo16.png)}

#fbBox .fbShadowBottom_halo24{background-image:url(http://img14.imageshack.us/img14/4083/shadowbottomhalo24.png)}



#fbBox #fbShadowLeft{background-position:bottom left}

#fbBox .fbShadowLeft_halo8{background-image:url(http://img26.imageshack.us/img26/8371/shadowlefthalo8.png)}

#fbBox .fbShadowLeft_halo12{background-image:url(http://img13.imageshack.us/img13/5061/shadowlefthalo12.png)}

#fbBox .fbShadowLeft_halo16{background-image:url(http://img11.imageshack.us/img11/2593/shadowlefthalo16.png)}

#fbBox .fbShadowLeft_halo24{background-image:url(http://img10.imageshack.us/img10/3891/shadowlefthalo24.png)}



#fbBox #fbShadowCorner{background-position:bottom right}

#fbBox .fbShadowCorner_drop8{background-image:url(http://img14.imageshack.us/img14/461/shadowcornerdrop8.png)}

#fbBox .fbShadowCorner_drop12{background-image:url(http://img15.imageshack.us/img15/4097/shadowcornerdrop12.png)}

#fbBox .fbShadowCorner_drop16{background-image:url(http://img17.imageshack.us/img17/3232/shadowcornerdrop16.png)}

#fbBox .fbShadowCorner_drop24{background-image:url(http://img21.imageshack.us/img21/6103/shadowcornerdrop24.png)}



#fbBox #fbCanvas{position:relative;  left:0; top:0; width:100%; height:100%}



#fbBox #fbMainDiv, #fbBox #fbInfoPanel, #fbBox #fbControlPanel{position:absolute; border-style:solid; overflow:hidden}



#fbBox #fbMainDiv{background-color:#fff}

#fbBox .fbMainDiv_black{border-color:#ccc}

#fbBox .fbMainDiv_white{border-color:#000}

#fbBox .fbMainDiv_blue{border-color:#aaa8be}

#fbBox .fbMainDiv_yellow{border-color:#700}

#fbBox .fbMainDiv_red{border-color:#b64}

#fbBox .fbMainDiv_custom{border-color:#b64}



#fbBox #fbResizer{position:absolute; width:25px;  height:25px; left:0; top:0}

#fbBox .fbResizer_black{background-image:url(http://img26.imageshack.us/img26/1338/resizeblack.gif)}

#fbBox .fbResizer_white{background-image:url(http://img3.imageshack.us/img3/5804/resizewhite.gif)}

#fbBox .fbResizer_blue{background-image:url(http://img3.imageshack.us/img3/3837/resizeblue.gif)}

#fbBox .fbResizer_yellow{background-image:url(http://img3.imageshack.us/img3/1125/resizeyellow.gif)}

#fbBox .fbResizer_red{background-image:url(http://img3.imageshack.us/img3/6087/resizered.gif)}

#fbBox .fbResizer_custom{background-image:url(http://img3.imageshack.us/img3/6087/resizered.gif)}



#fbBox #fbLeftNav, #fbBox #fbRightNav{position:absolute; height:100%}

#fbBox #fbLeftNav, #fbBox #fbOverlayPrev{left:0}

#fbBox #fbRightNav, #fbBox #fbOverlayNext{right:0}



#fbBox #fbOverlayPrev, #fbBox #fbOverlayNext{position:absolute; width:49px;  height:23px; background-repeat:no-repeat}

#fbBox .fbOverlayPrev_black{background-image:url(http://img5.imageshack.us/img5/6257/prevuprblack.gif)}

#fbBox .fbOverlayPrev_white{background-image:url(http://img14.imageshack.us/img14/6392/prevuprwhite.gif)}

#fbBox .fbOverlayPrev_blue{background-image:url(http://img12.imageshack.us/img12/2311/prevuprblue.gif)}

#fbBox .fbOverlayPrev_yellow{background-image:url(http://img5.imageshack.us/img5/8624/prevupryellow.gif)}

#fbBox .fbOverlayPrev_red{background-image:url(http://img23.imageshack.us/img23/6225/prevuprred.gif)}

#fbBox .fbOverlayPrev_custom{background-image:url(http://img12.imageshack.us/img12/2311/prevuprblue.gif)}

#fbBox .fbOverlayNext_black{background-image:url(http://img17.imageshack.us/img17/6/nextuprblack.gif)}

#fbBox .fbOverlayNext_white{background-image:url(http://img3.imageshack.us/img3/5674/nextuprwhite.gif)}

#fbBox .fbOverlayNext_blue{background-image:url(http://img3.imageshack.us/img3/190/nextuprblue.gif)}

#fbBox .fbOverlayNext_yellow{background-image:url(http://img21.imageshack.us/img21/3069/nextupryellow.gif)}

#fbBox .fbOverlayNext_red{background-image:url(http://img15.imageshack.us/img15/3383/nextuprred.gif)}

#fbBox .fbOverlayNext_custom{background-image:url(http://img3.imageshack.us/img3/190/nextuprblue.gif)}



#fbBox #fbInfoPanel{line-height:1.25em;  font-family:Verdana,Helvetica,sans-serif; font-size:12px}



#fbBox #fbCaption{cursor:default}



#fbBox #fbInfoLink, #fbBox #fbPrintLink{padding-bottom:.1em}



#fbBox #fbItemNumber{font-size:10px;  white-space:nowrap; cursor:default}

#fbBox .fbItemNumber_black, #fbBox #fbIndexLinks.fbIndexLinks_black, #fbBox #fbIndexLinks.fbIndexLinks_black a:link, #fbBox #fbIndexLinks.fbIndexLinks_black a:visited{color:#aaa}

#fbBox .fbItemNumber_white, #fbBox #fbIndexLinks.fbIndexLinks_white, #fbBox #fbIndexLinks.fbIndexLinks_white a:link, #fbBox #fbIndexLinks.fbIndexLinks_white a:visited{color:#666}

#fbBox .fbItemNumber_blue, #fbBox #fbIndexLinks.fbIndexLinks_blue, #fbBox #fbIndexLinks.fbIndexLinks_blue a:link, #fbBox #fbIndexLinks.fbIndexLinks_blue a:visited{color:#aaa8be}

#fbBox .fbItemNumber_yellow, #fbBox #fbIndexLinks.fbIndexLinks_yellow, #fbBox #fbIndexLinks.fbIndexLinks_yellow a:link, #fbBox #fbIndexLinks.fbIndexLinks_yellow a:visited{color:#700}

#fbBox .fbItemNumber_red, #fbBox #fbIndexLinks.fbIndexLinks_red, #fbBox #fbIndexLinks.fbIndexLinks_red a:link, #fbBox #fbIndexLinks.fbIndexLinks_red a:visited{color:#ca8}

#fbBox .fbItemNumber_custom, #fbBox #fbIndexLinks.fbIndexLinks_custom, #fbBox #fbIndexLinks.fbIndexLinks_custom a:link, #fbBox #fbIndexLinks.fbIndexLinks_custom a:visited{color:#965f74}

#fbBox .fbInfoPanel_black, #fbBox .fbInfoPanel_black a:link, #fbBox .fbInfoPanel_black a:visited, #fbBox #fbIndexLinks.fbIndexLinks_black a:hover{color:#d7d7d7}

#fbBox .fbInfoPanel_white, #fbBox .fbInfoPanel_white a:link, #fbBox .fbInfoPanel_white a:visited, #fbBox #fbIndexLinks.fbIndexLinks_white a:hover{color:#000}

#fbBox .fbInfoPanel_blue, #fbBox .fbInfoPanel_blue a:link, #fbBox .fbInfoPanel_blue a:visited, #fbBox #fbIndexLinks.fbIndexLinks_blue a:hover{color:#aaa8be}

#fbBox .fbInfoPanel_yellow, #fbBox .fbInfoPanel_yellow a:link, #fbBox .fbInfoPanel_yellow a:visited, #fbBox #fbIndexLinks.fbIndexLinks_yellow a:hover{color:#700}

#fbBox .fbInfoPanel_red, #fbBox .fbInfoPanel_red a:link, #fbBox .fbInfoPanel_red a:visited, #fbBox #fbIndexLinks.fbIndexLinks_red a:hover{color:#ec9}

#fbBox .fbInfoPanel_custom, #fbBox .fbInfoPanel_custom a:link, #fbBox .fbInfoPanel_custom a:visited, #fbBox #fbIndexLinks.fbIndexLinks_custom a:hover{color:#735}



#fbBox #fbControls{height:14px;  font-size:1px}



#fbBox #fbNavControls{width:88px;  height:14px}



#fbBox #fbPrev{float:left; width:44px;  height:14px; background-repeat:no-repeat}

#fbBox .fbPrev_black{background-image:url(http://img5.imageshack.us/img5/6321/prevlwrblack.gif)}

#fbBox .fbPrev_white{background-image:url(http://img17.imageshack.us/img17/1781/prevlwrwhite.gif)}

#fbBox .fbPrev_blue{background-image:url(http://img7.imageshack.us/img7/145/prevlwrblue.gif)}

#fbBox .fbPrev_yellow{background-image:url(http://img5.imageshack.us/img5/853/prevlwryellow.gif)}

#fbBox .fbPrev_red{background-image:url(http://img5.imageshack.us/img5/8361/prevlwrred.gif)}

#fbBox .fbPrev_custom{background-image:url(http://img5.imageshack.us/img5/853/prevlwryellow.gif)}

#fbBox .fbPrev_black_off{background-image:url(http://img3.imageshack.us/img3/493/prevlwroffblack.gif)}

#fbBox .fbPrev_white_off{background-image:url(http://img9.imageshack.us/img9/3411/prevlwroffwhite.gif)}

#fbBox .fbPrev_blue_off{background-image:url(http://img3.imageshack.us/img3/2787/prevlwroffblue.gif)}

#fbBox .fbPrev_yellow_off{background-image:url(http://img5.imageshack.us/img5/5632/prevlwroffyellow.gif)}

#fbBox .fbPrev_red_off{background-image:url(http://img17.imageshack.us/img17/8826/prevlwroffred.gif)}

#fbBox .fbPrev_custom_off{background-image:url(http://img5.imageshack.us/img5/5632/prevlwroffyellow.gif)}



#fbBox #fbNext{float:right; width:44px;  height:14px; background-repeat:no-repeat}

#fbBox .fbNext_black{background-image:url(http://img17.imageshack.us/img17/6607/nextlwrblack.gif)}

#fbBox .fbNext_white{background-image:url(http://img5.imageshack.us/img5/2346/nextlwrwhite.gif)}

#fbBox .fbNext_blue{background-image:url(http://img22.imageshack.us/img22/963/nextlwrblue.gif)}

#fbBox .fbNext_yellow{background-image:url(http://img26.imageshack.us/img26/4686/nextlwryellow.gif)}

#fbBox .fbNext_red{background-image:url(http://img22.imageshack.us/img22/5943/nextlwrred.gif)}

#fbBox .fbNext_custom{background-image:url(http://img26.imageshack.us/img26/4686/nextlwryellow.gif)}

#fbBox .fbNext_black_off{background-image:url(http://img17.imageshack.us/img17/161/nextlwroffblack.gif)}

#fbBox .fbNext_white_off{background-image:url(http://img17.imageshack.us/img17/9015/nextlwroffwhite.gif)}

#fbBox .fbNext_blue_off{background-image:url(http://img15.imageshack.us/img15/8334/nextlwroffblue.gif)}

#fbBox .fbNext_yellow_off{background-image:url(http://img22.imageshack.us/img22/4632/nextlwroffyellow.gif)}

#fbBox .fbNext_red_off{background-image:url(http://img15.imageshack.us/img15/7015/nextlwroffred.gif)}

#fbBox .fbNext_custom_off{background-image:url(http://img22.imageshack.us/img22/4632/nextlwroffyellow.gif)}



#fbBox #fbPlay, #fbBox #fbPause{position:absolute; background-repeat:no-repeat}



#fbBox #fbPlayPause, #fbBox #fbPlay, #fbBox #fbPause{width:46px;  height:14px; text-align:justify}

#fbBox .fbPlay_black{background-image:url(http://img5.imageshack.us/img5/4984/playblack.gif)}

#fbBox .fbPlay_white{background-image:url(http://img11.imageshack.us/img11/1613/playwhite.gif)}

#fbBox .fbPlay_blue{background-image:url(http://img21.imageshack.us/img21/207/playblue.gif)}

#fbBox .fbPlay_yellow{background-image:url(http://img17.imageshack.us/img17/7140/playyellow.gif)}

#fbBox .fbPlay_red{background-image:url(http://img9.imageshack.us/img9/7944/playred.gif)}

#fbBox .fbPlay_custom{background-image:url(http://img17.imageshack.us/img17/7140/playyellow.gif)}

#fbBox .fbPause_black{background-image:url(http://img11.imageshack.us/img11/986/pauseblack.gif)}

#fbBox .fbPause_white{background-image:url(http://img8.imageshack.us/img8/5258/pausewhite.gif)}

#fbBox .fbPause_blue{background-image:url(http://img19.imageshack.us/img19/9194/pauseblue.gif)}

#fbBox .fbPause_yellow{background-image:url(http://img13.imageshack.us/img13/8280/pauseyellow.gif)}

#fbBox .fbPause_red{background-image:url(http://img26.imageshack.us/img26/706/pausered.gif)}

#fbBox .fbPause_custom{background-image:url(http://img13.imageshack.us/img13/8280/pauseyellow.gif)}



#fbBox #fbClose{width:46px;  height:14px; background-repeat:no-repeat}

#fbBox .fbClose_black{background-image:url(http://img15.imageshack.us/img15/8548/closeblack.gif)}

#fbBox .fbClose_white{background-image:url(http://img11.imageshack.us/img11/3804/closewhite.gif)}

#fbBox .fbClose_blue{background-image:url(http://img4.imageshack.us/img4/6370/closeblue.gif)}

#fbBox .fbClose_yellow{background-image:url(http://img7.imageshack.us/img7/7394/closeyellow.gif)}

#fbBox .fbClose_red{background-image:url(http://img13.imageshack.us/img13/1222/closered.gif)}

#fbBox .fbClose_custom{background-image:url(http://img7.imageshack.us/img7/7394/closeyellow.gif)}



#fbBox #fbIndexLinks{clear:both; font-size:11px; cursor:default}



#fbBox #fbIndexLinks a:hover{font-weight:bold}



#fbInfoPanel.posCenter, #fbInfoDiv.posCenter, #fbIndexLinks.posCenter{margin:0 auto}

#fbInfoPanel.posRight, #fbInfoDiv.posRight, #fbIndexLinks.posRight{float:right}

#fbInfoPanel.posLeft, #fbInfoDiv.posLeft, #fbIndexLinks.posLeft{float:left}

#fbControlPanel.posRight, #fbControls.posRight, #fbClose.posRight, #fbSubControls.posRight, #fbNavControls.posLeft, #fbPlayPause.posLeft{float:right}

#fbControlPanel.posLeft, #fbControls.posLeft, #fbClose.posLeft, #fbSubControls.posLeft, #fbNavControls.posRight, #fbPlayPause.posRight{float:left}



#fbSubControls, #fbClose, #fbIndexLinks, #fbPlayPause, #fbNavControls{float:left}

كود ال HTML


<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirdUEIr2XhKHNQBm-0wQrZqojY6Rh_FSMEjiGPd3yH9EahTVkT5r5DBQkqdGzHPeVcuj_kcYRWN55AcdTSe14qX9wpIP6-Fn_B1EHwFGyEBEY2bZYcc4fmeqYU3nWif8tY62pjLUla7pI/s1600/710498426.jpg" rel="floatbox"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirdUEIr2XhKHNQBm-0wQrZqojY6Rh_FSMEjiGPd3yH9EahTVkT5r5DBQkqdGzHPeVcuj_kcYRWN55AcdTSe14qX9wpIP6-Fn_B1EHwFGyEBEY2bZYcc4fmeqYU3nWif8tY62pjLUla7pI/s200/710498426.jpg" /></a></div>

لتحميل الاكواد المستعملة

لمعرفة المزيد راجع الرابط التالي

2

1. 

   rasiqzone يقول...

   

   ehm..
   nice information guyz..
   follow me back..

1. 

   khaled يقول...

   

   rasiqzone : Thanks for visited my blog,
   
   
   
   Good luck for you too my brother... khaled

لا يسمح بالتعليقات الجديدة.