JavaScript / jQuery gallery that supports images and swf? - javascript

I'm looking for a simple JavaScript / jQuery gallery with the following features:
There should be some thumbs on the page and a large image.
When a thumb is clicked the large image is replaced with with a large image of the thumb.
If a particular thumb image is clicked a swf is loaded in place of the large image.
It would be nice if there was a transition effect when the large image is swapped out when the next thumb is clicked.
I tried to build something, but it was too buggy. I have seen many galleries which support both images and swf files but they open in a lightbox and this is not what I want.
Does anyone have any ideas?

my friend one of the easiest and the best is pikaChose
Simplest demo fulfilling your needs
pika chose simple gallery
integration with lightbox/fancy box
fancy box pika chose
Just go through the code once and you wills surely love it

FeaturedContentSlider has the thumbnail functionality you mentioned, and is a jQuery slider that supports swf files (each slide accepts any html content you put in it, even if the demo dosn't illustrate that). Here's the link! http://css-tricks.com/examples/FeaturedContentSlider/

Related

What's the best way to preload all types of images?

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

Can Photoshop's slice tool swap images on a web page?

I have a Photoshop image that I have created for December 1st. This image will be used as a calendar for an intranet site. Like any normal calendar, it has a door that I wish the user to press. I have a copy of the original document and in place of the door when the user presses this I want to show the new image so it looks like the user has reveled what is behind the door.
I thought I could achieve this task using Photoshop's slice tool. I can achieve this if my calendar door links to a URL, but not another .jpg file.
I also thought I might be able to complete this in Flash by importing my .jpg file and creating a link, but once again I think this is just for URL's.
I know that there is a better way to do this but I am short on time. Would ActionScript in Flash enable me to complete this task?
My original web site that will contain this image is Visual Studio 2005. It has some very basic JavaScript which automatically loads the correct image for each day (since I need 25 of these for the month of December [Day1.jpg, Day2.jpg etc etc]). This works fine. I just need to create the calendar images for each day and the content behind the door.
Yes, a simple actionscript using flash will help you. You can create a document with a button (the button will be the door, you can fill up the background of the button with the door image). Your flash movie may contain 2 keyframes (1 with the default background including the image-button and another keyframe with the image to be displayed when button-pressed). Add some actionscript for the button (basically a GoToAndPlay(# of keyframe with the image) and also a "stop()" action on the image keyframe. Here is a basic example on YouTube Click here. By the kind of thing I guess you want, a little bit of flash animation will make it look better i.e. (door opening clip, 2nd image slide, etc)
As Chris said, a simple JavaScript image swapping code will work too. Here are a couple of examples in StackOverFlow Click Here.
Also you can try some CSS, for example a DIV with the background door and a Hover action that sprite the background to the calendar (click would not be necessary, just hover). Here is a video
I hope any of those solution will work for you, I recommend the CSS one, because it can work with mobile devices, don't require javascript to be enabled, and it's fast and easy.

new to javascript- image gallery- thumbnails expand to full size when selected

work in progress- live site
I have a gallery page with several sub-pages. Each sub-page has a row of thumbnails on the left. When one of the thumbnails is selected, it will show larger on the right. This is a Wordpress site, but I've been told that JS might be the best route to take. I'm fairly inexperienced with JS, so I'm unsure of how to go about this.
How do I go about showing the thumbnails and the selected image?
There are lots of jQuery (jQuery is very powerful!!) gallery plugins can do what you need. Check out this awesome site awesome jQuery tutorials, there are many detailed tutorials about how to build inspiring image gallery.
Except JS/jQuery, you also need to know how to use Html && CSS.
The basic idea is show/hide(static or load by ajax dynamically) your big image when hover() your thumbnails.

Image scroller with jQuery that supports image pre-caching

A good example of what I need to implement can be seen at http://www.gojee.com There, different images of food are scrolled effectively, image to image with javascript, and the sript supports next image pre-caching. Their JS is obfuscated and minimized, so I can't just "look" how they have implemented it.
Can anyone point to a jQuery plugin that allows to "page" images with embedded pre-caching of a next image, but without a knowledge of an entire list like jQuery Tools "Scrollable" control?

Ajax Image Gallery Uploader

I was just wondering what is the best image uploader with a gallery and ordering abilities. What I had in mind was a back-end page that has thumbnail images to the left, and an image upload panel to the right. When an image gets uploaded, the thumbnails in the left gets updated. I also need a delete function on all of the thumbnails; maybe when they hover over an image, an "x" could appear, which when clicked, will delete the image. I'll also need dragging capabilities so that the user can rearrange the ordering of the images.
I was hoping for all this to be using javascript and ajax. I think it should be possible because I can find each piece from separate plugins, but I want one that encapsulates all of them together.
you have to use Uploadify from http://www.uploadify.com/demos/
and customize it as u need.
there is no prebuilt solution for your case.

Categories