Jquery based image mosaic wall layouts - javascript

I'm looking to recreate the layout that's present at this site:
http://prettytasty.tumblr.com/archive/
The only way to accomplish this is using absolute positioning, however it appears that they're using javascript to dynamically position each image entry on the page. Is there a jquery plugin or example that accomplishes this or something similar?
I realize javascript is the last thing you want to have to depend on for layout, but I'm just curious and would like to see how it is accomplished.

The effect you see on that particular page is actually created with prototype.js, but for jQuery you're probably looking for the jQuery Masonry Plugin

Related

hoverstate on diagonal jquery grid

I'm trying to create this grid:
I've made some html generated with jQuery and rotated that with jQuery.rotate. Now my div's are overlapping each other causing a problem to my hover state.
Couldn't find any question that looks like this, has anybody done something like this before?
If you need to look into the code I can post the html / css and javascript. Because it's quite a lot of code I'll do that by request.
well stacking too many dives on top of each other isnt that good idea as i think..
why don't you try using svg instead .. those are made for such a situation ..
but if you still want to be using divs then please show us the code for your project .. :)
Why don't you use css transform-rotate for each block with absolute positioning and then you can use jQuery to set top and left properties of all onto your grid. I've found something similar on http://neolab.no/ Here, they also used media-queries to re-positionate each block.

Jquery plugin image scroller with previous and next image visible to side

I am looking for a jquery plugin that has a scrolling image effect where the previous and next images are still visible but smaller on either side of the current image/frame.
Similar to this one: http://www.eogallery.com/ but smoother with the side images centered
I know I have seen it before but I haven't been able to find it after extensive searches.
Anyone know a plugin like that?
Thanks, especially for leading me to the name of the effect "carousel"
I found what I think is the best example here: http://codecanyon.net/item/jquery-carousel-evolution/full_screen_preview/490018
not a plugin but you can see the the source:
http://www.roxon.in/scripts/tutorials/NavGallery_jQuery_Tutorial_01/index5.html
Maybe you can check this one:
http://www.bkosborne.com/jquery-feature-carousel
The plugin has a lot of configuration and options

Simple way to resize a DIV with Javascript/Prototype

I have a div that floats at the bottom of the screen and want to let users vertically resize it (by grabbing a handle on the top of the div and pulling the div up or down). I am using Prototype.js, so it just has to be compatible with that, though if there is a simpler way of doing it than with yet another javascript library that would be much preferred. Anyone found anything like this or have a simple way of doing it?
Here is what you are looking for. It has the sample code using prototype.

Rearrangeable DIVs in javascript (jQuery plugins)

Anyone knows how i can implement re-arrangable divs (Drag the divs around on the page, but divs should not be overlapped, something like igoogle widgets). I was trying to see if i can find any jQuery plugins available, but couldnt find any.
thanks
Use jQuery UI's sortable; it does exactly what you're looking for (in spite of the poorly chosen name).

CSS / Jquery Effect - What is this?

on this website: http://www.eco-environments.co.uk/ if you scroll down to "What we do" and rollover the links you get a bubble popup display, can anyone tell me how this is created please?
Thanks
You can use a jQuery plugin like jquery tooltips for this kind of effect. Check out the demos.
This is actually an effect that is pretty simple to create.
First, there is a hidden div in the HTML for the Tooltip.
<div class="popup" style="display:none;">Hidden Content Here</div>
Then javascript can be used to show the hidden content when something is hovered over. For instance, here is how it would work using jQuery (and using the example page as an example).
$(".tooltip").hover(function(){
$(this).children(".popup").fadeIn(); // Other effects can be used to show the Tooltip
},
function() {
$(this).children(".popup").fadeOut();
});
The rest is a matter of using CSS to make sure that the Tooltip is positioned correctly and making it look nice (in most cases absolute positioning would be used). There are a lot of different techniques to making nice CSS for Tooltips, so as always Google is your friend.
it appears to be using the normal jQuery Hover.details at http://docs.jquery.com/Events/hover

Categories