javascript img rotation on click + flexible size = fun?

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

#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