jquery question

digital-watch · June 28, 2011, 1:27pm

This is it before I added anything but with the new data-large

http://www.pastie.org/2134093

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · June 28, 2011, 2:32pm

Okay, now please tell me what you’re trying to do with the value of
data-large, at the moment of the click or after. Remember, this
attribute is there in the page, but nothing is currently being done
with it until the preview image is clicked. If you click the preview
image, you can access the value of this attribute from inside the
click event handler. Here’s an example, not a rewrite of your code.
Please let me know if it makes sense.

<div id="main">
<img src="first_image_medium.jpeg" />
</div>
<div id="previews">
<img src="first_image_small.jpeg" data-large="first_image.jpeg" />
<img src="second_image_small.jpeg" data-large="second_image.jpeg" />
<img src="third_image_small.jpeg" data-large="third_image.jpeg" />
</div>

This HTML represents the state of the page when it first loads. The
first thing that happens is that the main image needs to be wrapped in
a link so that the lightbox stuff will work. This happens in a first
pass, and it never gets done again as long as the page is loaded. (All
the rest of these code blocks should be taken as being inside a script
block tag – they are all separate parts here, but they are meant to
work together.)

var a = new Element('a',{href:'#',rel:'lightbox'});
$('main').down('img').wrap(a);
//remember, we now have a reference to 'a', and we will use it later

Next, the href attribute of the ‘a’ needs to be set to the value of
the first image, and the first image preview needs to be set to the
“here” class so it gets marked as current.

a.href = $$('#previews  
img').first().addClassName('here').readAttribute('data-large');

That’s all the setup. The data-large value is now moved into the href
attribute of the link we wrapped around the main image. This sets the
stage for the lightbox script to pick up that href and use it as the
src of the giant image. If you wanted to intercept that value at this
stage, you could do so in the previous block of script. For example,
if you wanted to maintain a global reference to the current data-large
value, you could rewrite that previous line to read:

var current = $$('#previews  
img').first().addClassName('here').readAttribute('data-large');
a.href = current;

Now the variable ‘current’ holds the data-large from the first image.
Each time you click on the previews, you have to change this at the
same time that you change the a.href AND the img.src of the large image.

Now we just listen for clicks on the preview images, and use that to
drive the rest:

$('previews').observe('click',function(evt){
	var elm = evt.findElement('img');
	if(elm){
		$$('img.here').invoke('removeClassName','here');
		elm.addClassName('here');
		current = elm.readAttribute('data-large');
		a.href = current;
		$('main').down('img').src = elm.src.gsub(/_small/,'_medium');
	}
});

So if the click lands on a preview image, do the following:

Remove the ‘here’ classname from all the preview images.
Add the ‘here’ classname to the clicked image.
Set the global variable ‘current’ to the value of the clicked
image’s data-large.
Use that same value to set the lightbox link’s href to the new value.
Use the src of the clicked image to set the src of the medium size
preview, by swapping the word _small for _medium.

Now, at any point after this, if you need to know the value of the
data-large associated with the currently-shown image, you have it in
the global variable ‘current’ and can read it from there.

Walter

On Jun 28, 2011, at 9:27 AM, ummedia wrote:

This is it before I added anything but with the new data-large

http://www.pastie.org/2134093

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

digital-watch · June 28, 2011, 2:45pm

data-large is just the url to a jpg image. It should be the url for the var original that is in the code now

var original = img.src.gsub(/(/cache|-400x500)/,‘’);

Adam

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

digital-watch · June 28, 2011, 2:48pm

I read what you wanted again, data-large is the url of the original image, now with watermark. It is the url to the image that pops up when you click the main page imagethat uses lightbox.

Adam

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · June 28, 2011, 2:56pm

I understand that. I’m afraid I’ve completely lost the thread of what you’re trying to accomplish, then. If you go through the steps above, I’m hoping you’ll understand what is happening when. If you can step through the code as I have done, perhaps the answer will be clear to you.

Or, if you could write a prose story that describes what you’re trying to accomplish, leaving the EE and EE Image Helper entirely out of that story, talking only about what is in the page when the browser loads it, then I may be able to help you further. Remember – JS and EE have nothing at all to do with one another. The most they can do for one another is leave notes on the fridge (in this case, the DOM of the page).

Walter

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

digital-watch · June 28, 2011, 4:17pm

I tried incorporating your new code into the old script Walter but I think I messed it up. The old script worked fine I just wanted the url value of data-large to replace the var original value when a small image is clicked, thats it everything else worked brilliantly.

Adam

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · June 28, 2011, 4:32pm

That code wasn’t for using, it was for looking at a step at a time so
you could see how it worked. That’s the key. The existing code would
tell you what you needed to know, but you had to know where and when
to ask it.

Walter

On Jun 28, 2011, at 12:17 PM, ummedia wrote:

I tried incorporating your new code into the old script Walter but I
think I messed it up. The old script worked fine I just wanted the
url value of data-large to replace the var original value when a
small image is clicked, thats it everything else worked brilliantly.

Adam

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

digital-watch · June 28, 2011, 5:30pm

I didnt write the original code Walter I think I understand what you sent me but am not 100% sure what everything does in the original code and what I need to replace or is no longer used. For instance is var original still needed? It looks to me it isnt,

Adam

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · June 28, 2011, 5:52pm

In the latest “original code” version, the var original value is used on line 63 to set the value of the lightbox link after a click on one of the preview divs. It sets it to the src of that preview div’s image, after using gsub (a Prototype-enhanced form of the native String.replace() function) to strip out the cache and geometry values from the filename.

Basically, this does the same thing as this line in my example:

$('main').down('img').src = elm.src.gsub(/_small/,'_medium');

But the more I look at it, the more I realize that there’s vestiges of two separate attempts in here, and you’re only needing the last of them. This very brief JS should completely replace your earlier effort, and it should just work.

gist.github.com

https://gist.github.com/walterdavis/1051705

gistfile1.html

<script type="text/javascript" charset="utf-8">
  //grab the first preview image
  var first = $$('div.preview').first().addClassName('here').down('img');
  //add a new link around the large image, assign it the link from the first image and 
  //the rel: lightbox so that lightbox.js will recognize it
  var a = new Element('a',{href:first.readAttribute('data-large'),rel:'lightbox', title:'{maker}-{modelnumber} Image Protected by Copyright, not to be used elsewhere'});
  var main = $('main').down('img');
  main.wrap(a);
  //that's it, only have to do it once and the link is there to be fiddled with later
  //now listen to clicks on the little preview images, swap the medium image in, and change the a.href to match

This file has been truncated. show original

Walter

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · June 28, 2011, 6:16pm

If you’re looking at the gist right now, I just changed it to fix one
problem I spotted.

Walter

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

digital-watch · June 28, 2011, 6:58pm

Thats brilliant Walter and so much shorter. Now I dont get it at all. Well I get some of it but where in that script is the image swap? Its obviously there as the images do swap.

Thank you so much Walter, just brilliant.

Adam

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · June 28, 2011, 7:27pm

On Jun 28, 2011, at 2:58 PM, ummedia wrote:

Thats brilliant Walter and so much shorter. Now I dont get it at
all. Well I get some of it but where in that script is the image
swap? Its obviously there as the images do swap.

Line 15 is the entire image swap thing.

Walter

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

digital-watch · June 29, 2011, 8:09am

Thanks Walter i’ll study it. Is there any documentation online or otherwise that I can look at to help understand the language a little better?

regards

Adam

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · June 29, 2011, 12:24pm

Douglas Crockford has written a very useful book called “JavaScript –
The Good Parts”. I also use the O’Reilly phone-directory-sized
“JavaScript: The Complete Reference” a fair bit.

Walter

On Jun 29, 2011, at 4:09 AM, ummedia wrote:

Thanks Walter i’ll study it. Is there any documentation online or
otherwise that I can look at to help understand the language a
little better?

regards

Adam

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

digital-watch · June 29, 2011, 12:38pm

So is it Javascript w are using here sorry to be dumb but I see protaculous, javasript and jquery I dont know what the difference is.

On a separate note Im not sure if its you that made this forum Walter but is it possible on the forum reply email notification to have an anchor that takes you to the end of the thread rather than the top of the page I can imaging there are threads much longer than ours

regards

Adam

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · June 29, 2011, 1:03pm

On Jun 29, 2011, at 8:38 AM, ummedia wrote:

So is it Javascript w are using here sorry to be dumb but I see
protaculous, javasript and jquery I dont know what the difference is.

JavaScript is a programming language. Prototype and Scriptaculous and
jQuery are programming ‘toolkits’ written in JavaScript. Prototype and
Scriptaculous are known in jest as “Protaculous” because they travel
together (it’s impossible to use Scriptaculous without loading
Prototype first). My Protaculous Action is a way to use these two
libraries in Freeway without a lot of heartache.

If you want to understand JavaScript, it’s essential to learn the
language before you learn any of the toolkits. Once you have a basic
grounding in how to string together a function and call it, what a
variable is (and particularly how variable scope works), you will be
ready to attack the really vertical part of the learning curve.

Both Prototype and jQuery attempt to smooth over the differences
between the various browsers’ implementations of the JavaScript
language. In addition, they each provide tools to the developer that
aim to make common tasks effortless and fast to code, and optimal for
the browser to run without ambiguity.

On a separate note Im not sure if its you that made this forum
Walter but is it possible on the forum reply email notification to
have an anchor that takes you to the end of the thread rather than
the top of the page I can imaging there are threads much longer than
ours

Easily done, you should see it in this “ping”. This duplicates the
green button at the top of the page on the site, which tells you the
number of replies.

Walter

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

digital-watch · June 29, 2011, 1:12pm

Thanks Walter that was really informative. Ive never really delved into Javascript too much, i’ll grab one of those books and have a look.
Yes thats what I meant about the anchor much better. Was that a setting I missed or have you just added it?

kind regards

Adam

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

waltd · June 29, 2011, 1:21pm

On Jun 29, 2011, at 9:12 AM, ummedia wrote:

Thanks Walter that was really informative. Ive never really delved
into Javascript too much, i’ll grab one of those books and have a
look.
Yes thats what I meant about the anchor much better. Was that a
setting I missed or have you just added it?

Just added it. No idea how that will work for pages that have short
threads, but we shall see.

Walter

dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options