شبكة الأساتذة المجددين المغاربة
هل تريد التفاعل مع هذه المساهمة؟ كل ما عليك هو إنشاء حساب جديد ببضع خطوات أو تسجيل الدخول للمتابعة.

كيفية تكبير الصور بطريقة الجافاسكريبت هام لاصحاب المواقع التي تستعمل عرض الصور

2 مشترك

اذهب الى الأسفل

كيفية تكبير الصور بطريقة الجافاسكريبت هام لاصحاب المواقع التي تستعمل عرض الصور Empty كيفية تكبير الصور بطريقة الجافاسكريبت هام لاصحاب المواقع التي تستعمل عرض الصور

مُساهمة من طرف maxis22 الخميس 2 سبتمبر - 17:33

هذا الكودضعه في راس الصفحة يعني بين هيد وهيد

وهذا هو الكود
الكود:

<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>

كيفية تكبير الصور بطريقة الجافاسكريبت هام لاصحاب المواقع التي تستعمل عرض الصور Reitra10


عنوان صورة موقع الأساتذة المجددين فقط كمثال ويمكن ان تجعل بدله عنوان أو عناوين صورك وهذا هو عنوان الصورة
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)
   })
})
بعد ان سجلت النص في بلوك نوت وادخلته الى موقعك يجب ايبضا ان تدخل الصور التالية وهي
كيفية تكبير الصور بطريقة الجافاسكريبت هام لاصحاب المواقع التي تستعمل عرض الصور Magnify كيفية تكبير الصور بطريقة الجافاسكريبت هام لاصحاب المواقع التي تستعمل عرض الصور Magnify2
عليك ان تدخل الصورتين الى موقعك او مدونتك وتاخد عنوانهما وتضعهما في محل عنوانهما في النص الذي يجب حفضه في البلوك نوت وادخاله الموقع
الكود:
[img]%27+magnifyicons[0]+%27[/img][img]%27+magnifyicons[1]+%27[/img]
مع تحيات ذ,أحمد لعوينة
http://profl.on.ma

maxis22

عدد المساهمات : 9
تاريخ التسجيل : 22/08/2010

الرجوع الى أعلى الصفحة اذهب الى الأسفل

كيفية تكبير الصور بطريقة الجافاسكريبت هام لاصحاب المواقع التي تستعمل عرض الصور Empty رد: كيفية تكبير الصور بطريقة الجافاسكريبت هام لاصحاب المواقع التي تستعمل عرض الصور

مُساهمة من طرف Elmouhssini الأحد 3 أكتوبر - 0:27

مشكور أخي الفاضل على هذه المعلومات القيمة وأحيي فيك روح تقاسم المعرفة التكنولوجيا المعلوماتية فهذه صفة قلما نجدها في هذه الأيام فتحية ود واحترام وتقدير
المحسيني
Elmouhssini
Elmouhssini

عدد المساهمات : 444
تاريخ التسجيل : 25/01/2008
العمر : 62

https://espoir.yoo7.com

الرجوع الى أعلى الصفحة اذهب الى الأسفل

كيفية تكبير الصور بطريقة الجافاسكريبت هام لاصحاب المواقع التي تستعمل عرض الصور Empty رد: كيفية تكبير الصور بطريقة الجافاسكريبت هام لاصحاب المواقع التي تستعمل عرض الصور

مُساهمة من طرف maxis22 الأحد 3 أكتوبر - 7:26

شكرا للأخ الكريم السيد المحسيني على هذا التشجيع وتبارك الله عليكماسيدي المحترم وكثر الله امثالكم لما فيه مصلحة الجميع

maxis22

عدد المساهمات : 9
تاريخ التسجيل : 22/08/2010

الرجوع الى أعلى الصفحة اذهب الى الأسفل

الرجوع الى أعلى الصفحة

- مواضيع مماثلة

 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى