I'm trying to build an image grid with canvas, but I'm not sure how to perform operations when a particular image is clicked. I want to achieve functionality like in this website https://big.dk/#projects but it's too complicated for me to grasp, I'm comfortable using javascript preferably Angularjs instead of JQuery if possible. I'm thinking of using tables to align images in a grid, can we achieve this kind of functionality without using canvas ? any suggestions would be of great help. thank you.
Yes, of course you can make this without using canvas either using bootstrap grid or with any other grid system you like,
Probably this can help you jsfiddle.net/webtiki/MpXYr/2/
And you should use transition css for smooth image zooming(resizing) on mouse hover.
Related
For my recent project I need to add a specific text animation - to achieve the effect of a pen writing some text on canvas.
I would like to hear your thoughts what would be the best way how to do that based on your experience?
Could you point me in the right direction and include some references where I could learn how to do that?
I am currently using Twitter Bootstrap Framework for Frontend.
http://lazylinepainter.info/
This is just the tool you need
There are a lot of libraries helping you to animate your content without using canvas (not cross browser...)
http://www.createjs.com/#!/TweenJS
http://www.greensock.com/gsap-js/
I've seen this image slider on the front page of http://www.ibm.com/us/en/ and I want to have one like that for my site. (After a timeout, the first image slides out of the screen, then the second image flies out after it, and then a new pair fly in).
I've seen that IBM uses Dojo not jQuery. Is this built in effect in dojo?
I have knowledge in javascript (but not any library like jQuery/dojo) and I can make it myself the hard-way. But I wanted to know first if there is anything built in to do it?
I think you might be better off with dojox.widget.Rotator or even dojox.widget.AutoRotator.
The image slider on the IBM.com front page is built using Dojo, but not a out-of-box component of Dojo library. It's a customized component.
If you want to create image sliders using Dojo, take a look at existing out-of-box components in DojoX library (dojox.image). dojox.image.SlideShow is a good starting point.
I'm trying to create line graphs like the one in the image below.
It needs to have a very light weight(in kb), and needs to have points that I could hover(for a tooltip about that point, like in the image). I don't need pie charts or anything like that, just line graphs like above.
I'm just not sure how to go about it best, I don't know canvas, and i'm assuming that might be pretty complex trying to do what I need with canvas. I know jQuery decently well.
I'm wondering: Is there a very light weight framework/plugin that would allow me to do just the bare essentials like in the image? If not, how would you suggest going about this with jQuery?
All I need are the lines drawn, with points that I could trigger a hover on, I can take care of the tooltip and all that, i'm just trying to figure out how to draw all the lines the match up with the grid, and get the little circle elements in the right position.
Thanks so much.
ps: light weight to me is not more than a few kb, because I want them to be interactive(not just a static image), but i'm not going to have so many of them that I need a huge jquery plugin, just something small.
Also: I'm trying to make it so it's responsive, and shrinks to fit a phones screen.
SVG sounds just like what you are looking for. You can use a library such as JQuery SVG or Raphael (based on Prototype.js) to make it easier.
Google Chart API is very solid and easy to use. Here is an example of a simple Line Chart
http://code.google.com/apis/ajax/playground/?type=visualization#line_chart
You can also Interact with the charts you create:
https://google-developers.appspot.com/chart/interactive/docs/basic_interactivity
https://google-developers.appspot.com/chart/interactive/docs/events
I don't know how lightweight you could possibly get to do what you want, for that kind of thing I would normally use flot.
If you are not planning any manipulation on the graphs. Use a PHP library called pChart
Check out Google Charts. It looks like the perfect thing. It doesn't use flash, so it's smaller than some, and it has tooltips. As a bonus, you can use live data on the web.
I want an image slider similar to what is shown in the link below.
http://blog.dreamcss.com/wp-content/uploads/example/
I have customized the script to my needs but I'm not able to find a way to change the image transition effect, rather than moving image from right to left I want image to dissolve & show other image that would make this script really code. I am open to new jQuery based Image Effect Slider/Gallery With similar look. This is the client's request so the design will remain same.
I would appreciate if i can change the image effect or if some one can provide me link for similar image slider.
I have to use this with ASP.Net and possible modify this script to integrated with database using c#
Thanks in Advance..
I use Flex slider http://flex.madebymufffin.com/ , it is very customisable and lightweight and should do what you want
Take a look at these Javascript Image and Photo Galleries. I would recommend using the existing APIs provided by these script libraries using JSON to pass data to the client from the server as opposed to modifying the script -- keeps it simple.
Alternatively, you could look at some of the stuff on CodePlex: Image Gallery if you wanted a server control to use with your solution.
Is there a simple plugin or some robust code that would allow me to animate PNGs with a simple start and stop method? TSM, Alex.
[Edit: I made a jQuery plugin that animates PNGs. Will post when it's all done.]
While this is not an "off-the-shelf" plugin, you may be intrested in checking out the following tutorial:
Building an Animated Cartoon Robot with jQuery
It uses PNG images for all the layers. It explains how to implement a startHim() method, which I'm sure you'll be able to convert into a stopHim(). You may probably be able to skim through it, unless you are trying to do something similar.