بعد انقضاء فترة الامتحانات اعود الى مدونتي واعود اليكم احبائي الكرام ان شاء الله الايام القادمة حاملة لعديد من المفاجات التي نود عبرها بارضاء زوارنا وتقديم الافضل لهم
اما اليوم فسيكون لنا موعد مع درس : "كيفية اضافة هاك colorbox الى منصة بلوجر "
طبعا تعددت الهاكات المتخصصة في عرض الصور كإطار منبثق وطبعا كل واحدة لها مميزاتها الخاص
لنبدأ على بركة الله :
مثال حي :
مثال حي :
اولا نضيف نص javascript قبل نهاية وسوم </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="https://sites.google.com/site/3alymni/colorbox/jquery.colorbox.js"></script>
ثم نضيف نص css قبل نهاية وسوم
]]></b:skin>
<style type='text/CSS'>
#colorbox, #cboxOverlay, #cboxWrapper {
position:absolute;
top:0;
left:0;
z-index:9999;
overflow:hidden;
}
#cboxOverlay {
position:fixed;
width:100%;
height:100%;
}
#cboxMiddleLeft, #cboxBottomLeft {
clear:left;
}
#cboxContent {
position:relative;
}
#cboxLoadedContent {
overflow:auto;
}
#cboxTitle {
margin:0;
}
#cboxLoadingOverlay, #cboxLoadingGraphic {
position:absolute;
top:0;
left:0;
width:100%;
}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
cursor:pointer;
}
.cboxPhoto {
float:left;
margin:auto;
border:0;
display:block;
}
.cboxIframe {
width:100%;
height:100%;
display:block;
border:0;
}
#cboxOverlay {
background:#000;
}
#colorbox{}
#cboxTopLeft {
width:14px;
height:14px;
background:url(https://sites.google.com/site/fowziey/colorbox_controls.png) no-repeat 0 0;
}
#cboxTopCenter {
height:14px;
background:url(https://sites.google.com/site/fowziey/colorbox_border.png) repeat-x top left;
}
#cboxTopRight {
width:14px;
height:14px;
background:url(https://sites.google.com/site/fowziey/colorbox_controls.png) no-repeat -36px 0;
}
#cboxBottomLeft {
width:14px;
height:43px;
background:url(https://sites.google.com/site/fowziey/colorbox_controls.png) no-repeat 0 -32px;
}
#cboxBottomCenter {
height:43px;
background:url(https://sites.google.com/site/fowziey/colorbox_border.png) repeat-x bottom left;
}
#cboxBottomRight {
width:14px;
height:43px;
background:url(https://sites.google.com/site/fowziey/colorbox_controls.png) no-repeat -36px -32px;
}
#cboxMiddleLeft {width:14px;
background:url(https://sites.google.com/site/fowziey/colorbox_controls.png) repeat-y -175px 0;
}
#cboxMiddleRight {
width:14px;
background:url(https://sites.google.com/site/fowziey/colorbox_controls.png) repeat-y -211px 0;
}
#cboxContent {
background:#fff;
overflow:visible;
}
#cboxLoadedContent {
margin-bottom:5px;
}
#cboxLoadingOverlay {
background:url(https://sites.google.com/site/fowziey/colorbox_loading_background.png) no-repeat center center;
}
#cboxLoadingGraphic {
background:url(https://sites.google.com/site/fowziey/colorbox_loading.gif) no-repeat center center;
}
#cboxTitle {
position:absolute;
bottom:-25px;
left:0;
text-align:center;
width:100%;
font-weight:bold;
color:#7C7C7C;
}
#cboxCurrent {
position:absolute;
bottom:-25px;
left:58px;
font-weight:bold;
color:#7C7C7C;
}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow {
position:absolute;
bottom:-29px;
background:url(https://sites.google.com/site/fowziey/colorbox_controls.png) no-repeat 0px 0px;
width:23px;
height:23px;
text-indent:-9999px;
}
#cboxPrevious {
left:0px;
background-position: -51px -25px;
}
#cboxPrevious.hover {
background-position:-51px 0px;
}
#cboxNext {
left:27px;
background-position:-75px -25px;
}
#cboxNext.hover {
background-position:-75px 0px;
}
#cboxClose {
right:0;
background-position:-100px -25px;
}
#cboxClose.hover {
background-position:-100px 0px;
}
.cboxSlideshow_on #cboxSlideshow {
background-position:-125px 0px;
right:27px;
}
.cboxSlideshow_on #cboxSlideshow.hover {
background-position:-150px 0px;
}
.cboxSlideshow_off #cboxSlideshow {
background-position:-150px -25px;
right:27px;
}
.cboxSlideshow_off #cboxSlideshow.hover {
background-position:-125px 0px;
}
</style>ثم نضيف بعض من حركات الجي كوري
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("a.color-elastic").colorbox();
$("a.color-fade").colorbox({transition:"fade"});
$("a.color-slideshow").colorbox({slideshow:true});
$(".color").colorbox();
$(".color-video").colorbox({iframe:true, innerWidth:425, innerHeight:344});
$(".color-iframe").colorbox({width:"80%", height:"80%", iframe:true});
$(".color-inline").colorbox({width:"50%", inline:true, href:"#Description"});
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff",
"cursor":"inherit"}).text("Open this window again and this message will
still be here.");
return false;
});
});
//]]>
</script>كيفية الاستعمال :
عند كتابة احدى المقالات نتجه الى المحرر ونضع المحرر تحت وضع edit html
لصورة واحدة :
<a class='color' href="رابط" title="تعليق لصورة"><img border='0' height='90' width='120' src="رابط الصورة"/></a>لمعرض صور
<a class="color-elastic" href="رابط 1" rel="GALLERYTITLE" title="تعليق لصورة"><img border="0" height="90" src="رابط الصورة" width="120" /></a> <a class="color-elastic" href="رابط2" rel="GALLERYTITLE" title="تعليق لصورة"><img border="0" height="90" src="رابط الصورة" width="120" /></a>
عارض السلايد شو
<a class="color-slideshow" href="IMAGE_01 URL" rel="GALLERYTITLE" title="IMAGE_01 CAPTION"><img border="0" height="90" src="IMAGE_01 URL" width="120" /></a> <a class="color-slideshow" href="IMAGE_02 URL" rel="GALLERYTITLE" title="IMAGE_02 CAPTION"><img border="0" height="90" src="IMAGE_02 URL" width="120" /></a> <a class="color-slideshow" href="IMAGE_03 URL" rel="GALLERYTITLE" title="IMAGE_03 CAPTION"><img border="0" height="90" src="IMAGE_03 URL" width="120" /></a>
لعرض الفيديو من اليوتيوب
<!--For Youtube-->
<a class='color-video'
href="YOUTUBE EMBED CODE URL" title="VIDEO TITLE"><img border='0'
height='90' width='120' src="YOUTUBE LOGO URL"/></a>
<!--Same for Vimeo-->
<a class='color-video'
href="VIMEO EMBED CODE URL" title="VIDEO TITLE"><img border='0'
height='90' width='120' src="VIMEO LOGO URL"/></a>
<!--OR use simple link-->
<a class='color-video' href="YOUTUBE/VIMEO EMBED CODE URL" title="VIDEO TITLE">WATCH THE VIDEO</a>
ليست هناك تعليقات:
إرسال تعليق