0
J'utilise ce plugin de Get Hifi dans mon code. J'essaye de reproduire l'animation de fadeIn sur fadeOut mais je ne peux pas sembler la casser. J'ai posté le script et les paramètres pour cela ci-dessous. S'il vous plaît laissez-moi savoir s'il y a un moyen de le faire, ou si quelqu'un a eu un problème similaire et résolu. Désolé je ne peux pas poster un lien c'est un projet interne. VivePlugin jQuery pour les cartes interactives zoomables
Script
/*
* Copyright (C) 2009 Joel Sutherland.
* Liscenced under the MIT liscense
* TODO:
* 1. Create API
* 2. Address accesibility automatically
* 3. Make object oriented
*/
(function($) {
$.fn.zoommap = function(settings) {
settings = $.extend({
zoomDuration: 100,
zoomClass: 'zoomable',
popupSelector: 'div.popup',
popupCloseSelector: 'a.close',
bulletWidthOffset: '10px',
bulletHeightOffset: '10px',
showReturnLink: true,
returnId: 'returnlink',
returnText: 'Return to Previous Map'
}, settings);
$(this).each(function(){
var map = $(this);
$(this).data('currentId', '');
/******* Show Map by ID ************/
$(this).bind('showMap', function(e, id, value){
alert(id);
showMapById(id);
//return this?
});
function showMapById(id){
var region = findRegion(settings.map, id);
if(region != -1){
displayMap(region);
}
}
// recursive id find
function findRegion(root, id){
if(root.id == id){
return root;
}else{
if(root.maps != undefined){
for(var i=0; i<root.maps.length; i++){
return findRegion(root.maps[i], id);
}
}
}
return -1;
}
// region is a map
// This gets called every time we zoom
function displayMap(region){
//Set Current Region Id
$(this).data('currentId', region.id);
//Clear the Map and Set the Background Image
map.empty().css({
backgroundImage: 'url(' + region.image + ')',
width: settings.width,
height: settings.height
});
//Load RegionData
loadRegionData(region);
}
/************************************************************************************/
//Show Return Link
function showReturnLink(region){
map.append('<a href="javascript:void(0);" id="' + settings.returnId + '">' + settings.returnText + '</a>');
$('#' + settings.returnId).hide().fadeIn().click(function(){
showMapById(region.parent);
$(this).remove();
});
}
//Load the Bullets
function loadRegionData(region){
var url = region.data;
map.load(url, {}, function(){
//place bullets
$(this).children('a.bullet').each(function(){
var coords = $(this).attr('rel').split('-');
$(this).css({left: addpx(Number(coords[0]) - rempx(settings.bulletWidthOffset)), top: addpx(Number(coords[1]) - rempx(settings.bulletHeightOffset))})
.hide()
.click(function(){showPopup($(this).attr('id'));})
.fadeIn('fast');
});
//Set up each submap as an item to click
if(region.maps != undefined){
for(var i=0; i<region.maps.length; i++){
addZoom(region.maps[i]);
}
}
//Create Return Link
if(settings.showReturnLink && region.parent != undefined){
showReturnLink(region);
}
});
}
function showPopup(id, leftbul, topbul){
map.find(settings.popupSelector).fadeOut();
var boxid = '#' + id + '-box';
$(boxid).fadeIn();
$(settings.popupCloseSelector).click(function(){
$(this).parent().fadeOut();
});
}
//add a clickable image for a region on the current map
function addZoom(region){
$('<img />').addClass(settings.zoomClass)
.attr({
src: settings.blankImage,
id: region.id
}).css({
position: 'absolute',
width: region.width,
height: region.height,
top: region.top,
left: region.left,
cursor: 'pointer'
}).appendTo(map).click(function(){
//hide neighboring bullets and zoomables
var width = settings.width;
var height = settings.height;
if(region.scan){
width = region.scanwidth;
height = region.scanheight;
}
$(this).siblings().fadeOut();
$(this).load(function(){
$(this).fadeIn('fast')
.animate({
width: width,
height: height,
top: '0px',
left: '0px'
}, settings.zoomDuration, '', function(){
displayMap(region);
});
});
$(this).siblings().fadeOut();
$(this).hide().attr('src', region.image);
});
}
function rempx(string){
return Number(string.substring(0, (string.length - 2)));
}
function addpx(string){
return string + 'px';
}
function showHash(string){
string = string.replace('#', '');
showMapById(string);
}
//initialize map
var hash = self.document.location.hash;
if(hash.length > 0)
showHash(hash);
else{
displayMap(settings.map);
}
return this;
});
}
}) (jQuery);
Réglages
$(document).ready(function(){
/* Show jQuery is running */
$('h1').css({textDecoration: 'underline'});
$('#map').zoommap({
// Width and Height of the Map
width: '437px',
height: '611px',
//Misc Settings
blankImage: 'images/blank.gif',
zoomDuration: 500,
bulletWidthOffset: '10px',
bulletHeightOffset: '10px',
//ids and classes
zoomClass: 'zoomable',
popupSelector: 'div.popup',
popupCloseSelector: 'a.close',
//Return to Parent Map Link
showReturnLink: true,
returnId: 'returnlink',
returnText: 'return to main map',
//Initial Region to be shown
map: {
id: 'north_island',
image: 'images/nz-map.jpg',
data: 'map_data/north_island.html',
maps: [
{
id: 'south_island',
parent: 'north_island',
image: 'images/nz-map-auckland.jpg',
data: 'map_data/south_island.html',
width: '200px',
height: '232px',
top: '18px',
left: '176px'
/* More maps can be nested
maps : [ ]
*/
}
]
}
});
});