Responsive filterable portfolio - javascript

I am attempting to program a portfolio section very similar to: http://www.nouvehmedia.com/#3_columns_projects.html
However, it seems that with my zero knowledge of jquery/javascript, I am not able to recreate the results.
Ideally I was attempting to put my own 'touch' on it. It would function in its entirety like portrayed on the website above, but clicking on them would actually open a modal instead.
My trouble areas are:
* filtering the results
* applying the mouse overlay effect (I can only seem to effect the bottom text when my mouse is over that, but it does not transition if it is over the image)
Here is my code, I am using foundation framework and so it looks quite off when I import the code into jsfiddle to show my work: jsfiddle.net/feF43/1/
Here is what it looks like on my end:
Is what I'm trying to do possible in CSS, or should I be looking into finding a similar effect on github or such to implement with my code?

Oh that's a shame, I actually looked at this yesterday as I'm looking to use it in my next site. I'm more of a Bootstrap framework fan than Foundation though.
There is a plugin called quicksand.js which does what I think you're trying to do above. And I stumbled across a tutorial for using that with Bootstrap just last night:
http://untame.net/2013/05/how-to-build-a-sortable-image-gallery-with-bootstrap-jquery/
Unfortunately I had a look into this for you and it seems the way that Foundation applies its grids means that quicksand doesn't work very well with it:
https://groups.google.com/forum/#!topic/foundation-framework-/0M-H3kWiChY
So, perhaps suggesting you change frameworks is a little bit of a drastic solution :) but looking at your fiddle it seems the markup is very similar between the two frameworks.
I just had a look at the quicksand source code as well and its really not that long. So even if you stick with zurb you can see the inner logic of quicksand here:
http://mode87.com/untame/demo/filteredgallery/js/jquery.quicksand.js
Hope this helps.

Related

Dynamically injecting code in Twitter Bootstrap carousel

So, I've built a responsive site with Twitter Bootstrap. The problem is that I've done this using visible-phone, visible-tablet, and visible-desktop. This means that when someone views my source code, I have whole sections that are included twice or three times, in order to get around problems with differences in span amounts, or, for instance, because a carousel on the tablet should have 2 items, while on the desktop it should have 4.
I'm wondering if I'm doing this right. Should I be injecting (or adding? Not sure of the right name) code to the DOM dynamically using Javascript, based on screen size? Or should I be editing around with my custom, very simple .php files based on screen size? I don't know, and I can't find an answer about good practice anywhere. I've tried looking at sites I like for this, but I never find a javascript script that specifically adds stuff in this situation. Given, I'm not sure what I'd be looking for.
Any pointers?
I would avoid using script to dynamically add the content; as a fellow developer that just makes it less intuitive (in my opinion) and I always aim to produce intuitive code for the chap after me.
If your requirements state that a carousel should have four items on the desktop and two on mobile, then I think your solution is completely valid.

Replicating Cargocollective jquery/lightbox

I have a site on cargocollective from a very long time ago.
http://cargocollective.com/ruimelo
And I'm in the process of building a new one not using Cargo, however I like the way Cargocollective displays work in this theme. Whereas each piece is shown with a small thumbnail, you click it and it stretches out displaying the full image and brief description.
I'm sure this has been done before but for the life of me I can't find it, or a similar jQuery plugin online, and I'm definitely not up to snuff when it comes to write JS myself.
If anyone can point me in the right direction I would be very thankful!
I think the closest you can get is using Masonry plugin.
See this little demo I created http://jsfiddle.net/dfsq/838Bf/1/
So basicly what you need to do is just load project data via AJAX and put into corresponding container. Ther rest will be handled by plugin.
Usage of plugin is pretty simple like
$('ul').masonry({
itemSelector: 'li',
columnWidth: 100
});

Spinning wheel in jquery with mouse-drag option

I am looking for a plugin for spinning wheel in jquery. I came across the site
http://www.professorcloud.com/mainsite/carousel.htm . There is a beautiful demonstration of spinning wheel here but I need the images to be controlled on mouse-drag and also I want the same rotation to happen vertically as well. please help
I believe what you are looking for is commonly referred to as a 'Developer'. When you come to Stackoverflow (in general) you provide a source code that we look through to find out where your mistake(s) is/are. Then we tell you why the mistake(s) happen/ed, and steer you through correcting the mistake(s). If what you are you looking for is the type(s) of tool(s) that a common jQuery developer would use to achieve this then that's completely different.
For starters, it looks like you have found a carousel that you want to use to create the rotating effect. That's fine. You'll need to go through their API and instructions to get a grasp on how to integrate your next step:
Drag & Drop in jQuery
My favorite plugin for this is jQuery UI. It's a complete suite for jQuery that provides an array of different enhancements, including the 'Drag & Drop' effect you want.
http://jqueryui.com/demos/droppable/
You'll have to (once again) work with the API and instructions, and create events to control how the carousel should be affected by the Drag & Drop plugin.
Vertical Carousel
Some quick digging regarding the need for Vertical implementation lead me to a Stackoverflow question regarding the same exact needs.
JQuery Cloud Carousel that scrolls vertically
He also discussed what changes you need to make to the script in order to account for the change in axis. That's a huge +.
You can see a working version of it below -
http://www.inspiritandintruth.com/ (look at the right hand side)
All of this combined should get you what you want. With a bit of work and adjusting, you'll be able to get your end result.
Best of luck.

flash website redone in jquery? feasible?

I'm considering attempting a redesign of a flash website with jquery effects and transitions in place. I just wanted to reach out to the community to maybe see how feasible this really is considering the particular transitions and effects this website has.
Here's the link:
http://antonynicoli.com/english.html
The gallery I guess can be recreated by carousel plugin, but there are so many out there so maybe could suggest a stable one that would be be best suited to this job. The other items that really caught my attention in which I wouldn't really know where to start is the navbar and the effect that looks like a book opening when you click on a link on the navbar. Any and all input would be appreciated. Thanks.
This is probably doable, but I'm wondering about the motivations behind changing to an HTML/jQuery solution when it looks pretty good right now (as Brad pointed out above, it would require a total rework). I see a couple of things going on:
Carousel: jCarousel (http://sorgalla.com/jcarousel/) (never used it but it is popular)
Animations: jQuery Animate (http://api.jquery.com/animate/)
Other widgets/interactions: jQueryUI: (http://www.jqueryui.com)
Not sure how you would go about the open-book animation, but I suspect you could accomplish it with some clever jQuery animations.
The best way to see if it could be done is: start doing it! jQuery has tons of resources and you'll get good help here on StackOverflow.
After looking at the site i do believe most of the effects can be recreated fairly well using jQuery. Of course, your end-result might not be as smooth as the flash implementation but i think it can be done.
If you look at using HTML 5 i believe a lot of animations such as page transition with the opening book can be simulated with the canvas element. Same with the navigation elements.
https://developer.mozilla.org/en/canvas_tutorial
http://diveintohtml5.ep.io/canvas.html#divingin
As you mentioned some of the effects such as the carousel can be recycled from existing plugins. The only holdback really is how much time do you want to invest in porting a design to a language not as well suited to do the job. jQuery is an excellent framework but it is far from a drop-in replacement to create effects that are trivial to create in Flash/Actionscript.
the whole site can be done with jquery. all you have to do is map out all the animation done on the site and write it on paper. then look for the jquery alternatives online and check them off one by one. some things might not be exact but it will do the job.

Rotating images + content - jQuery or MooTools?

I've found a feature on two different websites that I'd like to include on one of my web projects, but I can't figure out how they're doing it. I think they're using either jQuery or mootools, but I'm not sure.
http://www.x-plane.com/index_desktop.html
I'm new here so I don't have the reputation to post the other link, but if you do a Google search for "Andrews Institute of Orthopaedics" its the top result. I'll see if I can answer a few questions to earn my keep.
The thing that I like about these is that the images and text (including links) are all rotated together. I've done a few web searches related to cycle, rotate and slide but it's not coming together for me. Can anyone give me a nudge in the right direction?
The page you linked is using prototype for this (usually because that's what the author knew, as with most libraries), and it is custom script they've written. However, jQuery has a lot of plugins with various styles, just see what one fits your taste best. I'd suggest taking a look here and a look here.
Anything you find can be automated on a timer like the site you linked, or use buttons, or both. These are all pretty flexible, I'd start by finding the plugin you want, try and get it going, then asking a question here if you have problems getting it to behave exactly how you want.

Categories