API tools faq
paste
Advertisement
Mr_media

slider_test_jQuery

Mr_media
Dec 13th, 2019
72
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.40 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="nl-NL">
  3. <head>
  4.  
  5. <meta charset="utf-8">
  6. <!--
  7. (c) 2015 - DesignOntwerp | TYPO3 HocomAdvies.nl
  8.  
  9. This website is powered by TYPO3 - inspiring people to share!
  10. TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
  11. TYPO3 is copyright 1998-2019 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
  12. Information and contribution at https://typo3.org/
  13. -->
  14.  
  15.  
  16. <link rel="shortcut icon" href="/typo3conf/ext/shufflemix_template_new/Resources/Public/images/favicon.ico" type="image/x-icon">
  17.  
  18. <meta name="generator" content="TYPO3 CMS" />
  19. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  20. <meta name="robots" content="index,follow" />
  21. <meta name="coypright" content="SHUFFLEMIX BV - HOCOMADVIES.NL" />
  22. <meta name="revisit-after" content="5 days" />
  23. <meta name="distribution" content="global" />
  24.  
  25.  
  26. <link rel="stylesheet" type="text/css" href="/typo3temp/assets/css/840e456d43.css?1573498924" media="all">
  27. <link rel="stylesheet" type="text/css" href="/typo3conf/ext/shufflemix_template_new/Resources/Public/Css/powermail/powermailshufflemix.css?1575984393" media="all">
  28. <link rel="stylesheet" type="text/css" href="/typo3conf/ext/shufflemix_template_new/Resources/Public/Css/jquery.fancybox.min.css?1575984393" media="all">
  29. <link rel="stylesheet" type="text/css" href="/typo3conf/ext/shufflemix_template_new/Resources/Public/slider-pro-master/dist/css/slider-pro.min.css?1576150594" media="all">
  30. <link rel="stylesheet" type="text/css" href="/typo3conf/ext/shufflemix_template_new/Resources/Public/Css/foundation-6.4.2-custom/css/foundation.css?1575984421" media="all">
  31. <link rel="stylesheet" type="text/css" href="/typo3conf/ext/shufflemix_template_new/Resources/Public/Icons/foundation_icons_general/stylesheets/general_foundicons.css?1575984421" media="all">
  32. <link rel="stylesheet" type="text/css" href="/typo3conf/ext/shufflemix_template_new/Resources/Public/Css/app.css?1576230773" media="all">
  33.  
  34.  
  35.  
  36.  
  37.  
  38.  
  39. <title>test4&nbsp;| Shuffle-Mix</title>
  40. </head>
  41. <body>
  42. <!-- Mobiele navigatie -->
  43. <div class="off-canvas-wrapper">
  44. <div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
  45. <div class="off-canvas position-left" id="offCanvas" data-off-canvas>
  46. <!-- Close button -->
  47. <button class="close-button" aria-label="Close menu" type="button" data-close>
  48. <span aria-hidden="true">&times;</span>
  49. </button>
  50.  
  51. <!-- Menu hier komt het Typo3 menu -->
  52. <ul class="vertical menu" data-drilldown data-parent-link="true" ><li><a href="/" target="_top">Home</a></li><li><a href="/producten/shufflemixer-100" target="_top">Producten</a><ul class="menu vertical" data-drildown data-parent-link="true"><li><a href="/producten/shufflemixer-100" target="_top">Shufflemixer 100</a></li><li><a href="/producten/shufflemixer-250-1000" target="_top">Shufflemixer 250 - 1000</a></li><li><a href="/producten/cip-systeem" target="_top">CIP systeem</a></li><li><a href="/producten/injectiesystemen" target="_top">Injectiesystemen</a></li><li><a href="/producten/koelgroep" target="_top">Koelgroep</a></li><li><a href="/producten/tanks-en-mengers" target="_top">Tanks en mengers</a></li><li><a href="/producten/manifold" target="_top">Manifold</a></li><li><a href="/producten/statische-mengers" target="_top">Statische mengers</a></li></ul></li><li><a href="/toepassingen/dairy-verse-room" target="_top">Toepassingen</a><ul class="menu vertical" data-drildown data-parent-link="true"><li><a href="/toepassingen/dairy-verse-room" target="_top">Dairy (verse) room</a></li><li><a href="/toepassingen/glazuur" target="_top">Glazuur</a></li><li><a href="/toepassingen/plantaardige-room" target="_top">Plantaardige room</a></li><li><a href="/toepassingen/sponscake-swiss-roll" target="_top">(Spons)cake &amp; Swiss roll</a></li><li><a href="/toepassingen/chiffon-cake" target="_top">Chiffon cake</a></li><li><a href="/toepassingen/chocolade-mousse" target="_top">Chocolade mousse</a></li></ul></li><li><a href="/films" target="_top">Films</a></li><li><a href="/over-shuffle-mix" target="_top">Over Shuffle-Mix</a></li><li><a href="/contact" target="_top">Contact</a></li><li><a href="/test3" target="_top">test3</a></li><li><a href="/test4" target="_top">test4</a></li></ul>
  53. </div>
  54.  
  55. <div class="off-canvas-content" data-off-canvas-content>
  56.  
  57. <!--- Mobiele navigatie bar tonen --->
  58. <div class="sticky-container" data-sticky-container>
  59. <div class="sticky" data-sticky data-options="stickTo:top;stickyOn:small;marginTop:0;" style="width:100%" data-top-anchor="1">
  60. <div class="title-bar hide-for-large">
  61. <div class="title-bar-left">
  62. <!-- <button class="menu-icon" type="button" data-open="offCanvas"></button> --->
  63.  
  64. <button class="hamburger" id="hamburger-1" type="button" data-open="offCanvas">
  65. <span class="line"></span>
  66. <span class="line"></span>
  67. <span class="line"></span>
  68. </button>
  69. </div>
  70. <!--- <span class="title-bar-title">SHUFFLEMIX.COM</span> --->
  71. </div>
  72. <div class="title-bar-right">
  73.  
  74.  
  75. <a href="/"><img class="header_logo hide-for-large" src="/typo3conf/ext/shufflemix_template_new/Resources/Public/Css/logo.png"></a>
  76. <!--
  77. <a href="/" target="_top" title="home"><img src="/typo3conf/ext/shufflemix_template/Resources/Public/images/logo.png" width="264" height="132" alt="" border="0"></a>
  78. -->
  79. </div>
  80. </div>
  81. </div>
  82. </div>
  83. </div>
  84.  
  85.  
  86. <!--- DESKTOP NAVIGATIE ---->
  87.  
  88.  
  89.  
  90.  
  91. <!-- Hier komt het Typo3 menu -->
  92. <div class="top-bar-container show-for-large" data-sticky-container >
  93. <div class="sticky" data-options="marginTop:0;" data-sticky style="width:100%;" >
  94. <div class="top-bar large">
  95. <div class="top-bar-left"><a href="/"><img class="header_logo hide-for-small" style="margin-top:10px;" src="/typo3conf/ext/shufflemix_template_new/Resources/Public/Css/logo.png"></a></div>
  96.  
  97. <div class="top-bar-right">
  98. <!-- H2 Pagina-header van subtitle of pagetitle -->
  99. <div>
  100. <div class="header_info">
  101. <div id="c403" class="frame frame-default frame-type-text frame-layout-0"><p>Shuffle-Mix B.V. &nbsp; | &nbsp; Tel.: +31 342 450 322 &nbsp; | &nbsp; <a href="mailto:info@shufflemix.com" class="mail">info@shufflemix.com</a></p></div>
  102.  
  103. </div>
  104.  
  105. <div class="social-bar">
  106.  
  107. <img src="/typo3temp/assets/menu/csm_de_8cae27a812_0314f65cb1.gif" width="40" height="32" border="0" alt="test4" /><img src="/typo3temp/assets/menu/csm_en_1c7c73ea47_8e55ced4f5.gif" width="40" height="32" border="0" alt="test4" /><a href="/test4"><img src="/typo3temp/assets/menu/csm_nl_bdfdc34ebc_4cb9750b34.gif" width="40" height="32" border="0" alt="test4" /></a>
  108.  
  109. <!---
  110. <ul class="social-icons">
  111. <li><a href=""><i class="fi-social-pinterest"></i></a></li>
  112. <li><a href=""><i class="fi-social-instagram"></i></a></li>
  113. <li><a href=""><i class="fi-social-facebook"></i></a></li>
  114. </ul>
  115.  
  116. -->
  117. </div>
  118.  
  119. </div>
  120. </div>
  121. </div>
  122.  
  123.  
  124.  
  125. <!-- hier de main navigatie -->
  126.  
  127. <div class="row color_red hide-for-small">
  128. <div class="large-12 columns">
  129. <!-- navigatie -->
  130. <div class="">
  131. <ul class="dropdown menu" data-dropdown-menu><li has-submenu><a href="/" target="_top">Home</a></li><li has-submenu><a href="/producten/shufflemixer-100" target="_top">Producten</a><ul class="submenu menu vertical" data-submenu"><li class="has-submenu"><a href="/producten/shufflemixer-100" target="_top">Shufflemixer 100</a></li><li class="has-submenu"><a href="/producten/shufflemixer-250-1000" target="_top">Shufflemixer 250 - 1000</a></li><li class="has-submenu"><a href="/producten/cip-systeem" target="_top">CIP systeem</a></li><li class="has-submenu"><a href="/producten/injectiesystemen" target="_top">Injectiesystemen</a></li><li class="has-submenu"><a href="/producten/koelgroep" target="_top">Koelgroep</a></li><li class="has-submenu"><a href="/producten/tanks-en-mengers" target="_top">Tanks en mengers</a></li><li class="has-submenu"><a href="/producten/manifold" target="_top">Manifold</a></li><li class="has-submenu"><a href="/producten/statische-mengers" target="_top">Statische mengers</a></li></ul></li><li has-submenu><a href="/toepassingen/dairy-verse-room" target="_top">Toepassingen</a><ul class="submenu menu vertical" data-submenu"><li class="has-submenu"><a href="/toepassingen/dairy-verse-room" target="_top">Dairy (verse) room</a></li><li class="has-submenu"><a href="/toepassingen/glazuur" target="_top">Glazuur</a></li><li class="has-submenu"><a href="/toepassingen/plantaardige-room" target="_top">Plantaardige room</a></li><li class="has-submenu"><a href="/toepassingen/sponscake-swiss-roll" target="_top">(Spons)cake &amp; Swiss roll</a></li><li class="has-submenu"><a href="/toepassingen/chiffon-cake" target="_top">Chiffon cake</a></li><li class="has-submenu"><a href="/toepassingen/chocolade-mousse" target="_top">Chocolade mousse</a></li></ul></li><li has-submenu><a href="/films" target="_top">Films</a></li><li has-submenu><a href="/over-shuffle-mix" target="_top">Over Shuffle-Mix</a></li><li has-submenu><a href="/contact" target="_top">Contact</a></li><li has-submenu><a href="/test3" target="_top">test3</a></li><li has-submenu><a href="/test4" target="_top">test4</a></li></ul>
  132. </div>
  133. </div>
  134. </div
  135. </div>
  136. </div>
  137. </div>
  138.  
  139.  
  140.  
  141.  
  142.  
  143.  
  144.  
  145. <!--- MAINCONTENT (render hier de hoofdinhoud van de site) - sections ---->
  146.  
  147. <section class="main">
  148. <!--- hier eventueel de content_van_column 1 --->
  149.  
  150. <!--- end content_column_1 --->
  151.  
  152. <!--- hier content_main --->
  153.  
  154. <div id="c468" class="frame frame-default frame-type-shortcut frame-layout-0"><div id="c465" class="frame frame-default frame-type-list frame-layout-0"><div class="tx-fp-fractionslider"><pre>
  155. **Installation guide**
  156. You need the Slider Pro-Plugin from here for this template:
  157. http://bqworks.com/slider-pro/
  158. https://github.com/bqworks/slider-pro
  159.  
  160. Download it and copy the css/slider-pro.min.css and js/jquery.sliderPro.min.js to your fileadmin-folder and
  161. load them with the viewhelper re:addPublicResources.
  162. Copy this file (Resources/Private/Templates/Slide/Sliderpro.html) to the fileadmin-folder too and
  163. mofify the path to the slider-plugin below. Remove this pre-comment.
  164. After you have modified the path, you can use this template from your fileadmin-folder.
  165. Change the path to this template via TypoScript-constants. Example:
  166. plugin.tx_fpfractionslider_pi1.view {
  167. templateRootPath = fileadmin/bsdist/theme/tmpl/fractionslider/Templates/
  168. partialRootPath = fileadmin/bsdist/theme/tmpl/fractionslider/Partials/
  169. layoutRootPath = fileadmin/bsdist/theme/tmpl/fractionslider/Layouts/
  170. }
  171. Now you can customise this template. E.g. change the path to the transparent clear.gif.
  172. </pre><div id="derslider" class="slider-pro"><div class="sp-slides"></div><div class="sp-thumbnails"></div></div><script type="text/javascript">
  173.  
  174.  
  175. var pro_width = '100%';
  176. var pro_height = '400px';
  177. var pro_responsive = true;
  178. var pro_aspectRatio = -1;
  179. var pro_imageScaleMode = 'cover';
  180. var pro_centerImage = true;
  181. var pro_allowScaleUp = true;
  182. var pro_autoHeight = false;
  183. var pro_autoSlideSize = false;
  184. var pro_startSlide = 0;
  185. var pro_shuffle = false;
  186. var pro_orientation = 'horizontal';
  187. var pro_forceSize = 'none';
  188. var pro_loop = true;
  189. var pro_slideDistance = 10;
  190. var pro_slideAnimationDuration = 700;
  191. var pro_heightAnimationDuration = 700;
  192. var pro_visibleSize = 'auto';
  193. var pro_centerSelectedSlide = true;
  194. var pro_rightToLeft = false;
  195. var pro_fade = false;
  196. var pro_fadeOutPreviousSlide = true;
  197. var pro_fadeDuration = 500;
  198. var pro_autoplay = true;
  199. var pro_autoplayDelay = 5000;
  200. var pro_autoplayDirection = 'normal';
  201. var pro_autoplayOnHover = 'pause';
  202. var pro_arrows = false;
  203. var pro_fadeArrows = true;
  204. var pro_buttons = true;
  205. var pro_keyboard = true;
  206. var pro_keyboardOnlyOnFocus = false;
  207. var pro_touchSwipe = true;
  208. var pro_touchSwipeThreshold = 50;
  209. var pro_fadeCaption = true;
  210. var pro_captionFadeDuration = 500;
  211. var pro_fullScreen = false;
  212. var pro_fadeFullScreen = true;
  213. var pro_waitForLayers = false;
  214. var pro_autoScaleLayers = true;
  215. var pro_autoScaleReference = -1;
  216. var pro_smallSize = 480;
  217. var pro_mediumSize = 768;
  218. var pro_largeSize = 1024;
  219. var pro_updateHash = false;
  220. var pro_reachVideoAction = 'none';
  221. var pro_leaveVideoAction = 'pauseVideo';
  222. var pro_playVideoAction = 'stopAutoplay';
  223. var pro_pauseVideoAction = 'none';
  224. var pro_endVideoAction = 'none';
  225. var pro_thumbnailWidth = 300;
  226. var pro_thumbnailHeight = 76;
  227. var pro_thumbnailsPosition = 'bottom';
  228. var pro_thumbnailPointer = false;
  229. var pro_thumbnailArrows = false;
  230. var pro_fadeThumbnailArrows = true;
  231. var pro_thumbnailTouchSwipe = true;
  232. $j.noConflict();
  233. $( document ).ready(function( $j ) {
  234. $( '#derslider' ).sliderPro({
  235. width: pro_width,
  236. height: pro_height,
  237. responsive: pro_responsive,
  238. aspectRatio: pro_aspectRatio,
  239. imageScaleMode: pro_imageScaleMode,
  240. centerImage: pro_centerImage,
  241. allowScaleUp: pro_allowScaleUp,
  242. autoHeight: pro_autoHeight,
  243. autoSlideSize: pro_autoSlideSize,
  244. startSlide: pro_startSlide,
  245. shuffle: pro_shuffle,
  246. orientation: pro_orientation,
  247. forceSize: pro_forceSize,
  248. loop: pro_loop,
  249. slideDistance: pro_slideDistance,
  250. slideAnimationDuration: pro_slideAnimationDuration,
  251. heightAnimationDuration: pro_heightAnimationDuration,
  252. visibleSize: pro_visibleSize,
  253. centerSelectedSlide: pro_centerSelectedSlide,
  254. rightToLeft: pro_rightToLeft,
  255. // breakpoints: {
  256. // 991: {
  257. // thumbnailWidth: 270
  258. // },
  259. // 767: {
  260. // thumbnailsPosition: 'bottom',
  261. // thumbnailWidth: 120,
  262. // thumbnailHeight: 120
  263. // }
  264. // },
  265. fade: pro_fade,
  266. fadeOutPreviousSlide: pro_fadeOutPreviousSlide,
  267. fadeDuration: pro_fadeDuration,
  268. autoplay: pro_autoplay,
  269. autoplayDelay: pro_autoplayDelay,
  270. autoplayDirection: pro_autoplayDirection,
  271. autoplayOnHover: pro_autoplayOnHover,
  272. arrows: pro_arrows,
  273. fadeArrows: pro_fadeArrows,
  274. buttons: pro_buttons,
  275. keyboard: pro_keyboard,
  276. keyboardOnlyOnFocus: pro_keyboardOnlyOnFocus,
  277. touchSwipe: pro_touchSwipe,
  278. touchSwipeThreshold: pro_touchSwipeThreshold,
  279. fadeCaption: pro_fadeCaption,
  280. captionFadeDuration: pro_captionFadeDuration,
  281. fullScreen: pro_fullScreen,
  282. fadeFullScreen: pro_fadeFullScreen,
  283. waitForLayers: pro_waitForLayers,
  284. autoScaleLayers: pro_autoScaleLayers,
  285. autoScaleReference: pro_autoScaleReference,
  286. smallSize: pro_smallSize,
  287. mediumSize: pro_mediumSize,
  288. largeSize: pro_largeSize,
  289. updateHash: pro_updateHash,
  290. reachVideoAction: pro_reachVideoAction,
  291. leaveVideoAction: pro_leaveVideoAction,
  292. playVideoAction: pro_playVideoAction,
  293. pauseVideoAction: pro_pauseVideoAction,
  294. endVideoAction: pro_endVideoAction,
  295. thumbnailWidth: pro_thumbnailWidth,
  296. thumbnailHeight: pro_thumbnailHeight,
  297. thumbnailsPosition: pro_thumbnailsPosition,
  298. thumbnailPointer: pro_thumbnailPointer,
  299. thumbnailArrows: pro_thumbnailArrows,
  300. fadeThumbnailArrows: pro_fadeThumbnailArrows,
  301. thumbnailTouchSwipe: pro_thumbnailTouchSwipe
  302. });
  303. });
  304. </script></div></div></div>
  305.  
  306.  
  307. <!-- end content_main --->
  308.  
  309. </section>
  310.  
  311.  
  312.  
  313.  
  314. <!--- Red Footer ---->
  315. <footer class="footer">
  316. <div class="wrap row">
  317.  
  318. <div class="small-12 large-3 column">
  319. <a href="#"><img class="footer_logo hide-for-small" src="/typo3conf/ext/shufflemix_template_new/Resources/Public/Css/logo.png" /></a>
  320. <hr>
  321.  
  322. <div id="c403" class="frame frame-default frame-type-text frame-layout-0"><p>Shuffle-Mix B.V. &nbsp; | &nbsp; Tel.: +31 342 450 322 &nbsp; | &nbsp; <a href="mailto:info@shufflemix.com" class="mail">info@shufflemix.com</a></p></div>
  323.  
  324.  
  325. </div>
  326.  
  327. <div class="small-12 large-3 columns">
  328. <h4></h4>
  329. <hr>
  330. <h4>header tekst hier</h4>
  331. </div>
  332. <div class="small-12 large-3 columns">
  333. <h4> </h4>
  334. <hr>
  335. <h4> header tekst hier</h4>
  336. </div>
  337. <div class="small-12 large-3 columns">
  338. <h4></h4>
  339. <hr>
  340. <h4>header tekst hier</h4>
  341. </div>
  342. </div>
  343. </div>
  344. </footer>
  345. </div>
  346. <div class="payoff">
  347. <div class="wrap row">
  348. <div class="large-12 columns">
  349. hier de footer text
  350. </div>
  351. </div>
  352. </div>
  353. <!--- End of the Footer ---->
  354.  
  355. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
  356. <script src="/typo3conf/ext/shufflemix_template_new/Resources/Public/Css/foundation-6.4.2-custom/js/vendor/foundation.js?1575984421" type="text/javascript"></script>
  357. <script src="/typo3conf/ext/shufflemix_template_new/Resources/Public/Css/foundation-6.4.2-custom/js/app.js?1576223329" type="text/javascript"></script>
  358. <script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" type="text/javascript"></script>
  359. <script src="/typo3conf/ext/shufflemix_template_new/Resources/Public/slider-pro-master/dist/js/jquery.sliderPro.min.js?1576166719" type="text/javascript"></script>
  360.  
  361.  
  362. </body>
  363. </html>
  364. <!-- Cached page generated 13-12-19 11:02. Expires 14-12-19 11:02 -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!