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();
});
Related
I'm trying to create the effect of zooming in on a webpage but focusing on one particular element and allowing navigating / scrolling to be present.
I found a few plugins online but none do what I'm really looking for and I've found nothing else. Fancybox, Zoomooz etc are great but I need to be able to scroll.
The element in question is a PDF document. I need the user to be able to zoom in and still navigate up/down the page.
Possible?
Here is an example of what you could do... http://www.sitepoint.com/html5-javascript-mouse-wheel/ and http://blogs.sitepointstatic.com/examples/tech/mouse-wheel/index.html
However I would consider the above as a secondary option. There are many other ways to present the presentation and embed it onto your page. A slider is limited to "slide" only. You can for example use a presentation software and embed it onto your page as a widget e.g. http://prezi.com/ as freeware.
Hope that helps.
I want to preload all images on my page.
My page has some images used directly as links, i.e. as img tags within an a tag, as well as some images which are in the background-image property of some spans.
What's the best way to preload them all? I notice that a lot of the preload scripts seem to assume that the images will be loaded within image tags. For example, I've implemented this script: http://www.javascriptkit.com/javatutors/preloadimagesplus.shtml
But it doesn't make a difference on my page where certain spans when hovered over should have a new background. There's still a pause on my page when the user hovers over an element, before the right images background shows up.
Edit
I know about using sprites, my question is asking for a solution apart from sprites.
The following jQuery plugin was featured on http://www.unheap.com a while ago. Could this be of service?
http://nick-jonas.github.io/imageloader/
I do notice that the Github repository is "unavailable due to DMCA takedown", but maybe it could point you in the right direction.
Another solution might be this plugin:
https://github.com/sebarmeli/JAIL
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
I'm creating a photo gallery website, and there are pages for browsing the photos, with a listing of thumbnails (yes just a regular photo site). The problem is that, I want thumbnails to fill up the available space (I know how to get that one). Actually, what I want to achieve is very similar to this: imagine you have a big number of (more than the screen area allows) thumbnails, and you have set overflow-y to hidden. The thumbs just fill up the space and it goes, off the screen. This would be what I wanted to have if the thumbs in the bottom didn't go off the screen. I need something more, let's say, "dynamic". I've got jQuery, but haven't been able to model the desired effect in my mind.
You should load the images dynamically as needed to improve performance. See the "Reduce the Number of DOM Elements" section in the Yahoo! Best Practices for Speeding Up Your Web Site. Use jQuery to check the size of the div in which you are rendering the images. Load just enough images to fill the div and then load more images on the fly as needed (on window resize or scroll). It is not clear to me exactly what you want to achieve so I can't be more specific than that.
Ok found the way into it anyway. I just load a big number of thumbs, set the overflow-y of the thumbs container to hidden, and by Javascript (actually jQuery), when I resize the window check if the thumbs top + height exceeds window's height. if it does, I simply hide that thumb, if it doesn't I simply show it. It works great!
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.