How to adapt Wordpress WP Tiles Plugin / Pixellab's tiles.js - javascript

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

Related

OpenLayers 3 Vector Layer loses styling when map pans or zooms

UPDATE
I tried adding the files into a Snippet or JSFiddle to make it available to people to edit, but JSFiddle is banned and I cannot upload text files into a Snippet. Unless there's a better way to do it, here's the public repo for the files.
Hi, everyone!
I'm working on switching from OpenLayers 2 to OpenLayers 3 and supplementing my reading of by trying some things out on my own. There's a project that I'm building here that should be fairly simple: take form inputs and use them as parameters for building a vector layer. The interface works as intended, save for one problem.
Whenever I pan the map or zoom it, the vector layer seems to disappear. I can't for the life of me imagine what's going on. Anyone able to help me figure out what I can do to keep the layer in place?
Thanks!
Dheeraj
The answer was in line 77 here. It turns out that for whatever reason, I misunderstood falsiness in JavaScript and my style-builder function was erring on undefined styles. Who knew? The rest of the code works, though!!!
Big thanks to #ahocevar for being willing to help!

HTML Image map with selectable regions triggering popup content

It has been a long time since I have had to do Image Mapping! Probably like 4-5 years.
The last time I achieved this using the tag and creating tags for polygonal shapes. This of course works, and is still supported html, even in HTML5. Question is though, is this still a good way to go for image mapping? Or should i scrap this direction and aim to use Canvas or SVG techniques instead?
There are a couple of factors in regards to the decision:
The client uses IE7, so the solution has to work with IE7 and IE8, hence me thinking not to use SVG or Canvas, it would be easier I guess to use the old school map tag, at least it will easily work across all platforms.
The Map has quite custom styles (strokes around the areas with a margin gap too)
Each area has a rollover state, with a popup with content unique for each region. This will have to be achieved with JS. Are there any issues using JS to interact with the DOM structure of the map using map tag?
It's not essential, but I would to make the map somewhat responsive to the viewport.
Using the tag frankly feels really old school, dated and dirty. But, to be honest for my case, it seems like the most suited solution. What does everyone think?
Any feedback welcome,
Thanks,
Craig
For your requirements I think best suite is SVG. By some work around you can make use of all time favorite jQuery with SVG and build cool stuff so quickly. I was able to develope a ticket booking tool on theaters with SVG maps within two weeks.
Also now every one needs every thing on mobile and it works on mobile with just no efforts.
Try to convince client to upgrade IE, that will be best for you. All the best.

What's an easy way to get started with an interactive Javascript slideshow / image viewer?

I'm very very new to Javascript. What I'd like to do is one of those rows of smaller images, that when you click on one it pops up bigger with left and right arrows for sliding through the photos.
What's the easiest way to get started doing something like that?
Any help is greatly appreciated, thanks.
You know we're not your research site, but since you're asking for the easiest way, I'd recommend HighSlide JS. It doesn't require JQuery, is highly personalizable, comes with examples which you can just copypasta and a nice tutorial.
Of course, if you'd include the JQuery lib to your page, you could also try one of these fancier plugins. And there are also some JQuery carousel plugins as noted by #Nupul.
Check out the galleries plugins at Web Resource Depot

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.

can Ext JS do snap-to-grid for drag/drop/resize UI?

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

Categories