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
});
Related
I'm really stuck on this one!
I'm using the WP Tiles plugin (http://wp-tiles.com/) to display custom post types for a new Wordpress project. Everything works fine EXCEPT that the tiles are displayed as squares. HOWEVER, my graphic designer wants the tiles to display as rectangles (see this for an example: http://greensenseweb.info/wptilesproblem.jpg).
There's been no reply from the plugin developer, so I guess I'm on my own on this one. I've already delved into the plugin and have seen it uses Pixellab's tiles.js (http://thinkpixellab.com/tilesjs/).
Unfortunately, my javascript is average at the best of times! How can I adjust the plugin or tiles.js to give me rectangles instead of squares?
Thanks in advance for any help!
Did you ever figure it out? I'm having the same problem.
I've been trying to use a jQuery workaround like this:
jQuery('.wp-tiles-tile').height((jQuery('.wp-tiles-tile').width())*0.8);
but obviously it only works for a static page, as soon as you resize the window its not working anymore (plus its not really a clean solution).
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.
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.
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.
Currently planning for a time-line application. Each elements on the time line will need to be resizable and draggable with a snap-to-grid positioning similar to jQuery UI's
http://jqueryui.com/demos/draggable/#snap-to
http://jqueryui.com/demos/resizable/#snap-to-grid (the snap to 20x20 kinda thing)
Is this feature available with Ext JS? Been googling around without any results. Can anyone point me to some examples please?
You may get some inspiration from http://ext.ensible.com/deploy/dev/examples/calendar/custom-views.html
Edit
Source code on Github