Show image after hover, not on click - javascript

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 "
}

Related

Switching between images with a button

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.

Add the alt attribute to light box slideshow title?

I am using Nivo Lightbox plugin. I am also using CMS surreal. I want the clients to be able to change the title of the images in the Nivo Lightbox slideshow. The titles to the slideshow are given in the anchor tag that surrounds the image tag, with the title attribute declaring the title displayed on the slideshow:
<img src="images/1.jpg" />
The CMS editor only gives the client the option to edit the alt attribute of the image. Therefore I need to swap the title attribute of the anchor to the alt tag of the image.
Question: How can I make the title of the slideshow link to the alt attribute of the image tag instead of the title attribute of the anchor surrounding it?
I can't find any option in the plugin; without any change to the HTML (or DOM changes) my actual solution (but I think can be improved) is to use the beforeShowLightbox and afterShowLightbox events to get the child img alt attribute and set it in the lightbox title.
Code:
var altText;
$(document).ready(function () {
$('#nivo-lightbox-demo a').nivoLightbox({
effect: 'fade',
beforeShowLightbox: function () {
altText = $($(this)[0].el).find('img').prop('alt');
},
afterShowLightbox: function (light) {
if (altText!=="") $($(light)[0]).find('.nivo-lightbox-title').html(altText);
}
});
});
Demo: http://jsfiddle.net/IrvinDominin/MH8mu/
To not change CMS neither Lightbox plugin code, I would use watch plugin to get noticed whenever alt attribute has changed and after that change title attribute.
with jquery:
$('[data-lightbox-gallery] img').attr('alt', $('[data-lightbox-gallery] img').parent().attr('title'));
Later edit: i don't know if i missunderstood you, but seems like you wanted the exactly reverse thing i've wrote:
$('[data-lightbox-gallery]').each(function(){
$(this).attr('title', $(this).children('img').attr('alt'));
}

Single page website and one different logo per div?

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.

HTML buttons in javascript codes

I am working in a software which has its interface written in JavaScript
I am trying to add an HTML button to the interface by defining a button in the HTML main code, check how I did this http://dpaste.com/691324/
The problem is,, the button appears before the page loads, maybe because the HTML loads before the JS files, I don't know exactly !!! But it really looks ugly, when the button show before the page, and I want to find some trick that can delay the button or to be loaded at the same time with the javascripts..how is this possible?
I am not a javascript person, but if you are using JQuery, it should go something like this
$(document).ready(function() {
document.getElementById('divId').innerHtml = '<input type="button" value="button">';
});
'divId' would be id of Div tag (place holder) covering input tag.
Or you can also call some plain javascript function which sets innerHtml of 'divId' on 'Body' tag's onload event,
Well I think is that you should use an anchor instead, and if you want, style it as a button. Here is the way to create the button with pure JS:
var anchor = document.createElement('a');
anchor.setAttribute('href', '/opentripplanner-tripArabic/index.html');
anchor.setAttribute('class', 'please use CSS'); //inline styling is dirty
anchor.innerHTML = 'use the Arabic interface';
document.getElementById('header').appendChild(anchor);
I recommend to use anchors because you are not using a form, and you only pretend to redirect the user to another page. Either way if you want still the button, you can use document.createElement('button'); and asign the property onclick: button.onclick = function(){... instead of the href setting.
Another thing you can do is to hide the button with CSS: display:none and on load wet the element and remove the style: button.style.setProperty('display', ''); or either way use the CSS propperty visibility: hidden.

JQuery Fancybox - trying to change url of image once clicked

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

Categories

Resources