Make these carousel images linkable?

http://dev2.magickitchen.com/index.html

You will see that I have <div class="item active">
<a href="/menu/thanksgiving.html"><img src="images/slides-home/thanksgiving.jpg" alt="MagicKitchen.com HomeStyle Meals"></a>
<div class="carousel-caption">
<h3>Order Thanksgiving Dinner!</h3>
</div>
</div>  on the first item, that doesn't work. What can I do to make these images link? Thanks!
mel200Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
Not seeing that markup at the link provided. I see this for the carousel (no anchors):
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/slides-home/1.jpg" alt="MagicKitchen.com HomeStyle Meals">
<div class="carousel-caption">
<h3>MagicKitchen.com HomeStyle Meals</h3>
</div>
</div>
<div class="item">
<img src="images/slides-home/2.jpg" alt="Something for Everyone">
<div class="carousel-caption">
<h3>Something for Everyone</h3>
</div>
</div>
<div class="item">
<img src="images/slides-home/3.jpg" alt="Senior Meals -  Easy to Reheat">
<div class="carousel-caption">
<h3>Senior Meals -  Easy to Reheat</h3>
</div>
</div>
<div class="item">
<img src="images/slides-home/4.jpg" alt="Meal Programs">
<div class="carousel-caption">
<h3>Meal Programs, Customized for You</h3>
</div>
</div>
<div class="item">
<img src="images/slides-home/5.jpg" alt="Meals for Special Diets Delivered">
<div class="carousel-caption">
<h3>HomeStyle Meals for Special Diets</h3>
</div>
</div>
<div class="item">
<img src="images/slides-home/6.jpg" alt="Gourmet Desserts Online">
<div class="carousel-caption">
<h3>Gourmet Desserts</h3>
</div>
</div>
<div class="item">
<img src="images/slides-home/7.jpg" alt="Special Diet Menu for Diabetics">
<div class="carousel-caption">
<h3>Special Diet Menu for Diabetics</h3>
</div>
</div>
<div class="item">
<img src="images/slides-home/8.jpg" alt="Meals for Low Sodium Diets">
<div class="carousel-caption">
<h3>Meals for Low Sodium Diets</h3>
</div>
</div>
<div class="item">
<img src="images/slides-home/9.jpg" alt="Our Family Loves the Food!">
<div class="carousel-caption">
<h3>Our Family Loves the Food!</h3>
</div>
</div>
</div>

Open in new window

0
mel200Author Commented:
That's strange, when I refreshed the page, the link was there in source code, but it did something odd to the photo. I put it back, but this time I only put it on the h3 tag, and it works now.

So.. what should I do with the points? Sorry about that.
0
Tom BeckCommented:
No problem. Just close the question accepting your own solution with 0 points.

It probably did something strange to the photo because the <img> is no longer a child of the <li> but rather a child of the <a>. You just need to adjust your css selector to reflect the new hierarchy.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

nap0leonCommented:
Instead of adding anchors around each div, which is probably why your carousel doesn't work for me, add a click event to each image.


$('img[src="images/slides-home/thanksgiving.jpg"]').on('click',function(){
  window.location = "/menu/thanksgiving.html";
})

Open in new window

0
mel200Author Commented:
You solved it anyway! Thanks!
0
mel200Author Commented:
Perfect... except I can't figure out how to do that, exactly, so need a little more help.
0
Tom BeckCommented:
I'm confused.
0
mel200Author Commented:
I'm not sure how to put this: $('img[src="images/slides-home/thanksgiving.jpg"]').on('click',function(){
  window.location = "/menu/thanksgiving.html";
})

Into this:
<div class="item active">
<img src="images/slides-home/1.jpg" alt="MagicKitchen.com HomeStyle Meals">
<div class="carousel-caption">
<h3>MagicKitchen.com HomeStyle Meals</h3>
</div>
</div>
0
Julian HansenCommented:
Interesting to know why you need to turn an <img> into a clickable element as an alternative to <a> - not the right solution in this case - it may work but when you find you are putting in script to do what can be done with styling chances are you took a wrong turn.
0
mel200Author Commented:
The a tag doesn't seem to work in this carousel.
0
Tom BeckCommented:
I agree with Julian. My confusion stems from @nap0leon being awarded the points for a solution that you were unable to implement. I understood that you got it working without help from any experts.
0
Julian HansenCommented:
The a tag doesn't seem to work in this carousel.
The a tag does not have any functionality that will prevent it working. It is about having the proper styling attached to the tag.
If it is not working for you then you need to look at your CSS and change that to meet your requirements.

I second Tom's comment above.
0
nap0leonCommented:
@mel
I see you've removed the <a> tags around the carousel items that was causing your carousel to not work.  Excellent.
Now all you need to do is add a <script> block to the (bottom of) the page or inside a js file that loads after jQuery has loaded that tells the browser what to do when someone clicks on each image.  Here is what it looks like for one of the images- it tells the browser to open thanksgiving.html when someone clicks on thanksgiving.jpg. You will want to add one of these for each image that you want to turn into a link.

e.g.,
<script type="text/javascript">
$('img[src="images/slides-home/thanksgiving.jpg"]').on('click',function(){
  window.location = "/menu/thanksgiving.html";
})
</script>

Open in new window

0
mel200Author Commented:
Ok, thanks, I'll give it a try!
0
mel200Author Commented:
OK.. I did the first one, it's after jquery loads, at the bottom before the end body tag. I uploaded the page, and the script is there, but still no link on the first slide.

http://dev2.magickitchen.com/
0
Julian HansenCommented:
@mel
I just added links back around the images using the console and tested them and they work fine.

Question - do you want each image to link to a different page?

Sidebar
A general comment about jquery should be inside a document load i.e.
$(function() { // ADD THIS
  $('img[src="images/slides-home/thanksgiving.jpg"]').on('click',function(){
    window.location = "/menu/thanksgiving.html";
  });
}); // AND THIS
0
mel200Author Commented:
HI, Yes, each image goes to a separate page.  Thanks for the note, I am not at all savvy about jquery. I need to study.
0
nap0leonCommented:
Tested with the latest FireFox and Chrome browsers on Windows 7.

Clicking the first image on http://dev2.magickitchen.com/ takes me to http://dev2.magickitchen.com/menu/thanksgiving.html, as expected.

There is a non-insignificant delay while the page loads something from widget.trustpilot.com, but once the page is done loading, the click event works OK.

Sidebar - Julian, why the desire to wrap the event listeners inside an anonymous function?  From my experience, this is not necessary, but if you can point to something that shows it to be better for cross-browser support or perhaps performance, I'm all ears.
0
mel200Author Commented:
Hi, I just added links around all the images again, and the problem is that it makes the images much larger than I want them to be. See link. Thanks.
0
mel200Author Commented:
I'll wait for you to wrestle out the details, then will go back to the click event. Probably I didn't wait until the page loaded.
0
nap0leonCommented:
@mel -
With the links around the <img> instead of around the <div class="item"> works fine too.
(In your original version, you had the <a> around the <div> items which broke the carousel.)

The reason the <a> looks like like it is huge is because your carousel resizes the images to fit the size of the user's screen.  It does NOT adjust the sizing of an <a> that surrounds the <img>.  Are you seeing any negative consequences or purely a cosmetic issue when you inspect the <a> tags in your console?
0
Julian HansenCommented:
To make the images the right height add this to your style.css stylesheet
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
  width: 100%;
}

Open in new window

That will override the bootstrap setting for the carousel > a > img style and should make your images the right height.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mel200Author Commented:
Thanks very much! Works now, and I'm afraid I already handed out the points. I've learned a few things, very much appreciated!!
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Development

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.