Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Add links and a class to images on a page

Posted on 2013-01-20
9
242 Views
Last Modified: 2013-01-25
I have several images on a page, which I want to add links  and a class to dynamically because I am using Drupal and can't add this directly to the images so I am creating a script to do it. I have tried in javascript and jquery, either would be fine or AJAX, if that works. But I can't get anything to work. Javascript is not one of my strengths.
The images don't have IDs, and each image should link to the big version of the image which is just the src on the page. I would like to add
rel="lightbox[custom]"
to each a href as well.
The page is here:
http://harbisondevelopment.info/graveyard-sky
0
Comment
Question by:nanharbison
  • 5
  • 4
9 Comments
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 38799676
How about something like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('img[typeof="foaf:Image"]').each(function(){
		var largeImgSrc = $(this).attr('src');
		//you will need to create your href value for each image here and assign to largeImgSrc
		largeImgSrc = largeImgSrc.substring(0, largeImgSrc.lastIndexOf('.')) + '_large.jpg';
		$(this).attr('rel', 'lightbox[custom]').attr('class', 'myImgClass');
		$(this).wrap('<a href="' + largeImgSrc + '"></a>');
	});
});
</script>

Open in new window

0
 
LVL 17

Author Comment

by:nanharbison
ID: 38802011
tommyBoy, wow, this is great. I thought that by adding the rel="lightbox[custom]",  and class = b, the images were going to do what the images on this page are doing when you click on them:
http://harbisondevelopment.info/custom-japanese-style-swords

 If this is a new question, just let me know, and I will award the points and ask a new one.
Thanks for much for letting me stop tearing my hair out. I have to say jquery is fabulous, but I have never gotten it to work.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38802231
That's a fair assumption provided everything required by lightbox is in place (all js libraries and css).

I have no experience with Drupal or Lightbox.

You can delete this line in the script I provided because it changes the original image source. On the working page, the img src and the anchor href are the same value:

largeImgSrc = largeImgSrc.substring(0, largeImgSrc.lastIndexOf('.')) + '_large.jpg';

The order of execution may also be a factor. I have the jquery code executing on document ready. Perhaps certain code in the lightbox.js is acting on the images BEFORE the jquery script runs so lightbox fails to see the new rel attribute and class on the images. Just a thought. As a test, move the jquery script without the $(document).ready wrapper to the bottom of the <body> and put the lightbox.js include after that at the very bottom of the <body>. If that works then you'll know it's the order of execution making the difference. If not, there may be another js file required that I am unaware of, someone would have to dig deeper. I may be able to do it later today but a new question may get a quicker response.
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 17

Author Comment

by:nanharbison
ID: 38802693
I am in meetings most of today, so I won't have time to look at this until the evening. I am in no rush to get this done.   Thanks for your help and suggestions
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38802940
No problem. Let me know if both of those suggestions fail.
0
 
LVL 17

Author Closing Comment

by:nanharbison
ID: 38810518
Thanks for this. I wish I could give you more than 500 points after being frustrated for days not getting anything to work. I don't have the lightbox part figured out. I think that's a new question, so please look for it if you are interested. I am going to ask that.
It didn't work to put the lightbox js after it loads.
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38811268
Thanks for the points.

I played with this a little bit during my lunch break and came up with a working local copy of your site in which the lightbox feature functions properly. To accomplish this I had to do a few things.

1.) After reading the lightbox website, I realized that the rel="lightbox" needs to go in the anchor tag, not the image tag so I changed the script in the <head> section to this:
<script type="text/javascript">
$(document).ready(function(){
      $('img[typeof="foaf:Image"]').each(function(){
            var largeImgSrc = $(this).attr('src');
            $(this).attr('class', 'b');
            $(this).wrap('<a href="' + largeImgSrc + '" rel="lightbox[custom]"></a>');
      });
});
</script>

2.) I downloaded a fresh copy of lightbox2 from their website, saved the files lightbox.js, jquery-1.7.2.min.js, and lightbox.css and made references to the local copies at the top of my test page.  It would not work with the references you already had included (maybe because it's Drupal-ized?).

3.) I commented out your reference to prototype.js. It must be a corrupt file because lightbox totally fails with that included.

I'm attaching my test page.
test-40.html
0
 
LVL 17

Author Comment

by:nanharbison
ID: 38816202
I had already moved the lightbox reference to the anchor tag. I downloaded the new version of lightbox, and had to make some other adjustments and after several more hours of fussing with it,
I also removed the two other js files, scriptaculous and mouseover. That's when it finally worked.
IT WORKS!!!!!!!!!! Woohoo. Such an exhilarating feeling when something finally works correctly.

Thanks so much for your help!
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 38818352
I hear ya there! You are welcome, glad you got it to work.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question