معاينة الصورة مع تأثيرات jQuery Facebox

25‏/06‏/2010








كود الcss




#facebox .b{background:url(https://lh5.googleusercontent.com/-xIqsDb76O2c/TYSfjIL8Z3I/AAAAAAAAAM0/cRYfxM44xGM/d/b.png)}

#facebox .tl{background:url(https://lh5.googleusercontent.com/-bnpICoQ3TCo/TYSfhizqEYI/AAAAAAAAAMs/fzKJI9YnX_0/d/tl.png)}

#facebox .tr{background:url(https://lh5.googleusercontent.com/-FBlVlIfKFCg/TYSfimySm0I/AAAAAAAAAMw/qSqiYPXrtBg/d/tr.png)}

#facebox .bl{background:url(https://lh4.googleusercontent.com/-jfFiH-6S-4c/TYSfjriVGUI/AAAAAAAAAM4/wIeBbgKYabM/d/bl.png)}

#facebox .br{background:url(https://lh5.googleusercontent.com/-j6kdiIOrH3w/TYSfjxPlqVI/AAAAAAAAAM8/ZJ8laVuumVM/d/br.png)}

#facebox{left:0;position:absolute;text-align:left;top:0;width:100%;z-index:100}

#facebox .popup{position:relative}

#facebox table{border-collapse:collapse;margin:auto}

#facebox .body{background:#fff;padding:10px;width:370px}

#facebox img{background:transparent;border:0;margin:0;padding:0}

#facebox .footer{border-top:1px solid #DDD;margin-top:10px;padding-top:5px;text-align:right}

#facebox .tl,#facebox .tr,#facebox .bl,#facebox .br{height:10px;overflow:hidden;padding:0;width:10px}

#facebox .loading,#facebox .image{text-align:center}







كود ال jquery





<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

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

<script type='text/javascript'>

jQuery(document).ready(function($) {

$('a[rel*=facebox]').facebox()

})

</script>






كود الhtml




<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/.../s1600-h/k.jpg">

<img src="http://2.bp.blogspot.com/.../s400/k.jpg"/>

</a>





و ادا كنت تريد وضع رسالة على الصورة




<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://2.bp.blogspot.com/.../s1600/k.jpg" rel="facebox">

<img src="http://2.bp.blogspot.com/.../s400/k.jpg"/>

</a>










المصدر