Jquery cycle scrubber plugin: adding links to images - javascript

I'm using this jquery plugin which lets you scrub through images:
http://thespiral.ca/jquery/scrubber/demo/
I'm trying to add a link to each image, like this for example:
<div id="basic">
<img src="images/beach1.jpg" width="200" height="200" alt="Beach1" />
<img src="images/beach2.jpg" width="200" height="200" alt="Beach2" />
<img src="images/beach3.jpg" width="200" height="200" alt="Beach3" /></div>
But something in the script seems to be blocking links, and no matter what I do the image have a "#" link.
Can anyone help?
Update:
I put up a jsFiddle: http://jsfiddle.net/qdGXZ/

The problem may be in jquery.cycle.all.min.js. There is a code in it that may cause this kind of behaviour. Here it is:
else{a=''+(i+1)+"";}
Comment it and see what happens. This was the only piece of code in the given example that could cause this.
To fix this you need to pass href attribute defined by you to the else case and do something like this:
else{a=''+(i+1)+"";}
I don't know if this will help. Just can't do much. Now you know what is the problem and what you should do to fix it. The rest is up to you.

Related

How to put the ALT-value of an image into a variable in javascript or jquery

I’ve made a cardspread program that is based on the source of the image. It works allright, but it is loading slowly, because now 78 different cards are loaded. I like to speed up the loading and I thought I needed an extra item per DIV. So I added an ALT-tag to each image. Like this:
<div id="kaart1">
<alt=kaart14.jpg>
<img src="images/kaart1.jpg" width="110" height="180" onclick="showDiv(event)>
</alt=kaart14.jpg>
</div>
Now I need only 1 image to load 78 times, which is faster. The problem which I am facing now is that I want to read the alt value into a variable (in this case: kaart14.jpg).
I’ve tried :
$('.status').click(function() {
var status = $(this).attr('alt');
});
But that stays empty. Does anyone have a suggestion how to solve this in Javascript or jQuery?
First, there is no <alt> tag. It is used as alternative to <img>. The value is displayed if the image is not loaded.
It is just plain text. If you put a url there, it will just display the url and not the image itself.
Eg:
<img src="myphoto.jpg" alt="This is my photo">
There is no performance gain if you use alt or not, but you definitely SEO
Your alt attribute should be like
<div id="kaart1">
<img src="images/kaart1.jpg" alt="kaart Image" width="110" height="180" onclick="showDiv(event)>
</div>
alt is an attribute of the img tag,its not a tag itself.And as #Bergi said,the alt attribute will not be an another image.It may be the description.

How to get an iframe to show when hidden?

I have an image that I want the user to see. When the user clicks on this image I want the image to go away and have the video show in it's place. Can someone show me how to do this?
Here is the code I have so far.
<div id="homeflash" style="height:413px; background-image:url(../../../upload/1/img/homeFlashBG.jpg);">
<a href="#">
<img src="../../../upload/1/img/video.jpg" style="display:none" />
</a>
<div id="video" style="display:inline">
<iframe allowfullscreen="" frameborder="0" height="395" src="//www.youtube.com/embed/X8mLel_werQ?rel=0" width="691"></iframe>
</div>
</div>
If someone could edit my post to clean the code up that would be great. I can't figure it out.
To describe the code a little bit:
This is what the code should look like after I click on the image. When you first see the page, the two display styles will be reversed.
Any help will be awesome.
Thanks
A general Idea can be like this:
$(function() {
$("img").click(function() {
$(this).css("display","none"); // will hide your image
$("body").append("<div id='video'></div>"); // will append div with id video, this div should have video code inside this.
});
});
You want to hide the video initially, so give it the style display:none. You also want to give your thumbnail image an id so you can reference it in jQuery. You can also remove the <a> tag from around the image (its not needed)
HTML
<div id="homeflash" style="height:413px; background-image:url(../../../upload/1/img/homeFlashBG.jpg);">
<img id="thumbnail" src="../../../upload/1/img/video.jpg" />
<div id="video" style="display:none">
<iframe allowfullscreen="" frameborder="0" height="395" src="//www.youtube.com/embed/X8mLel_werQ?rel=0" width="691"></iframe>
</div>
</div>
JavaScript
$(document).ready(function(){
$("#thumbnail").click(function(){
$(this).hide()
$("#video").show()
})
})
I would also try to avoid adding CSS styles inline if you can

Image thumbnail is not loading and onmousehover my images move up when hovering over an image?

?I am having an issue with a website i uploaded to test. They all work work fine when they are checked locally in Dreamweaver cs6 but when uploaded they do this, Roll over the images you will see the problem, when hovering over Texas longhorn image there is a problem and the Michigan state image isn't loading Anyone see my error.
Here is the code that matters Thanks for any help And the link to the site page http://odintest.co.nf/product_select.html
<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a;
}
</script>
<div id="main_img">
<img id="img" src="images/placeholder.jpg"/>
</div>
<div id="thumb_img">
<img src='images/notredamelogo.JPG' width="200" height="150" onmouseover='changeImage("images/notredame.JPG");'>
<img src="images/ohiostatelogo.jpg" onmouseover='changeImage("images/ohiostate.jpg");'>
<img src='images/michiganstatelogo.jpg' onmouseover='changeImage("images/michiganstate.jpg");'>
<img src='images/floridagatorslogo.jpg' onmouseover='changeImage("images/floridagators.jpg");'>
<img src='images/texaslonghornslogo.jpg' onmouseover='changeImage("images/texaslonghorns.jpg");'>
</div>
I don't know what problem you're describing, but I'm guessing a hover delay. Use a javascript preloader or load them in a div with styles along the lines of {position: absolute; left: -999em;} to keep them offscreen. This makes the images available immediately on hover, where normally you'd see a delay while they're downloaded.
The image at http://odintest.co.nf/images/texaslonghorns.jpg doesn't seem to exist on the server.
Well I see 2 issues.
For me the "notredamelogo.JPG" did not load. Probably because of "JPG". Try "jpg" instead.
Main image does not load for texaslonghorns. That might be because the image does not exist in that directory and/or the image name or extension is not right.

Javascript loading an image on hover over a link

i am new to java script and i am designing my web site but i want to load a new image on a particular place of my web page when a user hover over the home,here is the code.
<html>
<head>
</head>
<body>
<img src="yourImage.jpg" alt="Home" id="image1" onmouseover="image1.src='home.jpg';" onmouseout="image1.src='myImage.jpg';" /> <br />
Hoover Me!
</body>
</html>
This code is not working.Please Help me to find out the error in code.
You have to use the method document.getElementById() to get the image object before try to manipulate it:
<body>
<img src="yourImage.jpg" alt="Home" id="image1" onmouseover="document.getElementById('image1').src='home.jpg';" onmouseout="document.getElementById('image1').src='myImage.jpg';" /> <br />
Hoover Me!
</body>
You should consider using JQuery to do this kind of stuff.
image1 doesn't have any meaning. You will need to use
document.getElementById('image1').src instead of just image1.src.
You're missing the starting quote for the onmouseover attribute of
the a tag.
In addition to not using document.getElementById, you'll also encounter a lag on mouse over, unless the image has been pre-loaded.
You can not refer to the img as image1.src first you have to assign image1=document.getElementById('image1') then you can refer it as image1.src. There is also a much simpler method to do that. You can also refer to the current image or object as this.src in JavaScript. See the corrected code with changes bellow:
<html>
<head>
</head>
<body>
<img src="yourImage.jpg" alt="[ Home ]" id="image1" onmouseover="this.src='home.jpg';" onmouseout="this.src='myImage.jpg';" /><br />
Hoover Me!
</body>
</html>
To access the img element from it's own inline attributes, you need to use the 'this' keyword:
<img src="yourImage.jpg" alt="Home" id="image1" onmouseover="this.src='yourOtherImage.jpg';" />
Rather than do it inline, you could also use a javascript library, like jQuery, as detailed here, which would give you more flexibility if you want to do more later e.g. add animations, but that's up to you and how much of a challenge you feel like :)

Images showing as broken when they shouldn't

I do not understand why the images on my site shows up as broken, if you could have a quick look at: http://www.lamcallum.com Is there someone that can solve this mystery? Any replies would be appreciated...
UPDATE: Issue is resolved.
Give your <img src="1pixelsquare1.gif"> //grey color image then it will work perfectly fine.
Your Code for each box
<div class='fade' onMouseOver="JSFX.fadeIn('button')" onMouseOut="JSFX.fadeOut('button')">
<img name="button" class="imgFader" width="100" height="100" border="0">
</a> //extra coded - remove it
</div>
Every box Img should have the "src" like this
<img name="button" class="imgFader" src="1pixelsquare1.gif" width="100" height="100" border="0">
It appears that on initial load, your images do not have a source. Which would explain why they are broken. Once mouse-over-ed they do.
ETA: More detail. The image tags do not have anything in the src property. Either in code behind, the html you have coded or js. If you post your original code I can help more.

Categories