javascript img rotation on click + flexible size = fun?

mrdale · 2007-01-29 18:46:42

>hcgtv
Nice.

Care to share a plugin/javascipt shopping list, some forms and tags? I’d say a resounding “Thank you” :)

[edit] Ah, singapore. Should have checked before posting. How well (tightly) does it integrate with TXP?

Last edited by mrdale (2007-01-29 18:48:27)

jstubbs · 2007-01-29 19:09:46

I am looking for a slideshow like aro_slideshow, but with Lightbox (or preferably Slimbox) integration. Anyone seen something like that? Want to use it of a front page of a site to present a series of images pulled from a given TXP category.

hcgtv · 2007-01-29 19:16:56

mrdale wrote:

Ah, singapore. Should have checked before posting. How well (tightly) does it integrate with TXP?

Well there’s no backend integration yet, it’s mostly surface changes to the CSS so you can make it look like your site. I do plan on tying in to the Textpattern admin interface, just haven’t gotten around to it since I find it easier to FTP up my images and let singapore generate the thumbnails.

Honestly, I’ve never been happy with web based interfaces when it comes to dealing with 1,000’s of images. No matter how you do it, it feels cumbersome.

masa · 2007-02-05 12:01:34

ma_smith wrote:

here’s a good start

Thanks! :)

By the way, did you find a solution that fits your requirements?

Last edited by masa (2007-02-05 12:09:56)

edeverett · 2007-02-05 22:04:08

So if I’m understanding Matthew’s requirements, the gallery would act something like:

The raw HTML would a list containing images (and titles and other details),
The javascript would then loop through each list item storing the details (url of image, title details etc) in an array and removing the li element from the DOM,
the javascript would write in an image tag, and the links for the controls (next/previous) and tags for any titles,
onclick of the controls the javascript would update the HTML it has just written in with the details of the new image.
all the sizing/styling would be left up to the CSS.

If this is correct and there is demand and someone else would make it into a Textpattern plugin, I could probably put the Javascript together.

Ed.

Last edited by edeverett (2007-02-05 22:05:23)

squaredeye · 2007-02-06 04:36:03

Ed,
I think I lost you there in some JS lingo, but that might be correct :)
Thanks for volunteering your JS help. If the JS can take a list of imgs like the following:

<ul>
<li><a href="#"><img src="1.jpg" /></a></li>
<li><a href="#"><img src="2.jpg" /></a></li>
<li><a href="#"><img src="3.jpg" /></a></li>
<li><a href="#"><img src="4.jpg" /></a></li>
</ul>

and replace it with just one img in the list (at a time),
or use dynamic inline styling to hide those that shouldn’t be seen using positioning, but
retaining ability to size things proportionately.

Then I don’t think we’d need to make it a plugin.
Could just be JS.

Would this involve tying into a pre-existing library?
If so are you opposed to using Jquery?

Matthew

edeverett · 2007-02-06 20:41:09

yep, that’s the gist of it, but we wouldn’t need the empty links.

I’m not opposed to jquery(as long as it has good documentation), but I think it might be more useful to people without being attached to a library.

So we’d want to turn this:

 <ul id="galleryList">
   <li><img src="1.jpg" alt="" title="Title 1"/></li>
   <li><img src="2.jpg" alt="" title="Title 2" /></li>
   <li><img src="3.jpg" alt="" title="Title 3" /></li>
   <li><img src="4.jpg" alt="" title="Title 4" /></li>
</ul>

into:

<div id="galleryDisplay">

   <img src="img2" />

   <a href="#img1" id="galleryBack" title="See previous image (Title 1)">Back</a>
   <a href="#img3" id="galleryNext" title="See next image (Title 3)">Next</a>

</div>

When the gallery gets to the end would it just go back to the first image and vice versa?

I can’t think of any thing that would be needed that would break in modern browsers, but I’m not going to promise to support IE5.x/Mac (or anything older than IE5.5). We should be able to make it fail nicely to just a list of images though. I don’t have much patience for old browsers (it’s not like it’s hard to get hold of new ones…).

squaredeye · 2007-02-06 23:53:50

edeverett,
That looks hot.
I imagine that when js is turned off it just resorts to the full list yes?

Actually, not working for older browsers is preferred (for me) this site will be handed to standards browsers differently than the oldies. Thanks for the help. Its outstanding.

edeverett · 2007-02-08 07:23:10

Yes, without javascript it’ll just be a list of images.

Ed.

edeverett · 2007-02-11 18:32:11

Here’s a quick proof of concept test page:

http://edeverett.co.uk/examples/unobtrusiveJSGallery_02_2007/

This is for feedback and testing only. This is not ready for using on a live site.

The gallery doesn’t have any images in it, you’ll have to make do with alt text for now. Try turning javascript off and on to get an idea of what is going on. There are plenty on comments in the script too.

Let me know what you think, but remember that this is a test script so far, so be nice.

Ed.

squaredeye · 2007-02-11 18:50:21

Hey that’s hot. Well done. You’re good at this stuff.

1st bug: Its not working in Safari (2.04) on Mac Intel. (is anybody else having this issue?) The next/prev links don’t respond, and the preload flashes before the alts are hidden.

In FF 2.0.0.1 it works a sweet charm!

By the way, I LOVE the way it degrades.

edeverett · 2007-02-11 21:52:58

I’ve added images as to make it clearer as to what’s going on in safari (it doesn’t show alt tags), and it seems to work for me in Safari (2.04) on my old non-Intel iBook. Although I develop on PC primarily with IE and Firefox, so I wouldn’t be surprised if there are bugs in Safari. Left me know if it still isn’t working.

The preload flashing is a side affect of the JavaScript being activated “onload”, that is, once the whole HTML and any images/scripts/css have loaded. Depending on how the browser renders the page and perhaps the speed of the computer, the unchanged content will appear first. Personally I think this is an acceptable side affect of using javascript accessibly, but I understand that this can be an issue for some sites. Managing onload behaviour can be tricky and isn’t something I know a lot about, but maybe this is an excuse for me to find out more. It’s a little outside the scope of this script but I’ll look into it.

“I LOVE the way it degrades.” I’d recommend reading Dom Scripting by Jeremy Keith, it’s a great introduction to nice ways of using javascript.

Textpattern CMS

Textpattern CMS support forum

#13 2007-01-29 18:46:42

Re: javascript img rotation on click + flexible size = fun?

#14 2007-01-29 19:09:46

Re: javascript img rotation on click + flexible size = fun?

#15 2007-01-29 19:16:56

Re: javascript img rotation on click + flexible size = fun?

#16 2007-02-05 12:01:34

Re: javascript img rotation on click + flexible size = fun?

#17 2007-02-05 22:04:08

Re: javascript img rotation on click + flexible size = fun?

#18 2007-02-06 04:36:03

Re: javascript img rotation on click + flexible size = fun?

#19 2007-02-06 20:41:09

Re: javascript img rotation on click + flexible size = fun?

#20 2007-02-06 23:53:50

Re: javascript img rotation on click + flexible size = fun?

#21 2007-02-08 07:23:10

Re: javascript img rotation on click + flexible size = fun?

#22 2007-02-11 18:32:11

Re: javascript img rotation on click + flexible size = fun?

#23 2007-02-11 18:50:21

Re: javascript img rotation on click + flexible size = fun?

#24 2007-02-11 21:52:58

Re: javascript img rotation on click + flexible size = fun?

Board footer