Hola,

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