بعد انقضاء فترة الامتحانات اعود الى مدونتي واعود اليكم احبائي الكرام ان شاء الله الايام القادمة حاملة لعديد من المفاجات التي نود عبرها بارضاء زوارنا وتقديم الافضل لهم
اما اليوم فسيكون لنا موعد مع درس : "كيفية اضافة هاك 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>
انا
بارك الله فيك أخي وجزاك عنا كل خير على هذا المجهود
أخي لو تكرمة برفع العمل النهائي للتطبيق حتى نتمكن من مشاهدة العمل
وفقك الله الى كل مايحبه ويرضاه
@غير معرف
العفو اخي الكريم اما بالنسبة للمشاهدة الحية جاري العمل عليها
بارك الله فيك اخي سفيان
+
جاري التجريب
شكرااااااااااااااااااااااا حقيقى بجد لك كل الشكر
السلام عليكم،
شكرا جزيلا لك لقد بحث عنه مطولا ;)
ــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــــ
مدونة مُخْتَارَات