javascript img rotation on click + flexible size = fun?

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.

squaredeye · 2007-02-12 15:51:19

eric,
Great work. Let me know when you’re next version is up.
Its working in Safari now.

I know that for other scripts I’ve put a specific bit of JS just before the closing body tag to help the js “hide” the element before loading the page.

Would that be applicable here?

squaredeye · 2007-03-06 01:33:32

Eric,
Were you able to bring this to completion? Do you feel its ready?
:)

Matthew

edeverett · 2007-03-06 22:25:02

Hi,

I’m normally Ed rather than Eric, but I’m not too fussy… :-)

Yeah, I’ve not been as attentive to this as I should. Reality has taken over a little: since I was last on the forum I’ve mostly been moving house which has not been too awkward, but has taken up all my spare evenings and the rest of the time we’ve been furniture shopping. Plus, my commute is now 20km each way which is taking some time to get used to cycling without knackering myself.

But by coincidence I had done some work on this last night, and I think it’s in quite a good state now. Just now I’ve added in some testing to make sure the script won’t throw errors if the HTML isn’t there or is missing bits. But it might still be possible to break it so best to keep the HTML well formed (as I’m sure everyone on this forum does).

Also some other changes I’ve made are to return focus to the last link that was pressed, so there is easy keyboard access and you can keep going just by pressing enter. I’ve also added in some stuff to handle titles. You can turn titles on or off in the settings at the top of the .js file (oh yeah, the JS is now in it’s own file). Text variables are also set in at the top.

Please have at it, test it, criticise it etc. and let me know how it can be improved. One thing I’m aware of is that there are starting to be too many global variables, so I’ll look into wrapping everything in a function to keep it neat.

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

Cheers,

Ed.

squaredeye · 2007-03-06 22:59:03

where the crap did I get eric from. What a cuckoo :)
I’m not getting much sleep lately as I’ve been staying up late with my new one.

Sorry about that ED!

Thanks for your work, I’ll give it a go this week.

Matthew

squaredeye · 2007-03-08 19:33:07

Ed,
I had a go with this. Its mostly working well.
One place where I saw a problem is that it seems to be grabbing anything in the parent div (of the ul) and removing it.

here is what my form looks like:

<txp:if_article_list>
	<div class="left">
		<txp:if_custom_field name="details">
		<ul id="jsGalleryList">
			<txp:upm_article_image form="img_upm_list_thumb" show_height="no" show_width="no" />
		</ul>
		<txp:else />
		<ul id="thumbs">
			<txp:upm_article_image form="img_upm_list_thumb" show_height="no" show_width="no" />
		</ul>	
		</txp:if_custom_field name="details">	
	</div>
	<div class="right">
		<div class="post">
			<h3 class="post-title"><txp:permlink><txp:title /></txp:permlink></h3>
			<txp:body />
			<div class="utility">
				<txp:if_custom_field name="client">
					<h4>Client</h4>
					<p><txp:custom_field name="client" /></p>
				</txp:if_custom_field>

<txp:if_custom_field name=“tools”> <h4>Utilized Tools</h4> <p><txp:custom_field name=“tools” /></p> </txp:if_custom_field> </div> </div><!—close post—> </div> <div class=“clear”> </div>
</txp:if_article_list>

Here’s whats happening
If I have data in the details custom field then your js is implemented, but some of the div.right is eliminated so that the output is what is shown below:

<div class="left">
		<ul id="jsGalleryList">
			<li><img src="http://localhost:8888/sqdeye.com/images/15.jpg" alt="site_urbana_1.jpg" /></li>
			<li><img src="http://localhost:8888/sqdeye.com/images/18.jpg" alt="site_urbana_4.jpg" /></li>
			<li><img src="http://localhost:8888/sqdeye.com/images/28.jpg" alt="site_urbana_5.jpg" /></li>
			<li><img src="http://localhost:8888/sqdeye.com/images/16.jpg" alt="site_urbana_2.jpg" /></li>
			<li><img src="http://localhost:8888/sqdeye.com/images/17.jpg" alt="site_urbana_3.jpg" /></li>
		</ul>

<h4>Utilized Tools</h4> <p>Photoshop, Illustrator</p>

</div> </div><!—close post—> </div>

Note the fact that the beginning elements for div.post and div.right are taken out along with several other elements like the title and body.

Any thoughts here?

Matthew

edeverett · 2007-03-10 16:09:05

Hmm… That’s no good is it.

I can’t get it to do anything to any HTML outside the #jsGalleryList with my local tests. Can you email me the HTML source of the page that is breaking? and let me know which brower(s) you’re having the problem in?

Thanks,

Ed.

Textpattern CMS

Textpattern CMS support forum

#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?

#25 2007-02-12 15:51:19

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

#26 2007-03-06 01:33:32

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

#27 2007-03-06 22:25:02

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

#28 2007-03-06 22:59:03

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

#29 2007-03-08 19:33:07

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

#30 2007-03-10 16:09:05

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

Board footer