{"id":862,"date":"2016-02-24T11:10:43","date_gmt":"2016-02-24T11:10:43","guid":{"rendered":"http:\/\/blogs.plymouth.ac.uk\/telmed\/?p=862"},"modified":"2016-02-24T11:10:43","modified_gmt":"2016-02-24T11:10:43","slug":"added-jquery-to-your-lectora-project-to-create-an-image-slider","status":"publish","type":"post","link":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/added-jquery-to-your-lectora-project-to-create-an-image-slider\/","title":{"rendered":"Added jQuery to your Lectora project, to create an image slider."},"content":{"rendered":"

Added jQuery to your Lectora project, to create an image slider.<\/strong><\/p>\n

I have created this blog entry to help anyone who is struggling to create an image slider in Lectora.
\nOpen and save a new Lectora project.<\/p>\n

Within the folder structure create a new folder called Script.<\/p>\n

You will need to download the following two files and place them in your Script folder (if the files don\u2019t download correctly you will need to copy and paste the content into a DW file and save.)<\/p>\n

https:\/\/code.jquery.com\/jquery-1.11.1.min.js
\n<\/span>http:\/\/code.jquery.com\/ui\/1.11.1\/jquery-ui.min.js<\/span><\/p>\n

\"Script_file\"<\/p>\n

Once you have your .js files we need to create a \u2018my_functions.js\u2019 file, this where the code for the slider will be held.
\nCreating the \u2018my_functions.js\u2019 file in DW
\nIn Dreamweaver copy and paste the following code and save as a .js file, save the file to your Script folder.<\/p>\n

\/\/ this function is executed on Page Show in Lectora, when the page is opened.<\/span>
\nfunction init_drag_slider() {<\/span>
\n\/\/the minimum \u2018x\u2019 coordinate of the dragger.<\/span>
\nminimumPosition = $(‘.base’).position().left;<\/span>
\n\/\/the maximum \u2018x\u2019 coordinate of the dragger.<\/span>
\nmaximumPosition = $(‘.base’).width() – $(‘.dragger’).width();<\/span><\/p>\n

\/\/making the “dragger” image drag-able<\/span>
\n\u00a0\u00a0\u00a0 $(‘.dragger’).drag-able({<\/span>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 axis: “x”,\u00a0\u00a0\u00a0 \/\/only horizontal movement<\/span>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 containment: “.base”, \/\/contained with the region of the “base” image<\/span>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 drag: function( event, dragger ) {\u00a0\u00a0 \/\/this function will fired every time the dragger moves<\/span>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/calculate the dragger position between 0 and 1<\/span>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 position = (dragger.position.left – minimumPosition) \/ maximumPosition;<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/converts it into amount of images you have, where the 100 is, is the amount of \/\/images you have change as required<\/span>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 result = Math.round(position*100);<\/span>
\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $(‘.counter span’).text(result);<\/span><\/p>\n

$(‘.imgslider’).hide();<\/span>
\n \/\/targets all instances of .imgslider (included in css classes under appearance in Lectora for \/\/each image.)<\/span><\/p>\n

$(‘.img’+result).show();<\/span>
\n \/\/target .img + result which is the number from the slider – you to add e.g. imgslider \/\/img1\/imgslider img2 etc. to each image for the slider to work.<\/span><\/p>\n

\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }<\/span><\/p>\n

\u00a0\u00a0\u00a0 });<\/span><\/p>\n

}
\n<\/span>
\nAdding the jQuery<\/p>\n

Once you have set up your folder and files, add an HTML External object to you project, which is in the insert tab, HTML External.
\n\"insert_html\"
\nSelect the HTML External object and within properties and under \u2018Type\u2019 select Meta tags.
\n<\/a>\"HTML
\n<\/a>Click on the Edit and add the following lines, this will call in the files.
\nIf you wish to run the scripts from an external server all you need to do is add the external code shown below.\"Edit\"<\/a><\/strong><\/p>\n

For external code use:<\/strong><\/p>\n

<script src=\u201dhttps:\/\/code.jquery.com\/jquery-1.11.1.min.js\u201d><\/script><\/span>
\n<script src=\u201dhttp:\/\/code.jquery.com\/ui\/1.11.1\/jquery-ui.min.js\u201d><\/script><\/span>
\n<script src=”my_functions.js”><\/script><\/span><\/p>\n

For internal \u2013 these file should be in your Script folder.<\/strong><\/p>\n

<script src=”jquery-1.11.1.min.js”><\/script><\/span>
\n<script src=”jquery-ui.min.js”><\/script><\/span>
\n<script src=”my_functions.js”><\/script><\/span><\/p>\n

The same files will to be added to the \u2018additional files\u2019, which directly next to the edit.
\nOnce the pop up appears, you can either add each file from your Script folder or add the whole folder.\"additional
\n<\/a>On the page you have your slider, add an action, on \u2018show\u2019 \u2018runJS\u2019 in the JavaScript box type: init_drag_slider();\"runJS\"
\nMake your slider\/counter\/and bar seen.
\n\"Make
\n\u2018Click On\u2019 the appearance arrow and the CSS class will pop up. Enter the name of your object. For this example I have chosen the counter, therefore I named it counter. All the objects such as the slider and images will need to be named.\"CSS
\nEach image will require a name within the class, as shown above. I haven\u2019t found a quick way of doing this part yet so having 70 images is somewhat slow going.
\n\"name_images\"<\/a><\/p>\n

Now test your Lectora project and see the magic work.<\/p>\n

 <\/p>\n

Trouble shooting:<\/strong><\/p>\n

Check that you are pointing to the correct folder and are using the correct files
\nCheck you have all 3 in you edit HTML Extension
\nCheck you have added all 3 files to the \u2018additional files\u2019 area<\/p>\n

**Note When updating the function file.. Saving isn\u2019t good enough you need to add the function file again to the additional files and remove the old version, by clicking replace when promoted.<\/p>\n","protected":false},"excerpt":{"rendered":"

Added jQuery to your Lectora project, to create an image slider. I have created this blog entry to help anyone who is struggling to create an image slider in Lectora. Open and save a new Lectora project. Within the folder structure create a new folder called Script. You will need to download the following two […]<\/p>\n","protected":false},"author":110,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"enabled":false},"version":2}},"categories":[337],"tags":[],"class_list":["post-862","post","type-post","status-publish","format-standard","hentry","category-lectora"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/pdVSkC-dU","_links":{"self":[{"href":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-json\/wp\/v2\/posts\/862","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-json\/wp\/v2\/users\/110"}],"replies":[{"embeddable":true,"href":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-json\/wp\/v2\/comments?post=862"}],"version-history":[{"count":0,"href":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-json\/wp\/v2\/posts\/862\/revisions"}],"wp:attachment":[{"href":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-json\/wp\/v2\/media?parent=862"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-json\/wp\/v2\/categories?post=862"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogs.plymouth.ac.uk\/digital-education\/wp-json\/wp\/v2\/tags?post=862"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}