bos_image_index AND lightbox?

ballmann · 2008-01-16 22:59:41

happy new year to all of you!

is anyone here you successfully merged the bos_image_index-plugin with rel=“lightbox”-possibilities?
i have some galleries which are in desperate need of a way to get the rel=“lightbox”-tag plus the link to the bigger into this code:

<div id="column_2">
2008<br />
<txp:category_list categories="2008-12,2008-11,2008-10,2008-09,2008-08,2008-07,2008-06,2008-05,2008-04,2008-03,2008-02,2008-01" active_class="active" type="image" section="diary" />
<br /><br />
2007<br />
<txp:category_list categories="2007-12" active_class="active" type="image" section="diary" />
</div>
<div id="column_3">
<txp:if_category>
<txp:bos_image_index link="0" capt="1" wrap_capt="h6" thumb="1" sortby="name" sortdir="desc" />
<txp:else />
<txp:bos_image_index cat="2008-01" link="0" capt="1" wrap_capt="h6" thumb="1" sortby="name" sortdir="desc" />
</txp:if_category>
</div>

i would be so thankful for any ideas!

(Edit: added bc. to your code. -Els)

Last edited by els (2008-01-16 23:46:29)

jm · 2008-01-16 23:41:07

You could use JavaScript. Externalize the following, or just include it in your head:

function addRel(parent, attValue) {
	if (!document.getElementById(parent)) return;
	var link = document.getElementById(parent).getElementsByTagName('a');
	for (var i = 0; i < link.length; i++) {
		if (link[i].firstChild.nodeType == 1) {
			link[i].setAttribute('rel', attValue);
		}
	};
};

You’ll need to load it, so use one of the plugin’s js loaders, or addLoadEvent:

function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
	addRel('column_3', 'lightbox');
});

BTW, please format your code next time.

Last edited by jm (2008-01-17 00:09:20)

ballmann · 2008-01-17 00:02:15

thanks jm!
i located both scripts in my js-folder and included them (like the lightbox-js) with “<script type=“text/javascript” src=”/js/diarylightbox1.js”></script>” and “<script type=“text/javascript” src=”/js/diarylightbox2.js”></script>” … right?

i also set the link-tag to link=“1”.
but nothing happens.

a pagereload starts with an url like this one “http://testen.ballmann.net/diary/?c=2008-01&p=98” and the same page appears.
no differences.

did i involve the scripts correctly?
i’m a good designer and good with txp and css but i’m so bad with js … sorry.

and thank you for your help!

ballmann · 2008-01-17 11:41:59

jm, i don’t know why but when i visited my site this morning and clicked the images the lightbox works … sort of:
the lightbox comes up (in this case a non-opaque grey fills the screen) but no big image appears.

and more mysterious: it doesn’t work all the time (with safari).
when i do a pagereload sometimes the lightbox kicks in … and sometimes the page justreloads with an url similar to this “http://testen.ballmann.net/diary/?c=2008-01&p=98” i posted yesterday.
and even worse: it didn’t work at all with firefox.

i searched the code (yours and mine) the last hour or so but didn’t find the reason.
any ideas?

this is the last version of my code (i formatted it :-):

<div id="content">
    <txp:output_form form="navigation" />
    <div id="column_2"> 2008<br />
      <txp:category_list categories="2008-01" active_class="active" type="image" section="diary" />
      <br />
      <br />
      2007<br />
      <txp:category_list categories="2007-12" active_class="active" type="image" section="diary" />
    </div>
    <div id="column_3">
      <txp:if_category>
        <txp:bos_image_index link="1" capt="1" wrap_capt="h6" thumb="1" sortby="name" sortdir="desc" />
        <txp:else />
        <txp:bos_image_index cat="2008-01" limit="1" link="1" capt="1" wrap_capt="h6" thumb="1" sortby="name" sortdir="desc" />
      </txp:if_category>
    </div>
  </div>

Last edited by ballmann (2008-01-17 11:44:22)

jm · 2008-01-18 22:36:21

Hi Matthias, try this out:

// mb is a prefix for your site JavaScript
var mb = {
	// parent = the id of the div your to-be-lightboxed links are in
	slimbox: function(parent) {
		// Check if the parent id is available ('column_3'). If not, exit.
		if (!document.getElementById(parent)) return;
		// link is all the a children of parent
		var link = document.getElementById(parent).getElementsByTagName('a');
		// loop through all those links
		for (var i = 0; i < link.length; i++) {
			// if the first child is an image, lightbox the link
			if (link[i].firstChild.nodeName == 'IMG') {
				link[i].onclick = function() {
					Lightbox.show(this.getAttribute('href'), this.getAttribute('title'));
					// Don't follow the href
					return false;
				};
			}
		};
	},

	// http://simonwillison.net/2004/May/26/addLoadEvent/
	load : function(func) {
		var oldonload = window.onload;
		if (typeof window.onload != 'function') {
			window.onload = func;
		} else {
			window.onload = function() {
				if (oldonload) {
					oldonload();
				}
				func();
			}
		}
	}
};

mb.load(function() {
	mb.slimbox('column_3');
});

Notes

Throw this into a single file, mb.js for example. Include the 3 js files, mootools, slimbox, and mb.
mb. is just a prefix for the js, so another script won’t override yours. You can change mb. to site. or anything else.
None of your links in #column_3 have href attributes. Until they do, you’ll likely get errors or a blank lightbox. I haven’t used bos_image_index, but your page from a couple days ago worked!

Last edited by jm (2008-01-18 22:37:44)

ballmann · 2008-01-19 10:43:32

hi jm!

first: i love the view and the landscape i saw on your website. montana seems to be beautiful!
second: sorry for the roof! what a mess!

third: thank you for your GREAT HELP!
i use the js (called it diarylightbox.js to get a better idea of what it does) and included it within the page.
and: the lightbox comes up!

but: without any images at all!
i don’t understand this thing … and searched for errors in my code until late in night.
but now – with a fresher view in the morning – i still can’t see where an error happens.
the hrefs are there now (i deactivated them because i thought a photodiary without a working lightbox is better) and if i mouseover one of those pictures i can see a link in the statusbar which seems to be right (well, it shows the right picture-id).

since you helped me so much with the script and haven’t use bos_image before it’s akward for me to bother you … but do you have any idea why those images don’t show up? thank you :-)

jm · 2008-01-20 01:59:59

No problem. The blank lightbox is due to the href of the images. Instead of linking to an image, the links go to http://testen.ballmann.net/diary/?c=2008-01&p=108 (or whatever the ID depending on the image). Ultimately, the problem is the plugin – there isn’t an option to link to the image itself. If you want to hack the plugin, you could modify lines 58-59 to this:

return $nm.$urlto.'<a href="'.hu.$img_dir.'/'.$id.$ext.'"><img src="'.$impath.
'" style="height:'.$h.'px;width:'.$w.'px" alt="'.$alt.'" /></a>'.$closeurl.$capt;}

It’ll auto-link every bos_image_display though.

Although it is slightly more work, using article images with an image uploader is more flexible.

Zanza · 2008-01-20 11:58:53

The plugin isn’t meant to support js, as I originally wrote. There is no link to the image itself, because it should work with bos_image_display and a category organization. Anyway, I’m just curious if the modification works. If it’s easy it should be included in a modified version of the plugin.

Thanks for testing.

Z-

ballmann · 2008-01-20 13:10:24

hi jm, hi zanza,

just for the records: i replaced this part of the code

return $nm.$urlto.'<img src="'.$impath.
'" style="height:'.$h.'px;width:'.$w.'px" alt="'.$alt.'" />'.$closeurl.$capt;}

with this modified code from jm

return $nm.$urlto.'<a href="'.hu.$img_dir.'/'.$id.$ext.'"><img src="'.$impath.
'" style="height:'.$h.'px;width:'.$w.'px" alt="'.$alt.'" /></a>'.$closeurl.$capt;}

but it seems that this doesn´t have any noticeable impact on the function of the lightbox:
the lightbox is still empty and the links of the pictures appear pretty much the same.

i did lots of pagereloads and two deactivate/activate-steps with the plugin to be sure
that txp uses the modified version. but no difference.

is there a way to figure out if txp uses this modifed version?

Zanza · 2008-01-20 15:57:17

If the modification didn’t impact on the links that is produced, than you modified the wrong part. JM’s advice is correct, but maybe what is wrong is the code line number. Make sure you didn’t modified the bos_image_display function, instead, as it appears…

The modification should be done to the bos_image_index function, far down from 58-59 lines.

The part of code to modify is this:

if ($link == 1) {$linktag =  '<a'.$here.' href="'.$url.strtolower($url_ext).'">';}

to this:

if ($link == 1) {$linktag =  '<a'.$here.' href="'.hu.$img_dir.'/'.$id.$ext.'">';}

The bos_image_display shouldn’t work anymore, at this point, but you don’t use it, right? Let me know…

Z-

ballmann · 2008-01-20 16:23:00

aah, the magic happens – it works :-)
thank you very much for your help!

ballmann · 2008-01-20 20:37:59

aehm, oh … one last question: any ideas if it is possible to get a caption under the big image in the lightbox? maybe the title of the image … this would be perfect. i tried to figure out a way to show the title with the title=“1”-option and put in a special-tag to hide it via css … and use this shown title in the lighbox … but no luck this way.

other, better ideas?

Textpattern CMS

Textpattern CMS support forum

#1 2008-01-16 22:59:41

bos_image_index AND lightbox?

#2 2008-01-16 23:41:07

Re: bos_image_index AND lightbox?

#3 2008-01-17 00:02:15

Re: bos_image_index AND lightbox?

#4 2008-01-17 11:41:59

Re: bos_image_index AND lightbox?

#5 2008-01-18 22:36:21

Re: bos_image_index AND lightbox?

Notes

#6 2008-01-19 10:43:32

Re: bos_image_index AND lightbox?

#7 2008-01-20 01:59:59

Re: bos_image_index AND lightbox?

#8 2008-01-20 11:58:53

Re: bos_image_index AND lightbox?

#9 2008-01-20 13:10:24

Re: bos_image_index AND lightbox?

#10 2008-01-20 15:57:17

Re: bos_image_index AND lightbox?

#11 2008-01-20 16:23:00

Re: bos_image_index AND lightbox?

#12 2008-01-20 20:37:59

Re: bos_image_index AND lightbox?

Board footer