Shortcode inside a slider - javascript

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.

Related

How to snap to next section wihout using a jquery plugin?

I would like to enable/add the ability when visitors scroll that is snaps to the next section. Jquery plugins, such as SmartScroll or Fullpage.js do exactly what I want. But, the problem is I don't know how to add these JS Plugins (coding ability is nonexistent) to my already existing Wordpress site, which was built with a bought theme and WP Bakery.
Is there a way to add this function (snap to next section) with no/minimal coding, by using a WordPress plugin.
If you need more information, just let me know.
Browsers do not implement yet this snap feature even though there are some attempts to do so.
Therefore you can only achieve such effect by using a Javascript library such as the ones you mention.
If you want to use it in Wordpress, then you'll have to find a wordpress theme or plugin that uses such Javascript library, for example, Fullpane theme from Themify, which uses fullPage.js.
I would recommend you with no doubt, to make use of fullpage.js.
It is the most complete library of this kind, the most used and tested and it is maintained full time.

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.

How to create 2 Image rotation carousels on the same page using one jquery script file

new to jquery need help please!!... - I'm trying to create two carousels on the home page using the example below but doesn't seem to work.
I realise that the example is using ids, tried to change them to classes but didnt it do much.
http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html
Thanks
An important philosophy in jQuery is "Don't reinvent the wheel."
Just use a plugin for features like this, such as Easy Slider!
Here's a demo of more than one on a single page
Oh, and in the future, be sure to describe what doesn't work as well as your code if you want people to actually be able to help you with your specific problem.

Trying to integrate Javascript range slider into my website but not sure where to start

I am trying to build a little test shell for my website using Javascript. What I have at the moment is a normal website. PHP/HTML with an SQL backend.
What I'd like is a simple Javascript feature whereby the user has a single slider object and can use this object to set the upper and lower limit on a number of variables, which will be determined by a drop down box just underneath the slider.
Aside from this, I'd just like a number of checkboxes which dictate which products are displayed (i.e if I'd like food but not drink, the food checkbox would be ticked!).
I'm not expecting anyone on SO to do this for me, of course, but I would like to find some specific areas I could go to learn how to do this, and google is failing me in this regard. I will then begin working/editing this post to show my code/ask for help.
Can anyone help please?
It seems that you want to build a specific search for site, but instead of the user searching it is what is displayed. I would start with looking at php, based upon which checkboxes they choose, you can return variables which would show them what they want to see.
I personally wouldn't use javascipt for this.
I'm not sure what your level of experience is with Javascript, so my apologies if this answer is too basic.
To put a slider on your page refer here for the HTML:
http://webhole.net/2010/04/24/html-5-slider-input-tutorial/
Then in Javascript get the value of that slider when making your GET requests of the server.
You can store the selected value or checked value in the target element, when you process, you just call the element and get the value from them. Using jquery data() method can store the value to element and retrive it pretty easy.
If you still have no clue, I redcomend you learn some basic javscript techniques, go to this site www.jquery.com .
Are you using jQuery and jQuery UI? jQuery UI has a nice slider widget with a number of configuration options and good documentation: http://jqueryui.com/demos/slider/
If you're not used to it, there may be a bit of a learning curve for jQuery, but it makes a great number of UI features much, much easier to code. Showing and hiding elements based on checkboxes, for example, is a pain to do in straight JS but fairly simple to do with jQuery. There are lots of other ways to just make a slider, but if you're planning to do much more with the UI I'd strongly recommend using a library like jQuery to do the heavy lifting.

Categories