giovedì 20 Giugno 2019

Download in corso

Grazie per aver scaricato da Softwareone.it

AnythingZoomer 2 – Zoom su testo e foto

AnythingZoomer 2 è un plugin jQuery che crea una lente di ingrandimento per zoomare immagini e testo basta caricare la libreria jQuery (La versione minima supportata è jQuery 1.3.2) e richiamare la funzione sulla zona che si desidera avere lo zoom.

Image Demo

File necessari

<link rel="stylesheet" type="text/css" href="/style/AnythingZoomer2/css/anythingzoomer.css">
  
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="/style/AnythingZoomer2/js/jquery.anythingzoomer.js"></script>

Struttura 

<div class="zoom">
  <div class="small">
         <img src="/immagini/small600px-Crab_Nebula.png" alt="piccola" />
  </div>>
  <div class="large">
      <img src="/immagini/600px-Crab_Nebula.jpg" alt="grande" />
   </div>
</div>

jQuery

$(function() { 
  
    $(".zoom").anythingZoomer({
        overlay : true,
        edit: true,
        // If you need to make the left top corner be at exactly 0,0, adjust the offset values below
        offsetX : 0,
        offsetY : 0
    });
  
    $('.president')
    .bind('click', function(){
        return false;
    })
    .bind('mouseover click', function(){
        var loc = $(this).attr('rel');
        if (loc &amp;&amp; loc.indexOf(',') > 0) {
            loc = loc.split(',');
            $('.zoom').anythingZoomer( loc[0], loc[1] );
        }
        return false;
    });
  
});

Zoom su testo

<div id="zoom" class="textzoom">
<div class="small">
<p>Pellentesque habitant morbi tristique senectus
et netus et malesuada fames ac turpis egestas. 
Vestibulum tortor quamentum, eros ipsum rutrum
orci, sagittis tempus lacus enim ac dui.
Donec non enim in turpis pulvinar facilisis. Ut felis. 
Praesent dapibus, neque id cursus faucibus, 
tortor neque egestas augue, eu vulputate 
magna eros eu erat. Aliquam erat volutpat. 
Nam dui mi, tincidunt quis, accumsan porttitor, 
facilisis luctus, metus<./p>
</div>
          
<div class="large">
This text will be replaced since the "clone" option is set to true/div><br>
</div>

jQuery

$(function() {
   
        // clone the small area, the css will define the dimensions
        // default class name for the large area is "large"
        $("#zoom").anythingZoomer({
            clone: true
        });
   
        // zoom in
        $('button').click(function(){
            $(this).addClass('selected').siblings().removeClass('selected');
            // .small p { font-size: 8px; width: 300px; }
            var origW = 300,
                origSz = 8,
            // get multiple
            multiple = parseInt( $(this).text() );
            $('.large p').css({
                width: origW * multiple,
                fontSize: origSz * multiple
            });
            // update anythingZoomer window,
            // but first turn off clone since cloning the small area again will remove our changes
            $('#zoom').getAnythingZoomer().options.clone = false;
            $('#zoom').anythingZoomer();
        });
   
    });

Scarica AnythingZoomer