In my page I inserted a PrettyPhoto gallery.
<a href='javascript:void(0);' rel="prettyPhoto[01]" onClick="href='image01.jpg'">
<img src="image01.jpg" width="200px" />
</a>
<a href='javascript:void(0);' rel="prettyPhoto[01]" onClick="href='image02.jpg'">
<img src="image02.jpg" width="200px" />
</a>
<a href='javascript:void(0);' rel="prettyPhoto[01]" onClick="href='image03.jpg'">
<img src="image03.jpg" width="200px" />
</a>
I used onClick event to hide URL in status bar. But, when I try to visualize the photo gallery I view only clicked image.
How it's possible to resolve this problem?
I don't think setting the href like this will work, try location.href instead
Related
Hello I have this code:
<!-- Button that triggers the popup -->
<button id="my-button">POP IT UP</button>
<!-- Element to pop up -->
<div id="element_to_pop_up">Content of popup</div>
And I have this image:
<img src="botones/bannerdiseno_audifonosinpilas.png" width="160" height="33" alt=""/>
</a><a href="tecnologia.html">
I want to know how to change the link on that image to do the same the button does, whats the syntax that I should use, so whenever I click the image it'd trigger the button action and remove the button itself
Thanks
<img onclick="document.getElementById('my-button').click()" src="botones/bannerdiseno_audifonosinpilas.png" width="160" height="33" alt=""/>
or
<img src="botones/bannerdiseno_audifonosinpilas.png" width="160" height="33" alt=""/>
You can use input type="image"
<input type="image" src="submit.gif" alt="Submit">
I have a WooCommerce setup where I have a gallery. One is big image and others are thumbnails.
What I want to do is when someone clicks on the thumbnail, it replaces the big image and the big image comes there at the thumbnail. How do I do that? Any JavaScript guru here to help?
Here is the full HTML output.
<div class="images product-gallery ">
<div class="big_image">
<a title="" href="http://www.domain.com/image001.jpg" itemprop="image" class="woocommerce-main-image zoom"><img width="300" height="300" alt="" class="attachment-shop_single wp-post-image" src="http://www.domain.com/image001-300x300.jpg"></a>
</div>
<div class="thumbnails">
<a title="" class="zoom first" href="http://www.domain.com/image002.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image002-90x90.jpg"><div class="numbers">1</div></a>
<a title="" class="zoom" href="http://www.domain.com/image003.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image003-90x90.jpg"><div class="numbers">2</div></a>
<a title="" class="zoom last" href="http://www.domain.com/image004.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image004-90x90.jpg"><div class="numbers">3</div></a>
<a title="" class="zoom first" href="http://www.domain.com/image005.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image005-90x90.jpg"><div class="numbers">4</div></a>
</div>
<div class="clear"></div>
</div>
I don't need that <a href=" part on image. So, you can ignore them.
I have very little knowledge in JavaScript, so please help me out. All I want is when someone click on any of the thumbnail image, the thumbnail image replaces the big image and the big image replace the clicked thumbnail. So basically the alter positions.
Please pardon me for my poor English.
Jquery
You can use src attr() in onclick event
$("#target").attr("src","newUrlOfTheImg");
or with plain java script
document.getElementById("target").src="newUrlOfTheImg";
And have look once
document.getElementById("target").src="myNewImage.extension";
Pure javascript alternative that you can use on the onclick event.
$(document).ready(function() {
$('.zoom').on('click', function() {
$('.big_image').find('img').attr('src', $(this).find('img').attr('src'));
});
});
You should try this out, however it would be better to have separate thumbnail and big-images files for loading purposes.
Is it possible to put an image onto a webpage that changes depending where the cursor is?
Current Code:
<body onload="MM_preloadImages('Images/Home.png')">
<div class="HeaderWrapper">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','Images/Home.png',1)">
<img src="Images/NavigationBanner.png" name="Image2" width="1300" height="150" border="0" id="Image2" />
</a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','Images/Home.png',1)">
<img src="Images/NavigationBanner.png" name="Home" width="1300" height="150" border="0" id="Home" />
</a>
</div>
I was thinking it could be modified some how to use this?
<area shape="rect" coords="434,54,495,83" href="index.php" target="index.php" alt="index" />
Search how to respond to the hover event.
Search how to toggle a CSS class on an HTML element.
When the image is hovered, toggle the class of the HTML element such that a different CSS class is used. This different CSS class will have a different image.
It might be easier to use jQuery for this.
With Fancybox 2 the example below works flawlessly (left out other code)
<a class="fancybox" href="https://si0.twimg.com/profile_images/2169856486/avatar.jpg" title="some title">
<img src="http://a0.twimg.com/profile_images/2169856486/avatar_normal.jpg" alt="" />
</a>
but the code below load the image on a separate page
<a class="fancybox" href="https://api.twitter.com/1/users/profile_image?screen_name=boris&size=original" title="some title">
<img src="http://a0.twimg.com/profile_images/2169856486/avatar_normal.jpg" alt="" />
</a>
The problem seem to be with the image URL the Twitter API supplies which returns a (301) redirect to the actual location of the full image. Is there any way i can get Fancybox to work with images that are supplied using a redirect and that the popup window still has the size of the served image.
Help would be appreciated.
Frank
Since the second code/link doesn't contain an image extension (jpg, gif, png), fancybox cannot determine what type of content is trying to open so you need to tell it.
Either do :
One: Add the type option to your custom script
$(".fancybox").fancybox({
type: "image"
});
Two : add the data-fancybox-type attribute to your link
<a class="fancybox" data-fancybox-type="image" href="https://api.twitter.com/1/users/profile_image?screen_name=boris&size=original" title="some title"><img src="http://a0.twimg.com/profile_images/2169856486/avatar_normal.jpg" alt="" /></a>
So I've got some buttons, which people can press to hear audio files. Of course, the audio files can't "overlap" because that would be a mess. This works, but now I want one of the files to play automatically when the website loads, still maintaining the fact that it will stop whenever I press another button.
This is what I've got so far:
Head:
<script language="javascript" type="text/javascript">
function playSound(soundfile) {
document.getElementById("dummy").innerHTML=
"<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"false\" loop=\"true\" />";
}
</script>
Body:
<span id="dummy"></span>
<p style="text-align:center;">
<a href="#" onclick="playSound('Sound1.mp3');">
<img class="alignnone" width="128" img src="Img1.png" ></a>
<a href="#" onclick="playSound('Sound2.mp3');">
<img class="alignnone" width="128" img src="Img2.png" ></a>
<a href="#" onclick="playSound('Sound3.mp3');">
<img class="alignnone" width="128" img src="Img3.png" ></a>
</p>
Try this jquery solution:
http://archive.plugins.jquery.com/project/sound_plugin
I used this successfully in a reaction time test where I had to play a sound just before each test.