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.
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 am trying to get all images particularly from this website: http://web.archive.org/web/20160110012916/http://habibemaia.com/ . I can get almost all by gathering all "src" tags and downloading from there, but there are problems with the main picture which is changed by javascript either with timing or on a click event. I set up my webclient like this:
webClient.getOptions().setCssEnabled(true);
webClient.getOptions().setJavaScriptEnabled(true);
webClient.waitForBackgroundJavaScript(15000);
webClient.waitForBackgroundJavaScriptStartingBefore(5000);
webClient.setAjaxController(new NicelyResynchronizingAjaxController());
webClient.getOptions().setUseInsecureSSL(true);
After I got the div I try to use click like this:
HtmlPage newPage = div.click();
DomNodeList<DomElement> newImages = newPage.getElementsByTagName("img");
for (DomElement img : newImages) {
if (img.hasAttribute("src")) {
newImagesStrings.add(img.getAttribute("src"));
System.out.println("Image added: "+img.getAttribute("src"));
}
}
If I click on this div int the browser, a new image appears. Unfortunately this code does not trigger the javascript that changes the image. I have tried using
webClient.waitForBackgroundJavaScript(3000);
after click(), as suggested elsewhere, but no luck. The page does not change. Now I am out of ideas completely. Thanks for help.
webClient.waitForBackgroundJavaScript(15000);
webClient.waitForBackgroundJavaScriptStartingBefore(5000);
are both no option settings. The make only sense if you call them after some action - remove this from the setup part of your code.
Regarding the images: I did a quick analysis of the page with firebug. For me it looks like all the images are part of the code and the javascript only toggles the visibility (with some fancy effects).
Maybe something like:
find the div with class 'cameraCont'
iterate over all children with the style 'cameraSlide'
every of this div has an img child that points to a different image
Currently I have thumbnails, when I click the them a large version of the pic appears in the div directly to the right of the thumbnails. What I now want to be able to do is click the larger pic in the div and then trigger a lightbox that shows an even larger version of the pic.
I'm not quite sure how to do what I'm thinking is the solution so I'm gonna try and explain. I'm thinking that when i click the div to trigger the lightbox I want to take the src of the pic being click and then somehow redirect it to another src in my images folder.
Example:
When I click image in div I get the src of pic lets say that the source is:
src="redpic.jpg"
Then lets say in my images folder I have a larger version of the pic selected with the source:
src="redpic_large.jpg"
Would it be possible to manipulate the the src of an first image img src="redpic.jpg" by adding _large to the end and then appending this to my
lightbox???
Everytime I try to do things with my images I always seem to be running into problems.
say the src="redpic.jpg" when I check in the console the src goes to something like //139.0.0.1:56328/img/dotted.jpg and it seems to cause me a lot of problems
Sure, you can get the source of the image like this :
$("img").on("click", function(){
var source = $(this).attr("src");
});
This will give you the complete path (redpic.jpg).
You can use split() to get an array of both parts (the name and the extension)
var parts = source.split(".");
Now, all that you have to do is append the "_large" to the first part of the source, combine them back together and set your other image's source as the newly assembled one.
parts[0] += "_large";
var newSource = parts.join(".");
You pass the period . to the join function so that it puts a period in betwen your elements, instead of the default comma , .
All that's left to do is to use newSource as the source attribute of your other image.
$(".other-image").attr("src", newSource);
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'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