Le style de Google Maps défiler quelqu'un?

Question

Je recherche un plugin JavaScript (de préférence jQuery) pour pouvoir faire défiler une image, de la même manière que Google. Maps fonctionne.

Je peux rendre l'image déplaçable, mais je vois toute l'image en le faisant glisser, même si le div parent est overflow:hidden.

Toute aide serait grandement appréciée!

Answer 1

Je suis peut-être un peu en retard à la fête, mais je cherchais simplement la même chose. Ce que je suis tombé sur est scrollview pour jquery, cela fonctionne parfaitement et fait exactement ce que google comme pour les div débordées, faites glisser le curseur vers les cartes.

Answer 2

(Je suis super tard pour cette soirée maintenant morte, mais bon, j'ai trouvé cette page via une recherche alors ...)

Le plugin Scrollview suggéré par mooware ne fonctionnait pas pour moi.

Cependant, Dragscrollable a: http://plugins.jquery.com/project/Dragscrollable

Essayez la démonstration

Answer 3

Découvrez le Google Maps Image Cutter . image ou photo numérique et le couper en tuiles qui sont affichées sur une carte de Google. Peut-être un moyen rapide de faire ce dont vous avez besoin ...

Answer 4

Vous pouvez utiliser l’API Google Maps ... qui vous permet de l’utiliser avec des images personnalisées. Et vous pouvez choisir si les contrôles apparaissent ou non.

EDIT: j'ai trouvé un tutoriel décent sur la façon de procéder. http://mapki.com/wiki/Add_Your_Own_Custom_Map

Answer 5

Pour une bonne description de la technologie sous-jacente, reportez-vous au chapitre 4 (si je me souviens bien) du livre de Pragmatic Programmers Ajax pragmatique .

Vous verrez comment le découpage en tranches et le découpage d'images fonctionnent sous les couvertures. Et le zoom.

Answer 6

Cela concerne moins le javascript que le codage CSS .

Essayez quelques expériences uniquement avec HTML et CSS pour obtenir une image correcte, puis ajoutez le javascript pour la déplacer.

Si vous ne parvenez pas à découper en HTML ou à déplacer avec la publication javascript, voici la démonstration la plus simple du problème à déboguer.

Sans le code que nous enregistrons dans le noir.

Answer 7

Google Maps utilise des images découpées en blocs qui sont chargés dynamiquement lorsque l'utilisateur effectue un panoramique dans différentes directions. La Google Maps Image Cutter , mentionne Paul Dixon, est l'outil que vous souhaitez ceci.

Si vous souhaitez uniquement déplacer une grande image au lieu d’avoir la complexité supplémentaire de découper l’image en blocs, utilisez plutôt la propriété clip . Ceci est supporté par tous les navigateurs qui méritent réflexion, jusqu'à IE4 si mes souvenirs sont exacts.

Un point à noter: la spécification CSS2.1 montre des exemples avec les valeurs rect séparées par des virgules. Cependant, ceci n'est pas supporté par IE6 (peut-être pas IE7 non plus). Cependant, tous les autres navigateurs comprennent la version sans virgule. Donc au lieu de

clip: rect(5px, 40px, 45px, 5px);

vous devriez utiliser

clip: rect(5px 40px 45px 5px);

pour la compatibilité.

Vous avez besoin d’un conteneur < div > mis à la position: relative autour du < img > élément que vous définissez ensuite sur position: absolute.

La technique de base consiste donc à mettre à jour les valeurs supérieure et gauche au fur et à mesure que l'utilisateur le traîne, à les utiliser avec la largeur et la hauteur définies de la vue sur l'image pour créer la chaîne rect () appropriée et à mettre à jour la partie supérieure gauche et les propriétés de clip du < img > propriété de style de l'élément.

Ne faites pas ce que j'ai fait et laissez de côté le & "; px &"; après les valeurs de la chaîne rect (). Il m'a fallu des siècles pour comprendre pourquoi cela ne fonctionnait pas: -)