143 Posts
pretobrazza
10 years ago
Topic
Hi,

EDIT March 1st 2014:HERE is the solution (workabout) without external modal plugins

It seems silly but could someone explain what I must do to open a link into a modal window to show the content to a visitor?
Question n° 2 is if this will work in a responsive template too (for smartphone and tablets)

I'd be very grateful for your answer as I can find no clear explanation for this anywhere.

Bernard
Get a VIP membership
10 years ago
1
Level 1
I use YooTheme templates so I invoke modals with their widegetkit plugin - http://www.yootheme.com/widgetkit/examples/lightbox

Would need to know a bit more about how/where you want to invoke the modal with the content, I.e.
143 Posts
pretobrazza
10 years ago
0
Level 2
Thank you very much Recedo,

As I'm using the Warp-Framework 6 with the 'Master template' (free), I just installed the widget kit (free) and activated things where need be .. but I need your help to implement it:

Let's go for this scenario:
1) I open 'List and search Type'
2) In 'list' (or 'item'), I choose option #2 (Link+Markup (Class))
3) There for the field 'Article title' I select: VIEW
4) A '+' sign appears
5) ... what do I fill in there?

Kind regards,
Bernard

175 Posts
webcastor
10 years ago
1
Level 1
Ideally, there would be a place to put in additional <a> attributes, but there is none. So in this case you might create a position override and put:
<a data-lightbox="on" href="/<?php echo $cck->getLink('art_title') ?>"><?php echo $cck->getValue('art_title') ?></a>
You might use the topbody, bottombody or some other unused position, so that you don't need to explicitly display all the other fields in the position.
143 Posts
pretobrazza
10 years ago
0
Level 2
Hi webcastor,

Following your reply, I tried a few weird and (not so wonderful) things. Thus, I had no no success. ;)

It'd be wonderful to get a clear step by step guide. Not only for me but for anyone who might be confronted with the same problem, searching on this forum for a solution which is easy to understand and apply.

Thank you,
Bernard
175 Posts
webcastor
10 years ago
1
Level 1
In case of the content display (Intro layout) you would use:
1) Open 'Form&Content type'
2) In Intro, choose option #2 (Link+Markup (Class))
3) There for the field 'Article title' select Content>View
4) Place the 'Article title' field in #TOPBODY position
5) In your seblod template folder /templates/seb_one/positions create a folder *content_alias*/intro (where you substitute the *content_alias* with the real content alias)
6) in this folder, create a topbody.php file with the content
<?php
defined ( '_JEXEC' ) or die;
?>
<a data-lightbox="on" href="/<?php echo $cck->getLink('art_title') ?>"><?php echo $cck->getValue('art_title') ?></a>
Essentially, that should be it. If you select the Disable List Template for List layout, your content Intro layout will be used for displaying search results/lists.

P.S. Remove the forward slash / behind href=
Seblod forum editor keeps putting it in on it's own, even tho it does not go there...
143 Posts
pretobrazza
10 years ago
0
Level 2
Ok Webcastor,

I did implement everything you wrote including what I should do via filezilla (/templates/seb_one/positions/*content_alias*/intro (where i substituted the *content_alias* with the real content alias)) as well as 'Remove the forward slash / behind href=' (In the new .php file). I also 'Disabled List Template for List layout' via search & List type > template

Now I can only see the title but I can not click on it (not linked(blue)).

Let me explain a little more about the existing setup of the content in the webpage ..

The top structure of the content in my (seblod) article is as follows:
1) I have a seblod content type (A) called 'locations'
2) Under there I have a 'seblod comment system' (Daniel Young) which is being fed per location by a content type called 'Activities' (B) (via 2 Joomla modules (module1: content with title and other fields + module2: form for logged in users)).
3) In (B) I have a title that when people click on it, they should get a lightbox with the detail of the activity with all field one can only dream of ;)

Via filezilla I just changed the path /templates/seb_one/positions/*content_alias*/intro to /templates/seb_one/positions/*content_alias*/item (ref: list& search type).
I also re-enabled the seb_one (blog) template in list& search type and indeed I'm getting a lightbox!

As I'm writing, the lighbox doesn't behave the way I'd hope: It shows the whole webpage inclusive the logo and topmenu and it doesn't close when I click next to the lightbox. In other words, it behaves like an Iframe within a lightbox.

I've started looking as to how to solve that behavior but as yet no solution. Mind you, at least I see the lightbox appearing out of .. :)

NOTE1: I'm posting this reply temporarily before my cookie expires but I will re-edit my findings for future use of others not finding their way to create a lightbox effect with seblod content from different fields (text, link, pics, maps, etc).
NOTE2: Even though I marked this topic as solved (by mistake), it isn't solved yet!!

Kind regards and a BIG thank you, webcastor, for pointing my nose in the right direction!!
Bernard

ps.: J+S 3.2.1 - warp + warpwidget
175 Posts
webcastor
10 years ago
0
Level 1
True. I have completely overlooked the fact the link that is generated by seblod is toward a content page (single page) with all site formatting.
Widgetkit help mentions inline elements:
Use inline elements as source for content. For example:
<a data-lightbox="on" href="#element-id">Lightbox</a>
In that case you can display data as hidden on your content page, with an id=element-id and then display it. If you are going to reuse the same position where you display the link, put the fields you want in that same position.
<div id="element-id" style="display: none;">... your content fields displayed with $cck->renderField() ...</div>
You might try other ways of hiding content if display: none does not work when you open it in lightbox.
Also, widgetkit brief help mentions common parameters which should be used instead of "on" in data-lightbox="on".
  • titlePosition - How should the titlte show up? (float, outside, inside or over)
  • transitionIn - Set a opening transition. (fade, elastic, or none)
  • transitionOut - Set a closing transition (fade, elastic, or none)
  • overlayShow - Set to true or false
  • width - Set a width in pixel
  • height - Set a height in pixel
  • padding - Set a padding in pixel
143 Posts
pretobrazza
10 years ago
0
Level 1
Hi Redeco and Webcastor,

EDIT March 1st 2014: HERE is the solution (workabout) without external modal plugins

The final solution is here in this topic It works with NoNumber Yoo-widget din't satisfy me and more so, the workaround was too restrictive.

Thank you for your effort as you really helped me to understand some very very basic things!

Kind regards,
Bernard

Get a VIP membership