Zoomooz – Implementare uno zoom su qualsiasi pagina web

 

Zoomooz è un utile plugin jQuery per l’inserimento di zoom sugli elementi di una pagina web che desideriamo. Può essere utilizzato per la realizzazione di presentazioni, per lo zoom di immagini o altri elementi ai quali vogliamo offrire maggiore dettaglio e visibilità.

Per implementare Zoomooz sulle vostre pagine web inserire lo script all’intero del tag <HEAD>

Fatto ciò basterà aggiungere “zoomTarget” come classe all’elemento in cui si desidera eseguire lo zoom quando lo si cliccherà.

Demo Download Info | Sito Web | Autore

pixolo ads
Cambia Copertina
3355 | Articolo pubblicato 4 anni fa nella categoria jQuery - Javascript.
Puoi seguire tutti i nuovi articoli e gli aggiornamenti di Pixolo.it attraverso i Pixolo feeds feed RSS.
Puoi inoltre lasciare un commento, oppure fare un trackback dell'articolo dal tuo sito.
  • Pino

    Salve,

    come faccio a zoomare (o rimpicciolire) una pagina web esterna ?

    Ringrazio per un eventuale aiutino.

    Pino

    pino@sevenseasexplorer.de

    • pixolo

      Dove deve essere caricata la pagina esterna? Su un iframe, un overlay, o altro?

      • Pino

        Ciao e grazie per la pronta risposta,

        l’ideale sarebbe in un wrapper (Joomla 2.5) ma in un normale iframe e/o in un altro modo, andrebbe bene lo stesso e, poi, vedo di adattare il tutto al mio fabbisogno.

        Grazie ancora.

        Pino

      • pixolo

        Questo plugin si applica a tutti gli elementi html indipendentemente dal loro contenuto, ma su di un iframe contenente una pagina web non saprei. Tutte le altre soluzioni, presenti anche su questo sito si rifanno allo zummare su di immagini. Per questo c’è l’imbarazzo della scelta.

      • Pino

        … a questo punto, mi viene spontanea la domanda:
        – sarebbe possibile con un overlay ?
        – e come funzionerebbe ?

        Scusa la mia ignoranza, riesco a fare “qualche cosa” ma … non sono una cima.

        Buon lavoro.

  • pixolo

    Non c’è problema. La cosa più fattibile e lineare è quella di linkare l’url della pagina web per essere aperta su di un overlay ed essere visualizzata dall’utente in maniera eccellente. Proprio come è impostato ad esempio in questa pagina, clikkando sul pulsante “DEMO”.

    Ammesso che si possa fare in qualche modo, zummare su di un iframe di magari 640px per guardarci una pagina web al suo interno, a livello di usabilità ed esperienza per l’utente, a mio giudizio è un disastro.

    • Pino

      Presumo che, l’esempio della demo, è svgtree: ho provato a modificare il seguente div:

      qui;

      inserendo solo il link al sito di Google (come vedi);

      in questo modo però, sparisce l’albero e appare “solo” la normale pagina web di Google e in modalità “estesa”.

      Posso fare diversamente per caricare la pagina sull’overlay e modificarne le dimensioni ?

      Lo so … so’ ‘na frana !

      Abbi pietà !

      • pixolo

        Il plugin da implementare e utilizzare è questo:
        http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

        Con esso si può mostrare in un overlay qualsiasi cosa.
        Saluti

      • pixolo

        Questa la parte che ti interessa.

      • Pino

        Ciao Pixolo,

        ho visto gli esempi e sto scaricando prettyPhoto 3.1.5.

        Cercherò di capirci qualcosa e, più in là … molto più in là, se avrò capito qualcosa, mi farò senz’altro risentire.

        Ti ringrazio di cuore e ti auguro ancora Buon Lavoro.

        Pino

      • pixolo

        Di niente ;) Saluti

      • Pino

        Ciao Pixolo,

        sarò un po’ “lungo” ma, forse, ciò che ci raccontiamo può servire anche agli altri.

        Sono riuscito, grazie anche a te, ad inserire una pagina esterna in un overlay, con le seguenti esperienze:

        – quanto segue, è stato testato sia con IE 8.0 che con FireFox 25.0.1 e Safari 5.1.7: risultato uguale su tutti e tre;

        – una pagina web, in puro html, viene incorporata e ridimensionata (credo) bene; le immagini vengono centrate ma non vengono ridimensionate, di conseguenza, se si decide per un drastico ridimensionamento, appare la barra (scroll) sottostante ma, ripeto, per un uso ‘normale’ va più che benissimo;

        – una pagina (credo) fatta con CMS, tipo la schermata della webcam Foscam (forse ne sai qualcosa) viene incorporata ma non ridimensionata; appaiono le barre laterale e sottostante, però è funzionevole;

        – una pagina (credo) fatta con CMS, tipo la schermata della webcam IPCam (forse ne sai anche qualcosa) viene incorporata, non ridimensionata; appaiono le barre laterale e sottostante ma … non funzionevole;

        per funzionevole intendo che, tali schermate, per l’accesso richiedono user e pwd e, come dicevo, la Foscam va bene, mentre l’altra si blocca sulla schermata iniziale, senza possibilità di inserire user + pwd.

        E’ risaputo, comunque, che non tutti i siti esterni si lasciano incorporare.

        Facendo comunque mente locale, per ridimensionare un browser (tutti e tre quelli menzionati) sul proprio pc, basta usare CTRL e ‘+’ oppure CTRL e ‘-‘ per ingrandire o rimpicciolire il browser … con qualsiasi pagina web.

        In teoria, basterebbe trovare il modo per inviare, da codice, la combinazione dei tasti suddetti ma … come si fa ?

        E’ ‘na parola !

        Da vecchio programmatore, mi sono imbastito una routine che, sempre sul proprio pc, individua il browser con la classica Caption, le da il focus e invia la sequanza dei tasti … e funziona bene ma …

        … come lo si fa con l’overlay ?

        Innanzitutto, bisogna farlo sul server che ospita la nostra pagina, poi, bisogna individuare il figlio (child) del browser e/o overlay che dir si voglia … !

        Questo potrebbe essere uno stimolo/incitamento … a scervellarsi !?!

        Purtroppo, sono attualmente ‘fuori zona’ e ho una pessima connessione internet per cui, per fare una ricerca … ci vuole una vita.

        Altro problema che, se risolto, può darci la forza di ricercare oltre: come faccio a dare una Caption all’overaly con prettyphoto?

        Se hai novità … !

        Un saluto

        Pino

4
SHARES
Be Sociable,
share and enjoy!
Resta aggiornato!
Segui Pixolo anche su Facebook!
Don't show more - I am already fan
×
Salva il post su Facebook
What is a Facebook Save Button?

The save button lets you save the current page to your private list on Facebook for a future use or consultation.
info | close
×