[map module] map module and lightbox

ledom

Joined: 2007-10-08
Posts: 77
Posted: Wed, 2008-05-28 15:48

Hi!

Edit: found this, http://sourceforge.net/tracker/index.php?func=detail&aid=1560357&group_id=152389&atid=784164

I need your help. I'm not developer (or noob if you want:).

I use the map module (witch is a great module) and I want to customize (or hack if you want:) it.

So, actually when I clic on a marker, the bubble appear with a picture. Ok, great. Now if I click on the picture, I'm redirected to the album page. And if I want to see another picture in another place i must go back to the map, search again on the map (zoom etc...).

Is it possible to modify default.inc links to open album's pictures in lightbox and not be redirected to album page?

$map['infowindows'][0]="'<div style=\"width:200px\"><a href=\"'+itemLink+'\">'+title+'<\/a><br/>'
+'<a href=\"'+itemLink+'\"><img src=\"'+thumbLink+'\" width=\"'+thw+'\" height=\"'+thh+'\" alt=\"'+title+'\" style=\"max-width:200px;max-height:200px;\"/><\/a>'
+'<br/><font color=black><b>".$module->translate("Date:")."<\/b> '+created+'<\/font>'";

Where can I add rel="lightbox[gallery]" into the link? Is it possible to load scripts in default.inc?

Like that, when I close the lightbox window, the map hasn't move... and I don't need to search again.

Thanks for your help.

edit: I have found that in this thread: http://gallery.menalto.com/node/54063 and it is exactly what I want to do:

Quote:
panoviews wrote:

Running Gallery 2.1.2 (typical install) with the Google-Map-Module-0.5.1d and the PGtheme I'd like to open the gallery item in the lightbox.
The lighbox should open clicking on the thumbnail in the infowindow on the google map.

The best way would be to create a new infowindow that would have the JS etc required for the light box. Look in modules/map/templates/infowindow/ for exsisiting examples to copy.

Start a new thread as to keep this one on topic as your case relates to the map module not this new theme.

Dave

An example that works (not in gallery): http://www.joshcastellano.com/maps/

I just don't understant where to load scripts (not in default.inc file I think) and how to add rel='lightbox' in <a ref > ("" or \"\" or ...?)

 
floridave
floridave's picture

Joined: 2003-12-22
Posts: 25967
Posted: Fri, 2008-05-30 05:39

I don't have a lightbox to test so am just guessing:
default.inc

$map['infowindows'][0]="'<div style=\"width:200px\"><a href=\"'+itemLink+'\">'+title+'<\/a><br/>'
      +'<a href=\"'+itemLink+'\"><img src=\"'+thumbLink+'\" width=\"'+thw+'\" height=\"'+thh+'\" alt=\"'+title+'\" style=\"max-width:200px;max-height:200px;\"/><\/a>'

to

$map['infowindows'][0]="'<div style=\"width:200px\"><a href=\"'+itemLink+'\">'+title+'<\/a><br/>'
      +'<a rel=\"lightbox\" href=\"'+itemLink+'\"><img src=\"'+thumbLink+'\" width=\"'+thw+'\" height=\"'+thh+'\" alt=\"'+title+'\" style=\"max-width:200px;max-height:200px;\"/><\/a>'

But I suspect that it will only give you lightbox of the image and not the album.
Do you have lightbox installed?

Dave

_____________________________________________
Blog & G2 || floridave - Gallery Team

 
ledom

Joined: 2007-10-08
Posts: 77
Posted: Tue, 2008-06-03 16:57

Hi Floridave

Thank you to help me.

I use lightbox to display pictures in albums and it works great.
To get it working I used this http://codex.gallery2.org/Gallery2:Modules:Lightbox. I made a matrixlightbox theme and it works fine (I don't use the module).

I make your test by adding rel=\"lightbox\" where you said in default.inc and it don't seem to work, the thumbnail link to the album, without lightbox effect.

I also try rel=\"lightbox[gallery]\", same result...

so, I then try to load lightbox scripts into MapHeader.tpl

<link rel="stylesheet" type="text/css" media="screen" href="{g->theme url="includes/css/lightbox.css"}" />	
<script type="text/javascript" src="{g->theme url="includes/js/prototype.js"}"></script>
<script type="text/javascript" src="{g->theme url="includes/js/effects.js"}"></script>
<script type="text/javascript" src="{g->theme url="includes/js/lightbox.js"}"></script>

...same result...

any idea?

http://rubbishbusters.com

 
SiliconFiend
SiliconFiend's picture

Joined: 2006-12-27
Posts: 508
Posted: Tue, 2008-06-03 17:39

I think the problem is that Lightbox is expecting an image URL, but the "itemLink" is a link to the item's Gallery page. As a quick test, you could change the href to point to the thumbnail instead. Like this:

$map['infowindows'][0]="'<div style=\"width:200px\"><a href=\"'+itemLink+'\">'+title+'<\/a><br/>'
      +'<a rel=\"lightbox[gallery]\" href=\"'+thumbLink+'\"><img src=\"'+thumbLink+'\" width=\"'+thw+'\" height=\"'+thh+'\" alt=\"'+title+'\" style=\"max-width:200px;max-height:200px;\"/><\/a>'

Note that I've never used lightbox, so the syntax might not be right (and I might be wrong anyway...).

If that works, then you could generate an "imgLink" to point to the preferred image resize to use with lightbox. Test this, and if it works let me know and I'll get back to you with more details about how to make it work with the resize.

 
ledom

Joined: 2007-10-08
Posts: 77
Posted: Wed, 2008-06-04 09:36

Hello Guys!

Very happy to say the that little test with thumbnail works! Thanks a lot!

Here is the code I used:

a rel=\"lightbox\" onclick=\"myLightbox.start(this);return false;\" href=\"'+thumbLink+'\"><img src=\"'+thumbLink+'\"...

I add onclick=\"myLightbox.start(this);return false;\" after I read this thread: http://groups.google.fr/group/Google-Maps-API/tree/browse_frm/month/2007-02/8426909d7c5b47fe?rnum=181&_done=%2Fgroup%2FGoogle-Maps-API%2Fbrowse_frm%2Fmonth%2F2007-02%3F

Don't understand exactly what it does but it work...

So, now lightbox is ok for the thumbnail. Now, do you know how to show in lightbox all resized pictures in an album from the marker of the album?

http://rubbishbusters.com

 
SiliconFiend
SiliconFiend's picture

Joined: 2006-12-27
Posts: 508
Posted: Wed, 2008-06-04 13:39

I'm glad you got it working. Now I have to figure out how you can get the link to the preferred resized image. I'm looking into it...

 
SiliconFiend
SiliconFiend's picture

Joined: 2006-12-27
Posts: 508
Posted: Wed, 2008-06-04 15:08

Well, it's not as easy as I thought--I thought everything was concentrated in one location, but it will have to touch a bunch of files. I'll still try to get you something to make it work.

 
ledom

Joined: 2007-10-08
Posts: 77
Posted: Wed, 2008-06-04 16:29

Yes, I tried to search where itemLink and thumbLink come from... and I don't understand. These variables are used by createMarkers function but I don't know where this function is defined...

thanks
ledom

 
SiliconFiend
SiliconFiend's picture

Joined: 2006-12-27
Posts: 508
Posted: Thu, 2008-06-05 05:35

itemLink and thumbLink are in the Javascript CreateMarker function in MapHeader.tpl (around line 623). But I'll have to tweak the PHP files to provide the resized image link to the Smarty template (.tpl) file and then add a parameter to the CreateMarker function to accept that image link, and then modify the locations that call CreateMarker as well as provide a tweak for the infowindow template so that it only tries to use the image link for photos, not for albums (which don't have a preferred resize). Phew!

 
ledom

Joined: 2007-10-08
Posts: 77
Posted: Thu, 2008-06-05 14:28

ok, i understand now why it is not trivial... Do you think it is possible?

 
SiliconFiend
SiliconFiend's picture

Joined: 2006-12-27
Posts: 508
Posted: Thu, 2008-06-05 14:58

It's certainly possible. Don't worry, I'll get you a list of the changes you need to make. I need to find a bit of time, but it won't take too long. Several of the changes should (eventually) go into the main codebase so that it's easier for people to use the resized images on the map page.

 
ledom

Joined: 2007-10-08
Posts: 77
Posted: Mon, 2008-06-09 12:13

Ok, thank you SiliconFiend. The integration of the changes into the main codebase could be a good think for user, I think, may be with lightbox intégration if it is possible.

 
SiliconFiend
SiliconFiend's picture

Joined: 2006-12-27
Posts: 508
Posted: Mon, 2008-06-09 13:27

I don't think I'll put the full lightbox stuff in the map module. I'll just make it easier for users to do it. Sorry I haven't gotten back to you on this yet. I've been working long hours and I had a full weekend. Hopefully I'll be able to do it this week.

 
ledom

Joined: 2007-10-08
Posts: 77
Posted: Mon, 2008-06-09 14:11

Yes, you are right, lightbox is not essential. No problem, don't be sorry, I can wait :) I try to understand how it works, good for my brain :) Is itemLink created into /modules/core/classes/galleryTheme.class ?

 
SiliconFiend
SiliconFiend's picture

Joined: 2006-12-27
Posts: 508
Posted: Mon, 2008-06-09 14:51

itemLink is created in modules/map/classes/mapHelper.class, in the function getGPSItems() Then it gets passed into the MapHeader.tpl as the $point array, and is then provided to the CreateMarkers Javascript function.

 
ledom

Joined: 2007-10-08
Posts: 77
Posted: Thu, 2008-08-07 13:28

Hi,

I found a solution to my problem.

I remember that I want to use lightbox to open picture without closing the map...
So, I don't need lightbox to do that, I just modify default.inc into infowindows directory to open picture and link in a new window and not in the same window.

I just add TARGET=\"_blank\"

<?php
$map['Labels'][0]="none";
$map['extramap'] = "";
$map['infowindows'][0]="'<div style=\"width:200px\"><a href=\"'+itemLink+'\" TARGET=\"_blank\">'+title+'<\/a><br/>'
+'<a href=\"'+itemLink+'\" TARGET=\"_blank\"><img src=\"'+thumbLink+'\" width=\"'+thw+'\" height=\"'+thh+'\" alt=\"'+title+'\" style=\"max-width:200px;max-height:200px;\"/><\/a>'
+'<br/><font color=black><b>".$module->translate("Date:")."<\/b> '+created+'<\/font>'";
if ($map['showItemSummaries']) {
$map['infowindows'][0]=$map['infowindows'][0]."
+(summary!=\"\"?'<br/><br/><div style=\"width:200px\"><font color=black>'+summary+'<\/font><\/div>':'')";
}
if ($map['showItemDescriptions']) {
$map['infowindows'][0]=$map['infowindows'][0]."
+(description!=\"\"?'<br/><br/><div style=\"width:200px\"><font color=black>'+description+'<\/font><\/div>':'')";
}

if ($map['showZoomLinks']){
$map['infowindows'][0]=$map['infowindows'][0]."
+'<br/><br/><a href=\"#zoominlink\" onclick=\"javascript:map.setCenter(new GLatLng('+lat+','+lon+'), '+zoomlevel+'); return false;\">".$module->translate("Zoom In")."<\/a>'";
}
$map['infowindows'][0]=$map['infowindows'][0]."
+'<\/div>'";
?>

http://rubbishbusters.com

 
SiliconFiend
SiliconFiend's picture

Joined: 2006-12-27
Posts: 508
Posted: Thu, 2008-08-07 19:18

Sorry, guess I dropped the ball for you. I'm still planning on making those changes if you want to use lightbox, but I don't know when. Anyway, glad you got it working.

 
ledom

Joined: 2007-10-08
Posts: 77
Posted: Fri, 2008-08-08 08:35

No problem SiliconFiend :) Thanks for your help

http://rubbishbusters.com