Estoy tratando de hacer un mapa interactivo en el que se abren unos pop up mediante jquery y dentro de estos pop ups quiero cargar diferentes elementos, videos, slideshows y otros.
El mapa interactivo que uso como base es el siguiente:
http://www.gethifi.com/blog/a-jquery-plugin-for-zoomable-interactive-maps
Trate de cargar el video directamente con el script un (.js), pero al parecer el mapa no carga bien algunos codigos (aparte de imagenes y texto). El mapa carga el contenido de los pop up desde otro html.
Aqui os dejo un ejemplo:
[url=example.html]http://sites.rnw.nl/flash/noflash/2/example.html
[/url]
Dado que no puedo cargar el script, trate de cargar los videos mediante Iframes, pero el mapa solo me acepta uno, si pongo un iframe en cada uno de los pop up solo me aparece el primero y desaparecen el resto.
A ver si alguien puede me ayudar a conseguir que pueda cargar un iframe en cada uno de los pop up.
Este es el codigo del js zoommap.js
Código :
/* * 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: 1000, 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(); window.frames["video"].location.reload(); }); } //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).hide() .attr('src', region.image).load(function(){ $(this).fadeIn('slow') .animate({ width: width, height: height, top: '0px', left: '0px' }, settings.zoomDuration, '', function(){ displayMap(region); }); }); }); } 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);
Mil gracias de antemano