Not sure this is the sort of question I should be asking here but here goes...
I'm looking to find a flash or javascript applet that can display say 5 images and at the bottom of the images there is a tab with a number on that you can use to jump to that image.
I can't think of a way of searching for this particular thing, and I can't even find an example! The nearest I can say is that it might be on a news site with different images for different stories and you would click on the image for the story that interests you or select the numbered tab at the bottom.
Does anyone know what I'm looking for or where I can find this in action so I can use it as an example? Could be Flash or javascript i think...
Thanks!
I suppose you want something like this http://cssglobe.com/lab/easyslider1.7/02.html
This above plugin ( Easy Slider 1.7 - Numeric Navigation jQuery Slider ) supports this out of the box..
Related
Ey. I've seen the other post about Lightbox gallery effect for Flex, but after having played around with it I cant seem to get it to work 100% (The image is as small as the thumb, and I cant make it bigger). And this also lacks some functionality I'd like to have.
So, one example would be, of course, this: http://lokeshdhakar.com/projects/lightbox2/
If you click any image on the image set you can swap between them with an arrow. This is what I'd like to have.
Also, it would be nice if it was possible to display the thumbnails for the other images in the same set under the bigger picture(when one image is already clicked).
I've tried to search for components like this, but I cant seem to find any other.
If any of you know of any nice components or snippets of code for this kind of effect then please let me know! =)
Kind regards,
Stian Berg Larsen
EDIT:
So I've searched around and tried a number of examples, but I cant seem to get any of them to work. There is always an error, and none of the examples are exactly what I want.
I simply need a way to show images like Lightbox. With a prev/next arrow and maybe a close button. Nothing more than that. How would I go about making this, or use an existing component?
Im using a TileGroup to hold all my thumbs (so that they will fill out the width of the Group with more images if there are room for it). If it's possible to generate this list of thumbnails dynamically too then that would be great, but basically what I need is to show images with a Lightbox style when I click them.
Thanks! =)
I ended up just making my own lightbox effect. :)
Created an Actionscript class (based on Group) and added image loading functionality, prev/next/close buttons and borders and such. Works like a charm :)
I have an image of a living room, which I'm turning into a menu for a new site I'm working on. The idea is that you can click on certain items in the room, like a chair, desk, couch, etc and get taken to the desired page. I'm wondering if there is a clever way of doing this. Since the items are not simple shapes, I don't want to use a standard image map.
Thanks for you help!
I'm answering because a Google search brought me here...
Because you asked for a tool:
GIMP Has a really good Image map creation function.
Open your image in GIMP and select Filters > Web > ImageMap
From there you can create image maps by drawing on the image. Saving will generate HTML you can then tailor to your needs.
This tool looks to be a solid image mapper: http://www.image-maps.com/
I'd suggest doing this with a canvas and SVG's, it would make this quite a bit easier, and more professional.
As Korvin mentioned, doing this in SVG is probably the easiest option, because you can attach events to objects in SVG rather than having to manually specify a particular area in which to listen for events.
If you go this route, I recommend using the RaphaelJS library which has a nice syntax and the advantage of working in IE pre version 9. Here's a demo which, although it uses onmouseover instead of onclick, it might be close to what you're trying to achieve:
http://raphaeljs.com/australia.html
I currently have a basic Fancy Box gallery (link calls larger image and title that is then displayed in the Fancy box).
How/ What would be the best way to integrate a comments system into this? Each photo has member comments but I need a way to show these next to the photo in Fancybox.
You may consider my fancybox "a la" Facebook ;)
http://www.picssel.com/playground/jquery/fancyboxALAfacebook_26Mar12.html
You could insert any html in the right area.
Simple, Just like you display each picture with their independent comments, you will just display them into a larger box on click on a picture. just like facebook. Use whatever ajax u are currently using in the page into the box.
im building a webshop in Drupal and i was wondering if you could help me with the following problem:
I got one big image frame (500x500) and 5 little image thumbnails(95x95) underneath the big one.
How can i realise that if the visitor clicks on the thumbnail, the big image frame gets filled with that specific image?
jQuery is the right direction, but the strength of Drupal is based on doing things "the drupal way", which means, I guess in your case, to use Views as the origin for the thumbnails using imagecache + lightbox, and somehow change the main "frame".
I used jcarousel in some cases (for different but similar uses) and it works nice. I guess it is possible to trick it to do what you need, or - better - to find an existing module that do what you want.
I know, many Drupal buzzwords, and a stiff curve to overcome, but this is the right direction in case you want to base your site on Drupal.
If you don't need all of these, and want a static page+jquery, Drupal might be an overkill altogether.
If you use Views, Imagecache, and the Lightbox2 module, you can create image galleries out the arse and tell it to link the field to its large size and use Lightbox2 as the method. This is how I do most of my galleries.
Drupal uses jQuery so you can write a simple jQuery script to handle this (not sure if there's already a plugin to do that). Just add all the img tags (make sure all of them except the first one are hidden[display=none]). Then when a thumbnail is clicked/hovered do a $(big_img_holder).replace() with the tag for the image to be shown. Tell me if you want to see some code and I'll try to show you.
You can see this plugin as an exapmle. Just replace the numbers on the right with thumbnails and you're ready to go ;-)
At which level in Firefox the active zone around active areas (text and image hyperlinks) is defined ? I would like to experiment ways to extend them to ease the use of touchscreens for the web...
After discussions with some Mozilla folks, I tried to implement a solution using javascript with a Greasemonkey script available at http://www.splitted-desktop.com/~flepied/touchscreen/touchscreen.user.js. It tries to find the nearest link when you click on something that is not active.
The only way I know of is via the CSS property padding.
This is mostly not browser-specific, but determined by the layout information (in html or css). Basically, the area that the "link" element occupies is the clickable area. If you need a larger area, you have to make the element larger .. increase the text that is clickable, increase the font-size, increase padding (which might look strange).