I'm having a helluva time figuring out how to accomplish this - and I'm surprised it isn't a more common occurance throughout the web, though I digress.
I'm building a small site that I'm trying to keep on a single page - in the end the site will live on a USB, so things should be as self-contained (file wise) as possible. Currently I've got a navigation menu (ie- Page 1, Page 2, Page 3) vertically, and when you select an link from the menu new content for that section comes up. I've got this part down - more or less - thanks to modified Coda-Slider script (See here: http://codysilfies.com/orn/).
The part I can't figure out is that in addition to changing the content when clicking a menu item, I would like to also change the backgroun. So Menu_Item_1 will show BGImage1.jpg, Menu_Item_2 - BGImage2.jpg, and so on. Something pretty much like this: http://brewfestgb.com/#!/merriment - though there are a bunch of additional features on that page...that I can't really figure out how to whittle out. There's got to be a simpler way to do it.
There are a ton of 'click a single link to change an image' tutorials around - but nothing with multiple links. I also tried using the same slider code for the background - but I can't make the image resize to the size of the browser window AND get the slider to work (it needs a set width apparently - which is workable for the content bit, but not when I want the background to resize with the browser).
Any advice...or leads? Seems to me someone should know something. Thanks in advance!
You can change the background-image when the click handler is fired:
$('a.link').click(function(){
// Find the image value
var background = 'BGImage' + $(this).data('bg') + '.jpg';
// Change CSS background-image
$('body').css('background-image',background);
});
Your links would have to look something like this:
Link 1
Link 2
Link 3
Related
I am trying to create a responsive navigation menu. I found some tutorials online and after finding one that I liked the style of, I followed the directions to create it on my website, but I can't seem to get a couple features working.
1: I can't get the hover effect to work that adds a bottom border to the icons/links to help accent the one that is in focus.
2: When getting down to a screen size that is below 32.5em (519px), the menu is supposed to become a single column menu that folds up. The menu does become a single column, but it doesn't fold up into a button like it is supposed to. It keeps displaying all of the links which takes up a lot of vertical space.
Here is a jsFiddle of my project so you can see what I have so far:
https://jsfiddle.net/4Ljs1bfn/1/
You need to use the js detection that the example uses.
Add class="no-js" to your body element.
Then on load, set document.body.className = "js" (or equivalent).
This will enable the menu.
For the :hover problem, you need the class="no-touch" on your body element (then remove it using js if a touchscreen is detected).
Another thing: You have a html error at <a href="...""> on line ~8 (that extra " at the end).
Updated fiddle: https://jsfiddle.net/4Ljs1bfn/2/. You still have some css issues, but I assume you can fix them yourself.
I am building a site that has a small preview image of a map at 281 x 348. I wanted to make a way to click the image to see it full size, which would be very zoomed in, at the original image size which 1066 x 1600. However, I wanted to get fancy and make the image pop up within the same window, dimming the page behind it.
So I got Lightbox 2 to fully work, and the image displays as a popup, but it is pretty small. I want to have it large and, what I'm assuming is the best option, is to be able to scroll up and down the image.
How should I go about doing this? Every code for Lightbox including the jquery I got directly from here.
I haven't tested in Lightbox2, but it looks like in lightbox.js there is an option named this.fitImagesInViewport. Try setting that value to false and see if it gets the result you're looking for.
Edit: I ran a quick test, and it looks like that should do it. You can take a look at the source for lightbox.js here, so hopefully the change in your code should be fairly trivial.
There is a piece of functionality that I am trying to emulate on a .net e-commerce site, where you have a target area (I'll use the term "window" here, but I'm not talking about an actual window, more a div) which contains a large image. Next to the large image container, there are several smaller thumbnails. I want to emulate the functionality where as you either mouseover or click on the thumbnails, it refreshes the larger window with the fullsize version of that thumbnail. I guess it's a lightbox at the end of the day.
This isnt one of those cases where I've googled around and can't find any solutions... actually the polar opposite, i've found too many of them. I'm asking the community if there is any prebuilt script that is better than the others, or if anyone has done anything custom like this that's easy to implement. We aren't talking about pages of thumbnails here, maybe 2-3 per image. Again, I'm not trying to pop it in a lightbox, but refresh a div thats already inside the page.
What is structure of those divs?
If I get it right. Each thumb has responding to it 'big div' that is shown when clicked.
I would join then each small div with big via and attach action:
var b1 = $('#big1');
$('#small1').data('big',b1).click(function(){
var big = $(this).data('big');
big.someShowFunction();
});
I just need to display the images in the very center of the page. The images will be different widths but should still be centered. I have custom arrow pointers and I want the other images to be hidden while the other fades out and a new one in.
I've found jquery cycle and stuff but I couldn't center the slideshow to the center of the page for some strange reason.
Any advice?
What plugins can I alter (just replace images) to get what I want?
http://www.proglogic.com/learn/javascript/lesson10.php
not sure if you are still looking for this, as its been awhile since your post - but this is a very simple slideshow using javascript and a table. the image is displayed with "previous" and "next" links below, which can of course be changed to whatever you want. the only possible issue is that it uses html tables which are frowned upon (unless completely necessary). it is however, very easily center-able using css. good luck!
Checkout Anything Slider. That seems to be what you are looking for.
Hello I'm quite new to using jQuery and I was trying to create a menu that showed different pictures when you moused over the links. It will show one picture and hide 4 others and when you mouse off a link it will go back to a default picture. I'm using the hover function but sometimes when I moved the mouse to the bottom both images (the one related to the link and the default) both show up and I was wondering if there was some check I could do to make sure that this didn't happen. Here's what my code looks like.
$("#blog-img").hide();
$("#contact-img").hide();
$("#headturner-img").hide();
$("#work-img").hide();
$("#blog").hover(
function(){
$("#default").hide();
$("#contact-img").hide();
$("#headturner-img").hide();
$("#work-img").hide();
$("#blog-img").show("slow");
},
function(){
$("#blog-img").hide();
$("#default").show("slow");
}
);
I would love any help I could get on this.
You are possibly creating a race condition by using timing to show the images.
When both images are shown it's probably because the at least one of the Shows has been executed before the first executed one completes. This can happen when you move fractionally -we're talking pixels - into/out of the object with the hover.
I recommend using CSS to resolve this. It's much cleaner than using Javascript.