Im still stuck on a previous thread but if some one knows Jquery please could they tell me how to retrieve the id of an image file and make it into a variable. I got it working but it only retrives the id of the Div with this. Any help with this would be greatly appreciated as I have been trying to solve the problem for days.
var imgID = this.id;
many thanks
Adam
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
How are you adding this script to your page element? The ‘this’
keyword has special powers in JavaScript. If you are inside of an
‘onclick’ handler, for example, ‘this’ will always mean the element
that was clicked on. So if you applied it within a link, using the
Hyperlink dialog, the ‘this’ keyword will mean the A tag (the link
itself). I believe that if you click on a photo on your page and use
the Extended dialog to add an onclick event handler to it, the default
is to apply that to the DIV tag that holds the IMG tag in place on the
page. If you look at the Extended dialog where you applied the
onclick, you should be able to work out what it is applied to. If you
have to apply this code to the parent of the image (because it’s a
link, and you want it to be clickable, for example) then you can use a
traversal operator in jQuery to grab the image and return a reference
to it:
id = this.children('img').first().id;
If you were in Prototype, it would look like this:
id = this.down('img').id;
Walter
On Jun 23, 2011, at 8:16 AM, ummedia wrote:
Im still stuck on a previous thread but if some one knows Jquery
please could they tell me how to retrieve the id of an image file
and make it into a variable. I got it working but it only retrives
the id of the Div with this. Any help with this would be greatly
appreciated as I have been trying to solve the problem for days.var imgID = this.id;
many thanks
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
Walt its in the script you wrote for me to change the images. I did post another thread a few days ago but no answer so I tried to work it out using other forums. I have added an ‘id’ to the src
<img src="/images/made/3129_400_500_f9f9f9_imageswatermark.png_140_60_80_r_b_-10_-10_all_15_s_c1.jpg" id="image3" alt="" width="400" height="500" data-large="/images/made/3129_800_1253_f9f9f9_imageslargewater.png_140_60_40_r_b_-10_-10_all_15.jpg" />and am trying to use that when the button is clicked on an image.
[code]
{/code]all I have done at the moment is add this code to get my ID but it only gets the id of the div. I then want to add that information here where it says ‘image1’
var original = $('image1').readAttribute('data-large');many thanks
Adam
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Oh, well that’s all Prototype, so you shouldn’t have any jQuery in the
same page at all.
If you’re hard coding the image ID, you will end up with multiple
identical IDs in the page, so your script will not work at all; or
will only appear to work for the first image, at the browser’s
discretion. Try making your ID dynamically as well.
It’s very difficult for me to follow the code you’ve posted, either in
mail or on the web forum, because of the length of the lines and the
BBCode markers you’ve added. I recommend using either Pastie or Gist
instead, and simply add a link to the resulting URL all by itself in
one line, like this:
That way the built-in formatter won’t screw up your code.
Walter
On Jun 23, 2011, at 12:54 PM, ummedia wrote:
Walt its in the script you wrote for me to change the images. I did
post another thread a few days ago but no answer so I tried to work
it out using other forums. I have added an ‘id’ to the src
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks Walter I have added the code to pastie here
I havent changed it much from what you wrote just adding the ids and changing the var original to pick up the right id. We used to have the link to a jpg with some of the name removed using code but the image names created by CE_image are very long so someone suggested doing it this way
var original = $('image1').readAttribute('data-large');
.
I know the image is hand coded and would like that to be the imgID variable when I get the imgID variable to work that is.
Adam
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
You could try rewriting this line:
var imgtest = this.down('img').id;
to read this:
var imgtest = img.id;
…since you have already gotten a handle on the image. But I think
that you’re always going to get the first image in the box as the
answer (image1), not the current image, and you want to know the
current image, right?
The way this effect is currently coded, the IDs never change. We’re
swapping the src attributes around, not moving the actual image
objects. What is your larger objective here? What are you trying to do
with the ID of the image inside the click event?
Walter
On Jun 23, 2011, at 1:46 PM, ummedia wrote:
Thanks Walter I have added the code to pastie here
I havent changed it much from what you wrote just adding the ids and
changing the var original to pick up the right id. We used to have
the link to a jpg with some of the name removed using code but the
image names created by CE_image are very long so someone suggested
doing it this way
var original = $('image1').readAttribute('data-large');.I know the image is hand coded and would like that to be the imgID
variable when I get the imgID variable to work that is.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
I am trying to get data-large attribute from the appropriate img src which is the source of the newly created watermarked original jpg image if that makes sense .
I did try and use the img var you created but when I did an alert it didnt return anything
var img = this.down('img');
Adam
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Can you post a link to the page on your server? I can tell quite a bit
more from that.
Walter
On Jun 23, 2011, at 2:11 PM, ummedia wrote:
I am trying to get data-large attribute from the appropriate img src
which is the source of the newly created watermarked original jpg
image if that makes sense .I did try and use the img var you created but when I did an alert it
didnt return anything
var img = this.down('img');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
here it is with img.id as the var imgtest the alert returns nothing.
regards
Adam
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
It looks like there’s a few things going on here.
First, the large photo at the top doesn’t have an ID, and never will.
So your click there is not going to return it.
Second, the img tag for the hero photo looks like it has some
untranslated ExpressionEngine tags in it. Control-click on the big
photo, choose Inspect Element from the contextual menu, and look at
the entire code of the img tag. There’s a bit at the end that looks
like this:
<img src="http://www.digitalwatchlibrary.com/images/made/1145_400_500_f9f9f9_imageswatermark.png_140_60_80_r_b_-10_-10_all_15_s_c1.jpg
" alt="" width="400" height="500" rounded_corners="all"
bg_color="f9f9f9" output="/images/made/
1145_400_500_f9f9f9_imageswatermark
.png_140_60_80_r_b_-10_-10_all_15_s_c1.jpg" }"="">
See that close brace at the end – I’ll bet that’s not supposed to be
there, and there is no output attribute on an img tag, so this is
invalid HTML.
Last, there is no data-large attribute on the large photo, rather only
on the small photos below it. When you click one of the small photos,
the data-large attribute from the small photo you clicked gets
substituted into the href attribute of the A tag wrapped around the
large hero photo. If you want to grab the current data-large value
when you click on the big photo, you can try grabbing it out of the A
tag, like this:
var large = this.down('a').href;
But I don’t know if that will happen before the other lightbox script
you’re using “hijacks” the click event and opens the larger version.
You may have to get at this another way. What is your actual goal with
this data-large? What do you want to do with it?
Walter
On Jun 23, 2011, at 2:17 PM, ummedia wrote:
CASIO - LB316 - Ladies - Vintage Digital Watch - Digital-Watch.com
here it is with img.id as the var imgtest the alert returns nothing.
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
data-large is the url to an image created with the CE_image plugin that takes the original image and puts a watermark on it so all I want is that url to go into the var original the EE code is this
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Walter
In this line I get the correct image1, image2 or image3 depending on whatever I hand code is it not possible to create a var that just changes dependent on what image I click?
var original = $(‘image1’).readAttribute(‘data-large’);
can the word ‘image1’ be a variable?
thats all im trying to do here I think.
Adam
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Walter
Can a variable be set when a lower image is clicked?
Also if its causing a problem can this line be written in a different way?
var original = $(‘image1’).readAttribute(‘data-large’);
its only trying to get the data-large attribute from the appropriate image source. If you are too busy could you point me to a forum that may be able to help, you help so much I don’t want to just depend on you.
many thanks
Adam
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
The official jQuery site has proven useful to me on several occasions http://jquery.com/. The forum is friendly too http://forum.jquery.com/.
Todd
If you are too busy could you point me to a forum that may be able to help
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Despite the subject, this isn’t jQuery at all, it’s still Prototype.
Walter
On Jun 28, 2011, at 8:50 AM, Todd wrote:
The official jQuery site has proven useful to me on several
occasions http://jquery.com/. The forum is friendly too <http://forum.jquery.com/.
Todd
If you are too busy could you point me to a forum that may be able
to help
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
Oops, my mistake.
Todd
Despite the subject, this isn’t jQuery at all, it’s still Prototype.
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Sorry for the subject Todd I thought it was jquery when I started.
Im nearly there I think I just need to retrieve the id of an image that I click and override a var I set each time an image is clicked.
Adam
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Do you have a copy of the original code I wrote? I need you to get rid
of all the alerts and the attempts you’ve made to grab this variable,
because I cannot follow what this code is supposed to do now. It looks
like some things have been fundamentally changed, and just for my
sanity, I need to see how it read when it last worked. This variable
you want is available to you – it’s being used to populate the href
attribute on the link wrapped around the big photo. So at the moment
that the little image is clicked, the variable is known to the system.
Therefore it could be shared with another function, if you can also
explain what you want to do with that value.
This style of programming is a little hard to follow sometimes,
because one of the central ideas is that we DON’T expose variables to
the global scope. There’s a function wrapped around the click event,
and inside that function, the value of data-large is known and usable.
Outside of the function, the value (and the variable itself) do not
exist. So anything you want to do ought to happen inside that function.
Walter
On Jun 28, 2011, at 8:41 AM, ummedia wrote:
Walter
Can a variable be set when a lower image is clicked?Also if its causing a problem can this line be written in a
different way?var original = $(‘image1’).readAttribute(‘data-large’);
its only trying to get the data-large attribute from the appropriate
image source. If you are too busy could you point me to a forum that
may be able to help, you help so much I don’t want to just depend on
you.many thanks
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
This is what I had before I added anything Walter.
There is no data-large tag or readAttribute
Adam
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
ignore that code Walter there was one after that that incorporated lightbox
Adam
dynamo mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options