Anyone know how to use the jQuery Gallery View Plugin? - javascript

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
});

Related

How to filter in CKEditor?

How are you guys doing?
I am recently doing applying CKEditor to my corp's editor.
It's been great though I've got stuck in some problem.
I expect it to be the best even when we paste other contents from web or Word, but What blocks me doing is something kind of inline style tag, such as 'p style....' since it won't take its style away that my viewer doesn't seem to keep the same form.
I found out that filter.js would be the perfect solution for it. But there doesn't seem to be any way I can handle in my IDE since it doesn't exist.
How can I find a file called 'filter.js' or other plug-in so that I can handle the other way. this is the URL which would be help.
http://docs.ckeditor.com/source/filter.html#CKEDITOR-filter
Thanks.
Do I have to make new file called filter.js so I can edit on my own.
So confused. Hope to get some nice solution to it. Thanks.
CKEditor has a robust content filtering system called ACF (Advanced Content Filter). Read more about it here: http://docs.ckeditor.com/#!/guide/dev_acf and see the samples here: http://sdk.ckeditor.com/samples/acf.html. It's highly flexible so you can customize it to your needs.

Typo3 - t3jquery integration is not working

so first i have to say that i'm realy new to Typo3, so i dont rly know much about the cms.
Actually i have a Problem with my Page.
I want to integrade a Image Slider in my Page with the Nivo Slider Plugin.
The Problem is, that the Slider is not shown.
The page gives the error
TypeError: jQuery(...).nivoSlider is not a function
so i think, there is some problem with the jQuery.
For that i installed t3jquery but its still not working.
i nearly tried every configuration for t3jquery and also analysed the other extensions on my Page with the plugin, but nothing works.
Some of you have advice what i can do?
The page is hxxp://www.eventbringer.de/skireisen/opening-slider/ (so you can see the error in the JS Console)
TYPO3 has a very versatile way of getting content of code to the front-end.
One way is to use typoscript.
read : https://docs.typo3.org/typo3cms/TyposcriptReference/
You can see typoscript as a huge configuration 'array' that can declare all sorts of settings.
One of the settings is about how the 'page' itself needs to have.
If you need, for example, some javascript in your page, you could use
page.includeJs
https://docs.typo3.org/typo3cms/TyposcriptReference/Setup/Page/Index.html#setup-page-includejs-array
if you need yous JS at the footer, and its an external lib, you could use
includeJSLibs.twitter = http://twitter.com/javascripts/blogger.js
includeJSLibs.twitter.external = 1

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!

How can I customize the Isotope for Wordpress plugin?

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.

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.

Categories