[SOLVED] MaxiGallery:Slimbox. How to display infotext another place.

73 Posts

larsb Reply #1, 18 years, 2 months ago

I’ve been struggling with this for hours, soon about to pull my hair out.. huh

I’ve got a TV with a MaxiGallery call like so

[[MaxiGallery? &display=`embedded` &lang=`da` &embedtype=`slimbox` &max_thumb_size=`90x90` &thumb_use_dropshadow=`0`]]

I would like to display the title and description for each image somewhere else on the page. How do I do that? I have tried creating all kinds of tpl’s with placeholders for the title and description, but can’t get it working?

Thanks in advance

larsb

Signature on it's way

4,213 Posts

doze Reply #2, 18 years, 2 months ago

Do you mean that you want to open the picture in a slimbox, but display the picture description and title in a container in your site?

For that you need to look at the JS code of slimbox and modify the parts where it sets the description text to make it put to your own container.

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

☆ A M B ☆
24,524 Posts

sottwell Reply #3, 18 years, 2 months ago

Depending on exactly how the containers for the description and title are defined in HTML, you might be able to style them with absolute positioning, and put them wherever you want. I’m not familiar with it, so I can’t give any more specific instructions.

Studying MODX in the desert - http://sottwell.com
Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
Join the Slack Community - http://modx.org

73 Posts

larsb Reply #4, 18 years, 2 months ago

Hi Doze and Sottwell, thanks for the answers.

Doze is describing exactly what I am trying to do.

The problem is that I tried changing the JS for Slimbox from this:

[+maxigallery.embedtype:is=`slimbox`:then=` 

	<a href="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" rel="lightbox[maxigallery]" title="[+maxigallery.picture.title:htmlent+] - [+maxigallery.picture.descr:htmlent+]">

`+]

(..)

[+maxigallery.embedtype:is=``:then=`
	
	<a href="[+maxigallery.picture_link_url+]">

`+]
	
	 	<img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]" class="thumbnail" alt="[+maxigallery.picture.title:htmlent+] [+maxigallery.strings.click_to_zoom+]" />
	</a>

</li>
`+]

to something like this:

[+maxigallery.embedtype:is=`slimbox`:then=` 

	<a href="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" rel="lightbox[maxigallery]" title="[+maxigallery.picture.title:htmlent+] - [+maxigallery.picture.descr:htmlent+]">

`+]

(..)

[+maxigallery.embedtype:is=``:then=`
	
	<a href="[+maxigallery.picture_link_url+]">

`+]
	
	 	<img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]" class="thumbnail" alt="[+maxigallery.picture.title:htmlent+] [+maxigallery.strings.click_to_zoom+]" />
	</a>

</li>
<div id="infoText">
<p>[+maxigallery.picture.title:htmlent+]</p>
<p>[+maxigallery.picture.descr:htmlent+]</p>
</div>
`+]

The problem then is that I get an output from each image all at once, which of course isn’t what I want.

I just realized that maybe a solution could be a combination of both of your answers. grin

Maybe something like

[+maxigallery.embedtype:is=`slimbox`:then=` 

	<a href="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" rel="lightbox[maxigallery]" title="[+maxigallery.picture.title:htmlent+] - [+maxigallery.picture.descr:htmlent+]">

`+]

(..)

[+maxigallery.embedtype:is=``:then=`
	
	<a href="[+maxigallery.picture_link_url+]">

`+]
	
	 	<img src="[(base_url)][+maxigallery.path_to_gal+]tn_[+maxigallery.picture.filename+]" class="thumbnail" alt="[+maxigallery.picture.title:htmlent+] [+maxigallery.strings.click_to_zoom+]" />
<span class="infoText">[+maxigallery.picture.title:htmlent+]<br />
[+maxigallery.picture.descr:htmlent+]</span>
	</a>

</li>
`+]

and then the css:

a span.infoText {
         display:none;

         a span.infoText:active {
         display: block

}

would work..

I’m gonna try it out later tonight

Thanks, larsb

Signature on it's way

4,213 Posts

doze Reply #5, 18 years, 2 months ago

No, I mean that you don’t touch maxigallery templates at all. Modify the slimbox js code instead.

Eg. open up /assets/snippets/maxigallery/slimbox/js/slimbox.js and find the place where it sets the description to some html element and replace it with your element (in that file, it’s the "caption" variable).

You need to know js coding to achieve this, or you can try to google if someone has asked for the same. It’s not MaxiGallery related.

"He can have a lollipop any time he wants to. That's what it means to be a programmer."

73 Posts

larsb Reply #6, 18 years, 2 months ago

Hi Doze, thank you for your answer. I now understand what you mean.

I had a look inside the Js and tried messing around with it, but it didn’t really produce anything useful.

I will try and work more on this at another time, but for now I’ll put the thread as solved.

larsb

Signature on it's way