smd_gallery: super-flexible gallery generator

Bloke · 2009-02-26 23:06:33

progre55 wrote:

I need the background of the website to change in concert with the images that are being displayed in the slideshow ….

Without knowing which slideshow you are choosing it’s tough to know whether it’s possible. For an onclick solution, how about this:

<txp:smd_gallery category="some-images" class="gallchange" wraptag="div">
   <a href="{url}" rel="lightbox-{category}" onclick="showbg(this)"><txp:thumbnail id="{id}" /></a>
</txp:smd_gallery>

<script type="text/javascript">
function showbg(obj) {
   jQuery("body").css("background-image", "url("+obj.href+")");
}
</script>

That changes the background image of the body tag to the clicked image when you choose a thumbnail (it’s tiled, but that can be turned off via CSS). It also shows the lightbox effect.

Playing around with that kind of idea and jQuery might give you a bit of inspiration (maybe use onchange() so the function is called when the image changes? I’m not sure if it triggers when a slideshow makes programmatic alterations).

Alternatively, if you’re using aro_slideshow v2, it supports callbacks so you could tell it to call the showbg() function every time the image changes.

By the way, let me know if you need more input regarding the calendar plug in

Not yet, think I know what I’m doing. It’s on the list and I’m experimenting but it’s not a quick fix, sorry.

Last edited by Bloke (2009-02-26 23:07:27)

mrtunes · 2009-02-27 01:59:17

0.5 is getting rejected by my txp 4.0.8 installation. badly formed code is the error, and then gallery 0.46 has installed ok.

progre55 · 2009-02-27 13:34:39

Bloke:

Sorry for not including that important fact, I am using Aeron’s Slideshow

If you can elaborate a little on this one (“Alternatively, if you’re using aro_slideshow v2, it supports callbacks so you could tell it to call the showbg() function every time the image changes.”) since it is exactly what i am looking for. I need the background to change uautomatically each time the image changes.

I am using the following code:

<txp:smd_gallery category="slideshowBloke" form="slideshowBloke" combo="imagecap::'{imagedef}': { 'caption': '{title}' }" collate="1" paramdelim="::" />

<div id="show" class="slideshow">
<img src="{imagepath#1}{imagedef#1}" alt="{alt#1}" />
</div>

<script type="text/javascript">
  var data = {{imagecap}};
  var myShow = new Slideshow('show', data, {captions: true, controller: true, height: 533, hu: '{imagepath#1}', thumbnails: true, width: 800 });
</script>

Definitely understand the other issue and it taking some time. Just let me know where I can assist.

progre55

Last edited by progre55 (2009-02-27 13:54:10)

mark.adams82 · 2009-02-27 14:49:08

Is it possible to add a class (eg class=“active”) to the first item in the list?

Example: I’m using a jquery gallery and want the first thumbnail to be selected.
Obviously adding the class to the gallry form adds the class to all of the list items – this causes browsers to select different thumbnails as the selected one depending on load speed of the browser I think – no what im after!
Leaving the class out of the gallery form means none are selected – as above!

I was hoping to find a ‘firstchild’ attribute or the like, but so far no luck!

If anyone has a pointer, I would be most grateful.

jakob · 2009-02-27 15:04:14

Mark, you can achieve it with another of Bloke’s plugins, smd_if. I have the following to achieve this.

      <ul class="gallery"><txp:smd_gallery id="?article_image">
        <li<txp:smd_if field="{counter}" operator="is" value="1"> class="active"</txp:smd_if>><img src="{url}" width="{width}" height="{height}" alt="{alt}" title="{title}" /></li></txp:smd_gallery>
      </ul>

Alternatively you can dynamically add it using js/jquery when you load your gallery, e.g. as in this example for the jquery galleria gallery:

$("ul.gallery li:first").addClass('active');

mark.adams82 · 2009-02-27 15:13:35

Thankyou for your solution, I have no doubt it would work just fine.

I have in fact got it covered with a different solution which I will post in case it helps someone, though I appreciate your solution seems more simple.

In jquery.galleria.js

after

return this.each(function(){

I added

var firstCheck = true(){

Then ran through the variables currently assigned by default.

Adding

if(firstCheck) { _container.siblings(‘.active’).removeClass(‘active’); _container.addClass(‘active’); firstCheck=false; }

to the end of the list assigns the desired class to the first list item only.

Thankyou for your help nonetheless.

Last edited by mark.adams82 (2009-02-27 15:14:31)

Bloke · 2009-03-01 16:59:43

New version released. v0.51 | gzipped adds a little conditional magic so that maniqui’s tip can be condensed and done natively, without the need for smd_if. It’s not a replacement for smd_if, as it only allows conditional logic that compares stuff to {counter} but I figured that since it was such a recurring theme in the thread, it made sense to include it.

In essence it allows you to create any number of forms and pass the replacement variables to those forms when you hit a particular image (e.g. the 4th and 10th images in the gallery). You can choose to render the form contents above or below the image(s) in question, i.e. prepend or append stuff to the usual form/container at any point in the gallery creation. You can use this for special effects, to annotate particular images, to highlight stuff, to insert adverts mid-gallery, for CSS or other rendering uses, or get completely freaky and pass every image (or some subset thereof) through two or more forms so you can do some bizarre interleaving galleries. You can also use it to simplify a complicated container by farming out different jobs to different forms. The most wacky real-world example you can come up with wins a gold star.

Although it may be considered a contrived example — because it requires three extra forms to be created, which is quite a bit of hassle — to demonstrate the new countform attribute in extremis, you may elect to render maniqui’s 3-pictures-to-a-row gallery natively like this:

<txp:smd_gallery category="animals" countpos="below"
     countform="1:gal_a:smd_above,
               {totalimages}:gal_c,
               smd_every:3:!{totalimages}:gal_b">
   <a href="{url}">
      <txp:thumbnail id="{id}" />
   </a>
</txp:smd_gallery>

Create your three forms like this:

gal_a: <div class="photo-row"> [ for use before 1st image]
gal_b: </div><div class="photo-row"> [ for use after every 3rd image, except the last]
gal_c: </div> [ for use after the last image]

and that will wrap those divs around every 3rd image. See example 10 and the new segment of the help on Count forms for an explanation of the syntax, including how to do stuff when you are not at a particular image in the gallery.

Have fun.

P.S. progre55

For some reason I thought the core slideshow2 script had user callbacks in it. Looks like just the aro_slideshow plugin does, which is a shame. Unless you can make slideshow2 work with the old plugin?

Last edited by Bloke (2009-03-01 17:03:47)

progre55 · 2009-03-01 17:13:58

Bloke;

For this project, I could use the old aro_slideshow if you could give me a little guidance. I would like to stay away from flash if at all possbile to accomplish this effect.

I should add, that I may use slideshow2 for other sections, but the effect with the backgroundcolor changinging will be just for six images as a sorta introduction to the site and so I would be fine with the first aro_slideshow for this …

By the way, still working on the datepicker, but I believe I have a solution that works nicely with the publish/expirey dates so that I will use this as a temp solution for now until the custom field functionality is set. Once I get the final niggles ironed out I will post the solution.

Thanks.

progre55

Last edited by progre55 (2009-03-01 17:19:21)

Bloke · 2009-03-01 17:32:41

progre55 wrote:

I could use the old aro_slideshow if you could give me a little guidance.

I can try but I’ve never used it myself. On the first post it mentions a callback parameter which you might be able to use to read stuff from the DOM like I did in the example I posted before. But I can’t tell from the docs whether this callback is executed every time an image changes. You could test it out like this:

<txp:aro_slideshow some="options" go="here" callback="alert('hello world');" />

But open the page in a completely new browser window because you might have to kill it if it goes mad.

If that works then you can gauge how often the alert box pops up. It’ll either do it once — in which case it’s probably no good to you — or it’ll pop up every time an image changes. In that case you can remove the alert command and try putting in some code like I did above, so that every image will read the “href” of the currently showing image link, and use jQuery to set the background-image CSS property on your chosen target element. Not sure how to do it in practice, it’ll depend how good the callback mechanism is.

Last edited by Bloke (2009-03-01 17:33:58)

progre55 · 2009-03-03 21:49:01

Bloke:

I was unsuccesful in using the Aro Slideshow but, I have found a jquery slideshow that does allow callbacks. I have tested it and I have it operational and transmitting the callback alert – and nothing exploded –

function onAfter() {
    $('#output').html("alert('hello world');");
}

I should have been clearer the last time, I mispoke, what I am looking to do is change is the background color of the web page so each time the slide changes the background color changes in coordination with the slide.

I continue to tinker, but your last sentence is a little puzzling for me. Any additional detail would be appreciated.

Once I get that work, I think it will be straight foward to integrate it into the plug in (at least that is what I am hoping.

progre55

Last edited by progre55 (2009-03-03 22:16:43)

Bloke · 2009-03-04 09:05:53

progre55 wrote:

what I am looking to do is change is the background color of the web page so each time the slide changes the background color changes in coordination with the slide.

Glad your callbacks are working. That’s a start. But to change the bg color is actually far more tricky because you need to have somewhere to read the colour info.

To elaborate a little on what I said above, the way the callback would work is (roughly) this:

when the callback fires, you know an image has changed in the slideshow
get hold of the reference you have been given in your callback function, e.g if you told the callback to call onAfter(this) then you would have a reference to ‘this’ image that is about to be displayed
read some property of the HTML object you have been given — in my first example it was the href, but that’s no good to you if you need to get some colour string like #123456. I’m not sure there are any image attributes you could use for this purpose. Perhaps try wrapping your image in a span, or putting an empty span tag inside your image (<span style="background-color: #123456"></span>?) But if you go to this amuont of trouble and you end up hard-coding the colours in the form to generate the gallery you might as well just hard-code the colours instead of trying to be clever. Depends how many images you are talking about
once you have that background colour string, apply it to the body or some other container div (probably via jQuery)

Maybe something like this (untested) :

function onAfter(obj) {
   var object = jQuery(obj); // Convert the DOM object (aka 'this') to a jQuery object
   var colour = jQuery(object+' span').css('background-color'); // Read the span's colour
   jQuery('#output').css('background-color', colour); // Apply it to the output element
}

? Not sure if that’d work. Might be a lot of hassle and it’ll depend if you can get the colour info to be placed on the page along with each image.

jpdupont · 2009-03-04 11:09:35

Hello Stef,
is it possible with your plugin to generate a xml file, with the list of the images ? I use the monoslideshow flash plugin who need a xml file as param of the swf file. The xml need to be writed in a directory before displaying the slideshow.

Example :

<?xml version="1.0" encoding="utf-8"?>
<slideshow>
	<preferences
		showLoadingIcon = "false"
		showAlbumsButton = "false"
		showThumbnailsButton = "false"
		showImageInfo = "never"
		kenBurnsMode = "random"
		controlAutoHide = "true"
		markFile = ""
	/>
	<album title="Diaporama" description="Diaporama" imagePath="http://www......./images">
		<img src="19.jpg" title="sdfsd" description="sdfsdf" />
		<img src="20.jpg" title="sfsdf" description="sdfsdf" />
		<img src="22.jpg" title="sdfsdf" description="sdfsdf" />
		<img src="21.jpg" title="sdfsdf" description="sdfsd" />
	</album>
</slideshow>

Textpattern CMS

Textpattern CMS support forum

#385 2009-02-26 23:06:33

Re: smd_gallery: super-flexible gallery generator

#386 2009-02-27 01:59:17

Re: smd_gallery: super-flexible gallery generator

#387 2009-02-27 13:34:39

Re: smd_gallery: super-flexible gallery generator

#388 2009-02-27 14:49:08

Re: smd_gallery: super-flexible gallery generator

#389 2009-02-27 15:04:14

Re: smd_gallery: super-flexible gallery generator

#390 2009-02-27 15:13:35

Re: smd_gallery: super-flexible gallery generator

#391 2009-03-01 16:59:43

Re: smd_gallery: super-flexible gallery generator

#392 2009-03-01 17:13:58

Re: smd_gallery: super-flexible gallery generator

#393 2009-03-01 17:32:41

Re: smd_gallery: super-flexible gallery generator

#394 2009-03-03 21:49:01

Re: smd_gallery: super-flexible gallery generator

#395 2009-03-04 09:05:53

Re: smd_gallery: super-flexible gallery generator

#396 2009-03-04 11:09:35

Re: smd_gallery: super-flexible gallery generator

Board footer