Creating an image swapping page by breaking the image into pieces - javascript

Do anyone know how these kind of website is made.
http://cloudatlas.warnerbros.com/
If there is any plugin or something that i can use.

DiamondGrid.js
DiamondGridHTML5.js
DiamondGridFlash.js
DiamondGridMobile.js
Above JS plugin are responsible for diamond grid 'diamondGrid.css' responsible for styles, soundtrack.js responsible for BGM on that site.

Related

How to create full page capture screen from onepage and horizontal scroll applications?

How to create a screenshot of an application that has horizontal scroll or scrolling in the form of a slider?
I would like to take a full screenshot, not just the first screen. For example, from applications like below.
https://piscinasdecemento.com/
https://studiochevojon.com/
Is it possible?
I worked on a similar project with HTML 2 CANVAS. it's a powerful library for generating images or pdfs from webpages. Good Enough you, don't need any backend to do this. Only Javascript is needed (add some JQuery if you want).
check it out here
https://html2canvas.hertzen.com/
You can also try out other Javascript Libraries similar to html2canvas
here https://openbase.com/categories/js/best-javascript-screen-capture-libraries?orderBy=RECOMMENDED&

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

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).

jQuery media browser

I am attempting to build out a visual jQuery based browser for thumbnailed assets grouped by the upload date of the asset. The backend part is fine, but I'm having a really hard time finding a workable visual solution that can handle (potentially) hundreds to thousands of assets smoothly. The display of the content is not an issue as it is being handled by a lightbox, I just need to figure out a way to actually display the thumbnails.
I've been trying to interface with this plugin but have been running into a lot of problems once it gets over 100 records, everything just becomes horribly unresponsive. Ideally I want to be able to build ajax into this for loading media as needed rather than a bulk get on page load. Does anyone know of a good plugin that can be leveraged to achieve this effect or at least provide a good user interface for browsing large amounts of content?
To clarify: I have properly generated thumbnails being made when an asset is uploaded, these are what are displayed on the page, and the full size image is only loaded in the lightbox when the thumbnail is clicked. I'm just trying to determine a good way to browse a large quantity of thumbnails sorted by upload date.
It sounds like your scaling the full size images down which will ruin performance. Do the images have a small version counterpart you can use for the thumbnails?
Turns out there really wasn't a good way to implement a prebuild plugin for this situation, the best way to do it for me was to implement a jQuery UI slider and on the stop event of that I then do an ajax get to load the appropriate data into a div with vertical scrolling.
Maybe not the most elegant or prettiest solution, but it works for the situation and looks nice enough.

jquery image slideshow with links per image

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

Categories

Resources