كيفية تكبير الصور بطريقة الجافاسكريبت هام لاصحاب المواقع التي تستعمل عرض الصور
2 مشترك
شبكة الأساتذة المجددين المغاربة :: الإبداع و الأخبار و التعارف وتبادل التجارب والأفكار :: دروس في مجال المعلوميات من إنتاج الأساتذة المجددين
صفحة 1 من اصل 1
كيفية تكبير الصور بطريقة الجافاسكريبت هام لاصحاب المواقع التي تستعمل عرض الصور
هذا الكودضعه في راس الصفحة يعني بين هيد وهيد
وهذا هو الكود
ثم ضع هذا الكود في الموضع الذي تريده لإظهار صورك بين بودي وبودي
BODY
عنوان صورة موقع الأساتذة المجددين فقط كمثال ويمكن ان تجعل بدله عنوان أو عناوين صورك وهذا هو عنوان الصورة
https://i.servimg.com/u/f72/11/92/63/99/reitra10.jpg
لكن عليك ان تحمل وتثبث هذا الملف لديك في محتويات موقعك او مدونتك وهذا هو الملف حدد هذا النص وانقله وألصقه في نوت بيد أو بلوك نوت
bloc-notes
مع اعطائه امتداد
js
وتعني جافا سكريبت
عليك ان تدخل الصورتين الى موقعك او مدونتك وتاخد عنوانهما وتضعهما في محل عنوانهما في النص الذي يجب حفضه في البلوك نوت وادخاله الموقع
http://profl.on.ma
وهذا هو الكود
- الكود:
<style type="text/css">
/*Default CSS for pan containers*/
.pancontainer{
position:relative; /*keep this intact*/
overflow:hidden; /*keep this intact*/
width:300px;
height:300px;
border:1px solid black;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="imagepanner.js">
</script>
ثم ضع هذا الكود في الموضع الذي تريده لإظهار صورك بين بودي وبودي
BODY
- الكود:
<div class="pancontainer" data-orient="center" data-canzoom="yes" style="width:400px; height:300px;">
<img src="http://i72.servimg.com/u/f72/11/92/63/99/reitra10.jpg" style="width:700px; height:525px" />
</div>
عنوان صورة موقع الأساتذة المجددين فقط كمثال ويمكن ان تجعل بدله عنوان أو عناوين صورك وهذا هو عنوان الصورة
https://i.servimg.com/u/f72/11/92/63/99/reitra10.jpg
لكن عليك ان تحمل وتثبث هذا الملف لديك في محتويات موقعك او مدونتك وهذا هو الملف حدد هذا النص وانقله وألصقه في نوت بيد أو بلوك نوت
bloc-notes
مع اعطائه امتداد
js
وتعني جافا سكريبت
- الكود:
// v1.1 (March 25th, 10): Updated with ability to zoom in/out of image
jQuery.noConflict()
var ddimagepanner={
magnifyicons: ['magnify.gif','magnify2.gif', 24,23], //set path to zoom in/out images, plus their dimensions
maxzoom: 4, //set maximum zoom level (from 1x)
init:function($, $img, options){
var s=options
s.imagesize=[$img.width(), $img.height()]
s.oimagesize=[$img.width(), $img.height()] //always remember image's original size
s.pos=(s.pos=="center")? [-(s.imagesize[0]/2-s.wrappersize[0]/2), -(s.imagesize[1]/2-s.wrappersize[1]/2)] : [0, 0] //initial coords of image
s.pos=[Math.floor(s.pos[0]), Math.floor(s.pos[1])]
$img.css({position:'absolute', left:s.pos[0], top:s.pos[1]})
if (s.canzoom=="yes"){ //enable image zooming?
s.dragcheck={h: (s.wrappersize[0]>s.imagesize[0])? false:true, v:(s.wrappersize[1]>s.imagesize[1])? false:true} //check if image should be draggable horizon and vertically
s.$statusdiv=$('[color=white]1x Magnify[/color]
').appendTo(s.$pancontainer) //create DIV to show current magnify level
s.$statusdiv.css({left:0, top:s.wrappersize[1]-s.$statusdiv.outerHeight(), display:'none', visibility:'visible'})
this.zoomfunct($, $img, s)
}
this.dragimage($, $img, s)
},
dragimage:function($, $img, s){
$img.mousedown(function(e){
s.pos=[parseInt($img.css('left')), parseInt($img.css('top'))]
var xypos=[e.clientX, e.clientY]
$img.bind('mousemove.dragstart', function(e){
var pos=s.pos, imagesize=s.imagesize, wrappersize=s.wrappersize
var dx=e.clientX-xypos[0] //distance to move horizontally
var dy=e.clientY-xypos[1] //vertically
s.dragcheck={h: (wrappersize[0]>imagesize[0])? false:true, v:(wrappersize[1]>imagesize[1])? false:true}
if (s.dragcheck.h==true) //allow dragging horizontally?
var newx=(dx>0)? Math.min(0, pos[0]+dx) : Math.max(-imagesize[0]+wrappersize[0], pos[0]+dx) //Set horizonal bonds. dx>0 indicates drag right versus left
if (s.dragcheck.v==true) //allow dragging vertically?
var newy=(dy>0)? Math.min(0, s.pos[1]+dy) : Math.max(-imagesize[1]+wrappersize[1], pos[1]+dy) //Set vertical bonds. dy>0 indicates drag downwards versus up
$img.css({left:(typeof newx!="undefined")? newx : pos[0], top:(typeof newy!="undefined")? newy : pos[1]})
return false //cancel default drag action
})
return false //cancel default drag action
})
$(document).bind('mouseup', function(e){
$img.unbind('mousemove.dragstart')
})
},
zoomfunct:function($, $img, s){
var magnifyicons=this.magnifyicons
var $zoomimages=$('[img]%27+magnifyicons[0]+%27[/img][img]%27+magnifyicons[1]+%27[/img]')
.css({width:magnifyicons[2], height:magnifyicons[3], cursor:'pointer', zIndex:1000, position:'absolute',
top:s.wrappersize[1]-magnifyicons[3]-1, left:s.wrappersize[0]-magnifyicons[2]-3, opacity:0.7
})
.attr("title", "Zoom Out")
.appendTo(s.$pancontainer)
$zoomimages.eq(0).css({left:parseInt($zoomimages.eq(0).css('left'))-magnifyicons[2]-3, opacity:1}) //position "zoom in" image
.attr("title", "Zoom In")
$zoomimages.click(function(e){ //assign click behavior to zoom images
var $zimg=$(this) //reference image clicked on
var curzoom=s.curzoom //get current zoom level
var zoomtype=($zimg.attr("title").indexOf("In")!=-1)? "in" : "out"
if (zoomtype=="in" && s.curzoom==ddimagepanner.maxzoom || zoomtype=="out" && s.curzoom==1) //exit if user at either ends of magnify levels
return
var basepos=[s.pos[0]/curzoom, s.pos[1]/curzoom]
var newzoom=(zoomtype=="out")? Math.max(1, curzoom-1) : Math.min(ddimagepanner.maxzoom, curzoom+1) //get new zoom level
$zoomimages.css("opacity", 1)
if (newzoom==1) //if zoom level is 1x, dim "zoom out" image
$zoomimages.eq(1).css("opacity", 0.7)
else if (newzoom==ddimagepanner.maxzoom) //if zoom level is max level, dim "zoom in" image
$zoomimages.eq(0).css("opacity", 0.7)
clearTimeout(s.statustimer)
s.$statusdiv.html(newzoom+"x Magnify").show() //show current zoom status/level
var nd=[s.oimagesize[0]*newzoom, s.oimagesize[1]*newzoom]
var newpos=[basepos[0]*newzoom, basepos[1]*newzoom]
newpos=[(zoomtype=="in" && s.wrappersize[0]>s.imagesize[0] || zoomtype=="out" && s.wrappersize[0]>nd[0])? s.wrappersize[0]/2-nd[0]/2 : Math.max(-nd[0]+s.wrappersize[0], newpos[0]),
(zoomtype=="in" && s.wrappersize[1]>s.imagesize[1] || zoomtype=="out" && s.wrappersize[1]>nd[1])? s.wrappersize[1]/2-nd[1]/2 : Math.max(-nd[1]+s.wrappersize[1], newpos[1])]
$img.animate({width:nd[0], height:nd[1], left:newpos[0], top:newpos[1]}, function(){
s.statustimer=setTimeout(function(){s.$statusdiv.hide()}, 500)
})
s.imagesize=nd
s.curzoom=newzoom
s.pos=[newpos[0], newpos[1]]
})
}
}
jQuery.fn.imgmover=function(options){
var $=jQuery
return this.each(function(){ //return jQuery obj
if (this.tagName!="IMG")
return true //skip to next matched element
var $imgref=$(this)
if (parseInt(this.style.width)>0 && parseInt(this.style.height)>0) //if image has explicit CSS width/height defined
ddimagepanner.init($, $imgref, options)
else if (this.complete){ //account for IE not firing image.onload
ddimagepanner.init($, $imgref, options)
}
else{
$imgref.bind('load', function(){
ddimagepanner.init($, $imgref, options)
})
}
})
}
jQuery(document).ready(function($){ //By default look for DIVs with class="pancontainer"
var $pancontainer=$('div.pancontainer')
$pancontainer.each(function(){
var $this=$(this).css({position:'relative', overflow:'hidden', cursor:'move'})
var $img=$this.find('img:eq(0)') //image to pan
var options={$pancontainer:$this, pos:$this.attr('data-orient'), curzoom:1, canzoom:$this.attr('data-canzoom'), wrappersize:[$this.width(), $this.height()]}
$img.imgmover(options)
})
})
عليك ان تدخل الصورتين الى موقعك او مدونتك وتاخد عنوانهما وتضعهما في محل عنوانهما في النص الذي يجب حفضه في البلوك نوت وادخاله الموقع
- الكود:
[img]%27+magnifyicons[0]+%27[/img][img]%27+magnifyicons[1]+%27[/img]
http://profl.on.ma
maxis22- عدد المساهمات : 9
تاريخ التسجيل : 22/08/2010
رد: كيفية تكبير الصور بطريقة الجافاسكريبت هام لاصحاب المواقع التي تستعمل عرض الصور
مشكور أخي الفاضل على هذه المعلومات القيمة وأحيي فيك روح تقاسم المعرفة التكنولوجيا المعلوماتية فهذه صفة قلما نجدها في هذه الأيام فتحية ود واحترام وتقدير
المحسيني
المحسيني
رد: كيفية تكبير الصور بطريقة الجافاسكريبت هام لاصحاب المواقع التي تستعمل عرض الصور
شكرا للأخ الكريم السيد المحسيني على هذا التشجيع وتبارك الله عليكماسيدي المحترم وكثر الله امثالكم لما فيه مصلحة الجميع
maxis22- عدد المساهمات : 9
تاريخ التسجيل : 22/08/2010
مواضيع مماثلة
» تعلم طريقة تصميم المواقع الاليكترونية بطريقة احترافية
» معجم الكفايات عمل شخصي للتحميل
» لعشاق برامج:رتوش الصور و الفلاش لكم هذا الموقع
» برنامج رائع من أجل إدخال تعديلات ورتوشات على الصور
» كيفية نقل فيلم من قرصك الصلب ‘لى صفحة في موقع الأساتذة المجددين
» معجم الكفايات عمل شخصي للتحميل
» لعشاق برامج:رتوش الصور و الفلاش لكم هذا الموقع
» برنامج رائع من أجل إدخال تعديلات ورتوشات على الصور
» كيفية نقل فيلم من قرصك الصلب ‘لى صفحة في موقع الأساتذة المجددين
شبكة الأساتذة المجددين المغاربة :: الإبداع و الأخبار و التعارف وتبادل التجارب والأفكار :: دروس في مجال المعلوميات من إنتاج الأساتذة المجددين
صفحة 1 من اصل 1
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى