How can I customize the Isotope for Wordpress plugin? - javascript

I recently added Metafizzy's Isotope to my wordpress page, but I had some trouble linking it to my posts. As a solution I removed the code I had put in manually, and installed this Isotope for Wordpress plugin.
Has anyone used this and customized it using Isotope's different methods and layout modes? I'm having some trouble locating those key pieces of code (that are so easy to edit when you add isotope manually). This plugin seems to make editing them a bit trickier. If anyone could point me in the right direction I'd really appreciate it.
Thanks!

The isotope is function is called in the includes>js folder in the file called load_isotope.js
You can see the layout mode on line 6. Probably adding that functionality to the plugin would be a good idea.

Related

Wordpress issue with Isotope

I have a theme that does not seem to be completely compatible with a plugin in wordpress.
The plugin is called: DHVC Woocommerce products.
It seems to cause the following issue:
"no such method 'reLayout' for isotope instance"
I read a bit online and it mostly seems to be due to a conflict issue (i.e. 2 versions clashing). I currently have Isotope v1.5.26). I tried to upgrade to http://isotope.metafizzy.co/isotope.pkgd.min.js however that still brought about that same issue.
Any ideas as to what next I could try?
Your not providing enough info or any code but, in isotope v2, it is not reLayout, but layout.
$container.isotope('layout')
You need to check if your container has isotope, if so run isotope layout
if($("#container").data('isotope')) {
$container.isotope("layout");
}

Shortcode inside a slider

I am looking for a slider that would be able to display shortcode in WordPress.
For example, I can create a map with the shortcode [awesomeMap id='1']. And I know there are a bunch of sliders out there, but I can't seem to find one where I could add slides that simply consists of
[awesomeMap id='1'],
[awesomeMap id='2'],
[awesomeMap id='3']
And then when I call [show-slider], it would give me a slider with 3 maps. I'm trying to setup the WordPress so that people taking care of it in the future won't have to touch the code too much...
Anyone know of a WordPress slider that would support this functionality.
Check out Layerslider.
It's a pretty robust slider, responsive, and allows the use of shortcodes by providing a place for HTML. I've used this plugin on several projects and just tested it with a map shortcode on one of my sites. Seems to work well. It's always possible you run into plugin conflicts, but it may work for you.

Debugging/Reformatting a replacement jquery js plugin

In very basic terms, where does someone experienced in HTML, CSS & JS start looking for errors in the formatting of various JS plugins?
For example, I'm working with a couple of different templates that went in tandem with a youtube tutorial on Expression Web 4 from the Timothy Framework series. Now that I've completed the tutorial site design, which included a basic jquery slider and lightbox effect, I'm trying to replace those slider and lightbox effects with a different version. For the question's sake, let's say I'm trying to replace the Magnific-Popup plugin with a Feature-List plugin.
The file structure has been updated with the needed photos and linked correctly. The CSS and JS files are in place and linked correctly. The script activates more or less correctly in any given browser, but the formatting is all off. My text and various images aren't lining up correctly.
I believe there's probably a conflict in the div that contains the Feature-List plugin between the pages main CSS file and the plugin specific css, but I'm hoping someone can give me some general guidance as to where they would start to look to debug/reformat the plugin.
I can copy my code or be more specific, but I'm really looking for just some general thought process ideas.
Thanks in advance!

Custom jQuery UI

I wanted to use some functionality in jQuery-UI. So, I downloaded a custom version of the same from jQuery website, including only those things in my download that were needed by me. This was supposed to trim down the total size of my page, but to my surprise, the page size remained almost the same even after following the procedure provided at jQuery website.
Did I do something wrong? Or is this the expected behaviour?
You should have a look at JQuery UI Packager, it lets you pick what functionality you want.
It bundles it up with both a custom and a minified JQuery.
When I tried it, I removed everything but core functionality, and it ended up 15kb uncompressed.
Then I tried it without removing anything, it ended up 206kb uncompressed.
If you're that concerned you should think about gzipping.
Look at this chart of filesizes and how they improve with the different methods.
Here's a post about a guy asking a similar question, and the answer explains what you should focus on.
Here's a discussion about gzip and minify.

Anyone know how to use the jQuery Gallery View Plugin?

I found the jQuery Gallery View plugin because I was looking for a good way to cycle through pictures including text and one that was well designed. This plugin does not seem to be updated anymore and does not have much documentation so I am having difficulties implementing it. Does anyone have an idea as to how it works?
Thanks in advance for any help you can give.
Heres the code I have now (of course with the pictures at the right locations just not possible to attach in jsfiddle): http://jsfiddle.net/chromedude/GgusY/
Here's a start.
I'm taking a total guess at what your markup is supposed to be, because you were missing a bunch of </div> (close div) tags.
Things I had to change to get it this far:
Download galleryview-2.1.1.zip, and from that file...
Paste in contents of galleryview.css and jquery.galleryview-2.1.1js into the fiddle (normally you'd do this with proper external scripts and stylesheets)
Fix the markup so that all those <div class="panel"> tags are properly closed
Get a copy of jquery.timers-1.1.2.js onto the page
Step 2: got the loader image working by hosting the loader.gif file on imgur and editing the CSS accordingly.
Themes are tougher, because apparently, this genius™ plugin tries to figure out where your themes are hosted based on the location of the <script> tag which was used to load the galleryview plugin code. Absolute genius... </sarcasm>
Check it out →
no more image 404s. Loaded next.gif, prev.gif, panel-nav-next.gif, and panel-nav-prev.gif onto imgur so that jsfiddle can actually get the images.
I had to actually edit the plugin source for this one; if your server has the directory structure that galleryview expects, this should not be necessary.
Now here's the thing
You could keep wrestling with this plugin.
Or, you could use a different one, like Galleria. As far as I can tell from the example you've been trying to assemble, Galleria does all the same stuff. Since Galleria is actively maintained, you should actually be able to use it with a reasonably recent version of jQuery, as well as actually get support for it from the developer.
Get the latest version of jquery gallery view here:
http://plugins.jquery.com/node/7317/release
Then following on from that:
http://jsfiddle.net/chromedude/GgusY/
$('#photos .filmstrip').galleryView({
panel_width: 800,
panel_height: 300,
frame_width: 100,
frame_height: 100
});

Categories