eZ Community » Forums » General » ezlightbox does not work
expandshrink

ezlightbox does not work

ezlightbox does not work

Wednesday 15 July 2009 4:56:32 pm - 21 replies

Hi All,

need once again your help (pretty sure won't be last time though): installed ezlightbox with all "corrections" as described in contributions but it doesn't work.

I see e.g. "lightbox thumb" when uploading a new image and it generates the following code:

<a href="/var/ezwebin_site/storage/images/media/images/34-maunganui-04/1093-1-eng-US/34-Maunganui-04.jpg" rel="lightbox" title="34 Maunganui 04">

<img src="/var/ezwebin_site/storage/images/media/images/34-maunganui-04/1093-1-eng-US/34-Maunganui-04_medium.jpg" style="border: 0px none ;" alt="" title="" height="150" width="200"></a>

But there is no effect when clicking on the thumb...the image opens as "usual". I also tried:

{attribute_view_gui attribute=$node.data_map.image image_class='small' lightbox_class=original}

But also with no effect.
Any ideas?
many thanks
Anita

Wednesday 15 July 2009 5:00:54 pm

It has been a while since I tried to use this solution but one thing really annoys me ... It's just not maintained well enough to use daily without headache.

We really need this solution to go into projects.ez.no svn and so development can continue until it is eZ to use this solution right out of the box without having to hack at it every time because it's not been properly maintained.

Any interested parties :?

Cheers,
Heath

Modified on Wednesday 15 July 2009 5:01:36 pm by // Heath

Wednesday 15 July 2009 5:37:31 pm

I tried a template override and created a .tpl with following content:

{def $lighthref = $node.url_alias|ezurl}
{set $lighthref = concat($lighthref, " rel=\"lightbox\""blunk.gif Emoticon}
{set $lighthref = concat($lighthref, " title=\"Roll over and click right side of image to move forward.\""blunk.gif Emoticon}

<div class="content-view-galleryline">
<div class="class-image">

<div class="attribute-image"{if is_set($#image_style)} style="{$#image_style}"{/if}>
<p>{attribute_view_gui attribute=$node.data_map.image image_class=gallerythumbnail href=$lighthref}</p>
</div>

<div class="attribute-name"{if is_set($#image_style)} style="{$#image_style|explode(';').0}"{/if}>
<p>{$node.name|wash}</p>
</div>

</div>
</div>

Now when clicking on the picture I receive the typical expected background and a progress bar, but the image does never load suspicious.gif Emoticon

Not sure about the approach, but I'd like to use this extension. I also tried to go with lightbox2, installed everything with - at the end - the same result: the picture never loads.

Any ideas?
Thanks for your help
Anita

Wednesday 15 July 2009 6:58:46 pm

Hi Anita,

{def $lighthref = $node.url_alias|ezurl}

...

{attribute_view_gui attribute=$node.data_map.image image_class=gallerythumbnail href=$lighthref}

href - attribute should be the url to your image,
ezurl - should be changed with ezroot

{def $lighthref = $node.data_map.image.content.LIGHTBOXIMGCLASS.url|ezroot}

I think the image is not linked correctly. ezroot is needed because the files are stored in var/...

Wednesday 15 July 2009 7:33:14 pm

Hi Max,

thanks a lot - that's doing the trick happy.gif Emoticon

Do you know whether rel="lightbox[clixxGuide]" is also working?
or does it work differently in ezlightbox?

Many thanks
Anita

Thursday 16 July 2009 2:49:10 am

Hi Anita,

I didn't found out which version of the lightbox.js is used here. Maybe it is an older one and do not support this feature. Try it out.

In my opinion it's not necessary to install this extension for lightbox features. There are already thousands of clones of this with more features and lightweight size.

Just take the Slimbox for Mootools or jQuery ( http://www.digitalia.be/software/slimbox ), the FancyBox ( http://fancy.klade.lv/ ) or the MediaBoxAdvanced ( http://iaian7.com/webcode/mediaboxAdvanced ). The both last of them also supports external content, flash, youtube and so on. Create an override for the /content/datatype/view/ezimage.tpl and do some changes to support attribute "rel" as parameter for it. Done.
Now you can decide which of the images should be shown in a lightbox. Something like this.

{attribute_view_gui attribute=$node.data_map.image image_class=medium rel=lightbox[gal] href=$imagepath}

Alternatively you can create the href url within the ezimage.tpl if you rel is starting with lightbox and set only the image_class for it!

{attribute_view_gui attribute=$node.data_map.image image_class=medium rel=lightbox[gal] lightbox_class=original}

Thats's it. Now you can use your preferred JS framework and the compatible ligthbox clone.

If you have some troubles to set up your ezimage.tpl just contact me - I will give you a copy of mine.

Modified on Thursday 16 July 2009 2:52:42 am by Max Keil

Thursday 16 July 2009 10:06:51 am

Hi Max,

many thanks. I installed lightbox2 which worked now too, but now decided to go with mediabox advanced. The installation was really easy going - as described by you and on the webpage of mediabox advanced.

If you - by any chance - have got good advice for bringing up "print view" templates and "pdf generation" with logo, google map, columns, graphics and text I'd be more than happy happy.gif Emoticon

cheers
Anita

Thursday 16 July 2009 11:39:36 pm

Hi,

do you mean the /layout/set/print view with "print view"? Simply override the templates matching the layout print.

I've heard of Paradox PDF ( http://projects.ez.no/paradoxpdf ) should be a great extension to create pdf views.

Wednesday 22 July 2009 4:19:48 pm

Anita,

I am new to ezPublsih,

Can you please tell in detail how to create LightBox.....

Thursday 23 July 2009 6:08:32 pm

Hi Srikanth,

I switched from lightbox2 to mediabox advanced (see Max' reply) further below in this threat.
Just follow the installation hints on mediabox website and Max description in this threat.

It works - no issues.
Hope this helps
Anita

Thursday 23 July 2009 6:13:32 pm

Hi Max,
thanks for your help. Yes, I meant the print view (/layout/set/print view).
I created a override template for print view and separated CSS style sheet.
Everythings works beside little details between the layount of the print-template is producing a slightly different view than the actual print preview. However, I need to "play" more with this topic and then will switcht to the PDF generation.

The main point is, that I would like to reuse the very same templates whenever possible for web-display and print-view-display because I've quit a bit of code in it and I do not want
to duplicate code...

Sometimes I think it would be nice to meet real heavy ezDevelopers just to learn best practice blunk.gif Emoticon

cheers
Anita

Thursday 23 July 2009 9:26:13 pm

Hi Anita,

you can use your web-view templates for the print-view.

Simply override your pagelayout.tpl for the layout print:

[full_nodes_index]
Source=pagelayout.tpl
MatchFile=print/pagelayout.tpl
Subdir=templates
Match[node]=2
Match[layout]=print

In this pagelayout you can define other CSS-Styles which are also used by your templates but for the print view.

OR

you can define a link-tag for this issue, without to override the pagelayout

<link rel="stylesheet" type="text/css" href="/extension/all2e/design/all2e_design/stylesheets/print.css" media="print" />

This css will be automaticly "redesign" your page if you click on the print button. (in the normal web-view)
An example is used on our webpage:
http://www.all2e.com/Ressourcen/A...nd-setup-on-ez-publish-based-systems

Friday 24 July 2009 5:09:39 pm

I have downloaded the the lightbox "jquery-lightbox-0.4.zip".unzipped and copyed "jquery.js" and "lightbox.js to JavaScript folder mypath is [design\plain_site\javascripts\]" I copyed "lightbox.css" to CSS folder[design\plain_site\stylesheets] and images like loading.gif to images folder [design\plain_site\images]

Following is the code which have written

<link rel="stylesheet" media="screen" type="text/css" href={"stylesheets/lightbox.css"|ezdesign} />

<script SRC={"javascripts/jquery.js"|ezdesign} type="text/javascript" language="JavaScript" charset="UTF-8"></script>
<script SRC={"javascripts/lightbox.js"|ezdesign} type="text/javascript" language="JavaScript" charset="UTF-8"></script>

<a href="var/plain_site/storage/images/media/images/travel-card-thumbnail-22\531-1-eng-US/Travel-Card-Thumbnail-2.jpg" rel="lightbox" title="34 Maunganui 04">
<img src={"Travel-Card-Thumbnail-2.jpg" |ezimage} border="0"/>
</a>

After this when i click on thunbnail image Travel-Card-Thumbnail-2.jpg i get the popup with lightboz but non of the images load including "loading.gif". I am also getting javascript error.[Invalid argument]

I get this Javascript erro as sson i load the photo gallery page

Can any one help me how to proceed further...where i am going wrong

Modified on Friday 24 July 2009 5:14:43 pm by srikanth mn

Monday 27 July 2009 9:32:29 pm

Hi,
your lightbox images are specified in lightbox.js?

you should change the path to the images like this:

...
imageLoading : 'design/plain_site/images/loading.gif'
...

always start from the ez-root folder!

Tuesday 28 July 2009 10:57:53 am

I placed the following code in Lightbox.js initially

fileLoadingImage : 'design/plain_site/images/loading.gif'
, fileBottomNavCloseImage : 'design/plain_site/images/closelabel.gif'

It was still giving an error and following was the "loading.gif" path

"http://localhost/example2/index.p.../plain_site/images/loading.gif"

Later I changed the code in Lightbox.js to

fileLoadingImage : '../../../../design/plain_site/images/loading.gif'
fileBottomNavCloseImage : '../../../../design/plain_site/images/closelabel.gif'

Still i am getting an Java script error and following was the "loading.gif" path displayed when selected the property

"http://localhost/example2/index.p.../plain_site/images/loading.gif"

Please do let me know where i am going wrong

Wednesday 29 July 2009 12:04:54 am

Hi,

try to change
fileLoadingImage : '/design/plain_site/images/loading.gif',
fileBottomNavCloseImage : /'design/plain_site/images/closelabel.gif'

look at the leading slash in front of the path. You should not use "../../" in your js-files - because the relative path will always be changed with your tree.

Wednesday 29 July 2009 2:52:52 pm

no, the image didn't load again....the path is "http://localhost/design/plain_site/images/loading.gif"

Thursday 30 July 2009 12:46:50 am

Can you directly access the images with your browser if you paste the path into it?

Maybe some of your rewrite rules not working correctly - can you check it out?
You should have something like this in your .htaccess or vhost conf with leading slash.

Rewriterule ^design/[^/]+/(stylesheets|images|javascript|flash)/.* - [L]

Thursday 30 July 2009 2:57:17 pm

Thanks it is working now....

Thursday 30 July 2009 7:20:28 pm

Great!!!

Here are some other htaccess rules that we use for eZ Publish:

RewriteRule ^(.*)favicon\.ico - [L]
RewriteRule ^robots\.txt - [L]
RewriteRule ^sitemap\.xml - [L]
RewriteRule ^var/cache/debug.html.* - [L]
RewriteRule ^var/[^/]+/cache/public/.* - [L]
Rewriterule ^var/storage/.* - [L]
Rewriterule ^var/export/* - [L]
Rewriterule ^var/[^/]+/storage/.* - [L]
RewriteRule ^/var/[^/]+/cache/(texttoimage|public)/.* - [L]
Rewriterule ^design/[^/]+/(stylesheets|images|javascript|flash)/.* - [L]
RewriteRule !\.(gif|jpe?g|png|css|js|html?)|var(.+)storage.pdf(.+)\.pdf$ index.php
Rewriterule ^share/icons/.* - [L]
Rewriterule ^extension/[^/]+/design/[^/]+/(flashs|stylesheets|images|javascripts|javascript|flash)/.* - [L]
Rewriterule ^packages/styles/.+/(stylesheets|images|javascript)/[^/]+/.* - [L]
RewriteRule .* index.php [L]

Wednesday 05 August 2009 4:58:03 pm

Please Max could You mail me Your ezimage.tpl for overriding the ezlightbox?

ciao
Bruno

expandshrink

You must be logged in to post messages in this topic!

36 542 Users on board!

Forums menu

Proudly Developed with from