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

25‏/06‏/2010








كود الcss




#facebox .b{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxLCirT5Na1Af72brKtSgIt8xcGKJfnr2jz3H3aRkF-F4vXjtYfhmC3pFt88X4G1lZ-zLJ57kduW2j3zNRNo1K1xZBKmKiErEOO7DjMwtQCo9pHoFFGYIo_pCiqVzJ_CSBxw0oFQwuPbn4/d/b.png)}

#facebox .tl{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyC8knI_uBHaW6VjjJ_7jY24oPbzpA-Cun7oVlg2njT2oufHFSYjEck5hdraLsdZU42Ll9TXAx5Y0CTsvakINk1qIbZsYO25boq4K74oIWqn2pd1rlULGRn7gabKqQkZS7bwWZO6aYOGjz/d/tl.png)}

#facebox .tr{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiipgz-w4NWeeuN1LFFhONbSp2biThEJQW2wf0p4XF6wwQQX05Ksf4OylnHdeEhJuE5PoLEmZWbpNgxWc0_9yqId3q3w0lI3HEGyuz9orbnEFOSUQdUDUTVsfQhiyKnFy1EYI8Oz0ildOzg/d/tr.png)}

#facebox .bl{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizQlicmLTWWqNLzocZCwHg4vpzWYhNwq5OlRc8zZyODxBklQKPqrs81YAUs2v_V3fvIUF-RD5cXkx4jXJ2thclo0UsNWT48G_tI8Hz_1K_N5T7dd3PYH69pJLN0bWLnJHXr5WXvu2_MMZ1/d/bl.png)}

#facebox .br{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDh1PlH3hKhHy5wmiBdXeQ06hQNG31cVY_3hgLn1Zg5bVKRugIin3R0w7-iciLflt2tMa8qaScfJu7iCnALuKJs77x_TwRQmgLinFi84pP4Ss4kUnWOIrxTqXRtg3wBaaZiJH43j0qScwN/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>







المصدر