jquery image slideshow with links per image - javascript

i'm in search of a simple jquery image flipper/fader, that will cycle through a bunch of images, each of them with it's own link.
the flipper will be used like so: my client wants to display logos of his own clients in succession where each logo will link to the respective website.
i know this can be implemented in flash, but i (and my client) think it would be cool if it's implemented in jquery in such a way that the outgoing links are visible to google. i have seen some jquery plugins and code that implement galleries, but they were either too complex or too simple, anyone got a code snipplet that would do this?

google the cycle plugin

Related

Managing Image Map, managing interaction with the area maps

I'm currently working to develop a real estate website for a client. The client is stuck with the idea to create something like this :
http://woodfield-sillery.com/plans/
Basically, I'm looking to find a way to recreate the same thing, technically it would require :
Managing image map behaviour (to be able to react to mouseover)
Managing the onclick to open a view of the selected floor
Once selected, a second map would show of the floor, with available condos
Then onclick again, it would show pricing, availability, etc.
I'm having trouble managing the rollover image map through CSS.
Besides that, of course, the client would want to manage all by himself (so he can update the condo statuses), and I was planning to host the website through Wordpress
Questions :
Has anyone worked on a solution like this and would be willing to share experience?
Has anyone come across a Wordpress solution that works this?
Has anyone have a technical solution for this (Javascript, HTML5, CSS combined?)
I'm the author of MapSVG WordPress / jQuery plugin which is able to do what you need: http://mapsvg.com
To get started you would need to create a blank image in any vector editor (InkScape, Adobe Illustator, etc.). Then embed building image (png/jpeg) to the background. Then add shapes on top of the image and give them a transparent color fill (=rgba(0,0,0,0)). Save image as SVG, upload it to MapSVG map builder.
Everything else will be done in MapSVG Builder - colors, tooltips, popovers, links, event handlers, etc. See the demo.
you can use maphilight plugin
or you can use jvector
tutorial use link

how to create a web gallery

I've been searching for a way to implement a gallery in my first ever website (written in HTML).
I basically want to make a page with thumbnails, and, when clicking the thumbnail, a bigger picture to show up (over the gallery, not exiting the gallery), eventually with a title under it, and , when clicking the big picture, to return to the gallery (eventually with a fading effect)
The problem is that I don't even know what I should be looking for, exactly, in this case.
If you don't need to build the gallery from scratch, I recommend using one of the many libraries that you can find online.
Here's a list of some very useful JavaScript/jQuery photo galleries:
Top 10 Free Responsive Image Galleries.
Hope it helps,
Regards.
There are many libraries online that do exactly this. My first google search came up with the following PhotoSwipe. Included in the webpage is a link to their documentation and git repo. If you would like other choices, this website lists 10 libraries that do exactly what you want

Javascript menu - copy javascript thumb gallery into each area doesn't work

I got a small problem with my webpage.
http://sabinequardon.dk/Portfolio/#portfolio
When you click on "photography" the gallery shows just fine,
but then when you click on "photoshop" something's wrong.
I've copied the exact same code into the photoshop-section, and used javascript fadeIn & fadeOut to show the dif. content, but it doesn't work.
Javascript here: http://sabinequardon.dk/Portfolio/assets/js/gallery.js
Do i really have to give it different names/classes, and make both css and javascript several times to make it work?
I tried everything, just can't seem to find the mistake.
Thanks!
- Sabine
This plugin is not written to be used in the way, that it can be reused for multiple galleries on one page, and it would need some massive work to enable this functionality for it.
Quickiest and easiest call for you would be just separat Photography and Photoshop into differeent html documents, so the ids will not colide
Best wishes
Marian

External control and hovering of jQuery UI Carousel 1.0.2

Recently I'm working with jQuery UI Carousel (1.0.2) on my Drupal website. So far so good, everything is working without a problem but I'm looking for a way to add some external controls. You know, those little dots beneath the images where the user can navigate from and pinpoint a certain slide.
I took a look to the JS file (you can see it here), but didn't find any proof of such a controls.
Right now, I was only able to write some crappy code who didn't work at all... (so I'm not gonna post it to save you some laughs :))
Anyone with some experience regarding this subject?
Thanks in advance!
I don't have specific experience with the jQuery UI Carousel module, but if you are using Views to generate the content in the carousel, you could always use Views Slideshow. It allows you to add a pager (either numbers or thumbnail images) to your slideshow (carousel).

How do I make image slideshows with a fold effect?

Back in 2000 I had a js that let me get a very nice homepage:
one picture: <pic src=x>
and somehow the js changed the main picture every a predefined time period.
(there was a pictures pool that was loaded at pageload)
I can find such scripts now but cannot find one with fold effect
(like folding a page in a book)
The closet I got was a jQuery solution - but I don't know this technology and I prefer the JS. Can you please give me a reference to such solution?
A quick Google search on page fold effects I found this js library:
http://www.netzgesta.de/curl/
There's also a jQuery plug-in for a very similar effect at:
http://www.webresourcesdepot.com/attractive-jquery-page-curl-plugin/
Is it what you're looking for?

Categories

Resources