Problems, need help? Have a tip or advice? Post it here.
8 posts Page 1 of 1
Is it possible to make rotating images using Couch?

Clarification:
I've just started laying out this site: http://www.dawn-creative.com/cfr/ (so excuse the roughness) and my vision is that the client will be able to upload images via couch and these images would rotate in the big black area. Note, I haven't installed couch on this site yet; I'm just wondering if something like this is even possible so I can explore other options if it is not.
I am not sure if I understood you correctly, nevertheless you could use the jQuery cycle plugin (http://jquery.malsup.com/cycle/). You would definitely be able to integrate this with couch.
Hi Dawn,

As cheesypoof rightly pointed out - you can use any JQuery/Mootools script for this.

Almost all the slideshow scripts simply expect a list of images (with a particular CSS class or container ID) and the JavaScript code does the rest of the magic.

For example, this could be a sample markup used by http://jquery.malsup.com/cycle/ that cheesypoof suggested -
Code: Select all
<div class="slideshow"> 
   <img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
   <img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
   <img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
   <img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
   <img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
</div>

To integrate Couch into it, if the number of slides is fixed you could create, for example, five editable regions of type 'image' and then use them as follows -
Code: Select all
<div class="slideshow"> 
   <img src="<cms:show slide_image_1 />" width="200" height="200" />
   <img src="<cms:show slide_image_2 />" width="200" height="200" />
   <img src="<cms:show slide_image_3 />" width="200" height="200" />
   <img src="<cms:show slide_image_4 />" width="200" height="200" />
   <img src="<cms:show slide_image_5 />" width="200" height="200" />
</div>

If, however, the number of images is variable you could use a separate template, named for example 'slides.php' and define a single editable region of type 'image' within it.
The user than can simply create add as many slides as desired by creating a cloned page for each image.
The modified code will now become -
Code: Select all
<div class="slideshow"> 
   <cms:pages masterpage='slides.php' limit='10'>
      <img src="<cms:show slide_image />" width="200" height="200" />
   </cms:pages>
</div>

Hope this help.
That is a HUGE help! Thank you for the info!
I've implemented one of your suggestions and it works great! I have a little bit of tweaking with crop, etc, but I'm super stoked with the outcome.

http://dawn-creative.com/cfr/

One problem, though... why are my image links showing at the top of the page?
DawnCreative wrote: I've implemented one of your suggestions and it works great! I have a little bit of tweaking with crop, etc, but I'm super stoked with the outcome.

http://dawn-creative.com/cfr/

One problem, though... why are my image links showing at the top of the page?


Nevermind, hidden='1' FTW!
It's good to hear you got this to work. One thing you might want to consider is adding 'overflow:hidden' to your 'large-photo' id. Currently if your page is viewed with javascript disabled, all of the images are displayed one after the other. It would be prudent especially in this scenario to plan for a browser's lack of javascript support.
Thank you for the advise. I did that very thing.
8 posts Page 1 of 1