I'm new to the site, and relatively new to ASP.NET (at least commercially).
Bit of a funny problem here. I'm using a few JQuery plug-ins on the same page. What I'm trying to do is to show a thumbnail image preview when hovering over an image, and then switch the image to a different one once clicked, and show this image in a FancyBox - 3 separate images, if you will (let's call them A, B and C). All of this goes inside a slider (yet another JQuery plugin).
I've managed to get the image hover working inside the slider and even the fancy box for the same image; i.e. imgB hovers and imgB is displayed in the fancy box. The problem is that i can't make the switch to imgC when clicking and displaying the FancyBox. The problem is that both the image preview code and the FancyBox require an <'a'> tag, which obviously can't be nested inside each other. My Javascript code is as follows:
<script type="text/javascript">
$(document).ready(function() {
$("a#imgB").fancybox();
});
</script>
My html image code is as follows:
<a href="image/imgB" class="preview" id="imgB">
<img src="image/imgA" alt="Image A">
</a>
The above code displays the 'imgB' image as the hover, and displays the same image in the FancyBox once clicked. What I want to do is keep the hover as is, but switch the FancyBox image for another - imgC - once clicked. According to the FancyBox website, you can force the HREF to change by changing the HREF setting. I have tried a few variations, including this:
$("a#imgB").fancybox({
'href': href.replace('image/imgC.jpg')
});
But unfortunately this doesn't work. I get the feeling it's something really simple that's staring me in the face, but can't figure it out. I'd be grateful for any help.
Thanks!
Fixed it with a simple change to the script:
$("a#imgB").fancybox({
'href': 'image/imgC.jpg'
});
Looks like It ried to overcomplicate it. D'oh! :o)
Can you modify the hover plugin to take a div container instead? I don't think there should be a reason why you can only do a hover on an a link
Related
I want to use my gallery to work in little different way.
Now I have
<a href="/big-image.jpg" data-gallery="lightbox[gallery]">
<img src="/small-image">
</a>
It shows the gallery of different images (small images). If someone click on image, it shows big image in lightbox.
I need to improve it to show the image after hover it not on click. I can add ID or class to elements but I am stuck in how to do it with pure JS (can't use jQuery).
Thank you for show me the way or some tutorial.
i believe u want to use a modal, if so try this
https://www.w3schools.com/howto/howto_css_modals.asp
here instead of onclick event use onhover,
as
$("#id_of_element").hover(function(){
modal.style.display = "block";
};
you can do this with two approaches
1) remove image tag and set CSS property "background-image: url("paper.gif")" on anchor tag and same as change this property on hover
2)
document.getElementByTag("img").hover = function() {
document.getElementByTag("img")[0].src = "any url you want "
}
I've looked around and tried a few things I've seen on here to try to fix this issue but I can't seem to find out why. I have five images in the toppic class. I want to be able to hover over an image in the toppic class and change the big image (id = Biggin) in my screen with the image that is being hovered over, and then change back to the default when the mouse leaves the image. Is there anything blatantly wrong? I copied and pasted from a previous working function and I'm not sure as to what I did wrong this time.
$(".toppic").hover(function() {
var imgsrc = this.src;
$("#Biggin").attr("src", imgsrc);
})
$(".toppic").mouseout(function() {
$("#Biggin").attr("src", ".//Images/IMG_3604.JPG");
})
I had similar issues when starting out using jQuery, and there could be a few reasons why your code isn't working as intended. The most common reason mine wasn't working is that the jQuery script element was getting activated before the DOM existed.
Make sure that the jQuery script element in your html file loads after your DOM loads. You can place the jQuery script element at the end of the HTML file so your jQuery would be loaded after the HTML loads.
I hope that helps.
I've got a webpage in which I need to create a button that will switch the image displayed,
the image is a schematic of a building so I will need a button to select between levels, level 1, 2 ect...
On top of that I need a button that will toggle another image relative to the current image displayed on page, this image will toggle some extra details inside the image, but the button only has to link to another image file so thats no drama.
Any help will be appreciated as I have followed a few ideas with no success.
I'm thinking javascript would be easier for this project.
Thanks again.
I think the easiest way for a beginner is to use it this method:
For example you have a folder with images. And you have a page with one image that you want to switch and a button that will toggle it.
This is not functional example but it might give you an idea:
HTML:
<img src="img/img01.jpg">
<button id="toggler"></button>
JS:
var button = document.querySelector('#toggler');
button.onclick = function(){
var img = document.querySelector('img');
img.src = "new img url"
}
Now, jQuery might be easier way for you to do this, but it is not very different from this example.
I'd like to have a different logo on each "page" of my single page website http://goo.gl/16XdA (each page has a separate div). Is it possible, and how? Many thanks
That site is pretty nice, I don't understand why changing the logo would be hard for you.
Here is a simple way to do it, there are many.
<li class=""><a onclick="changeLogo();" href="#team">Team</a></li>
<script type="javascript/text">
function changeLogo(){
var logoImg = document.getElementById("logo").children[0];
logoImg.src = "newsource.jpg";
}
</script>
I would suggest pre-loading the various logos so that the switch is instantaneous.
What have you try? You can add event to your navigation: when user click on nav item, it change your current logo...
Something like this
$('#nav li').click(function(){
var selected = $('a', this).attr('href'); // This will return current item # like #team, #activities...
#change your logo based on selected
$('#logo img').attr('src', 'your url');
});
You can do this several ways with javascript. I'd shift the background position of a sprite-format image on the click event using jQuery or change the source of the image url altogether. Another method is to just add your individual logos to each of those nicely animated backgrounds you have going there (if you don't mind making the logos page-specific).
http://api.jquery.com/click/
http://api.jquery.com/css/
You can find which of your divs are currently visible
Check if element is visible after scrolling\
and then set the image in your logo div based on that.
I am using this photo gallery from Codrops to display the images. Instead of manually inserting the image links into the html, I'm using a PHP script to display the images from a directory. I am trying to call the php script using jQuery - something like this:
HTML:
<div id="thumbsWrapper">
<div id="content">
<?php /* include_once('display.php'); */ ?>
<div class="placeholder"></div>
</div>
</div>
jQuery:
$('#content').load('display.php');
However, that breaks the gallery and although it displays the images, nothing happens when I hover or click on the image. Firebug throws the error:
no element found.
Where am I going wrong?
I believe load will replace the contents of #content, which includes <div class="placeholder"></div>. If that div is needed for the gallery then it won't work.
Something like this should fix it:
$.get('display.php', function(data) {
$('.placeholder').before(data);
});
In addition, make sure this call to load happens before you initialize the gallery. If you initialize the gallery first and then add these images, depending on how the gallery is coded, it may not work.
Finally, what was wrong with the approach of loading it through the php (I see you commented it out). Seems like a good way to go to me.
use livequery plugin for newly added dom elements to work and function the same. livequery