How do I add jQuery?

emmanence

Hi!
So I'm making a game that involves a journal that updates itself as the story progresses and, so the player can check it whenever they want without disrupting their place in the story, I was planning on using jQuery to make it a popup window. The exact one I was planning on using was the ajax Magnific Popup, so I could add CSS to the popup.
(http://plugins.jquery.com/magnific-popup/)

Thing is, I have not the slightest clue how to implement that in Twine. I've done my fair share of googling, but I can't quite figure it out. Any help would be greatly appreciated.

I'm using Twine 1.4.2 in the Sugarcane format.

Thanks!

greyelf

Adding jQuery version 1.11.0 to your story is as simple as using the Story > Special Passages > StorySettings menu option to create a StorySettings special passage, then double clicking on the new StorySettings passage and selecting the Include the jQuery script library check-box.

To add the Magnific Popup Javascript library to your story you just need to add a new Script passage to your story (or use your existing one if you already have one) and copy the contents of the jquery.magnific-popup.min.js file into the passage.

You do something similar to add the CSS contained within the magnific-popup.css file to your story except this time you need to create a new Stylesheet passage (or use your existing one if you already have one).

Getting a Magnific Popup to actually work is a different matter, for that you will need the help of someone that knows Javascript better than me.

greyelf

I had another look at the library's documentation and the issue is the need to call the magnificPopup method after the passage has been displayed.

One way to do this is to create a custom macro which will do this and to call the custom macro at the end of the passage you want to use magnific popups in.

1. The following is a simple custom popup macro which delays the calling of the magnificPopup method, it takes one parameter which is the identifier to be used by jQuery to find your element. (based on the 1. From an HTML element example on the Magnific Popup site)

Add the following to the end of your Script passage:

try {
	version.extensions['popupMacro'] = {major:1, minor:0, revision:0};
	macros['popup'] = {
		handler: function(place, macroName, params, parser) {
			if (params.length == 1) {
				setTimeout(function(){
					$(params[0]).magnificPopup({type: 'image'});
				}, 200);
			}
		}
	};
} catch(ex) {
	throwError(place, "popup Setup Error: " + ex.message);
}

2. An example of using the new popup macro, again based on the 1. From an HTML element example on the Magnific Popup site:

Place the following in a passage:

Clicking on the following link show show a popup image

<a class="test-popup-link" href="images/smilyface.png">Open popup</a>

<<popup ".test-popup-link">>

note: There are a number of different parameters you can pass to the magnificPopup method, if you wanted to use exactly the same parameters with all your popups then you would just need to edit the code for the popup macro and change the {type: 'image'} part to whatever you need it to be, if on the other hand you want use different parameters for different popups then the simple custom popup macro would need to be enhanced to cater for this.

emmanence

Thank you so much! It works really well.

suarez

You should use the json code to access the jquery

trainingintambaram.in/oracle-training-in-chennai.html