scrollsequence / admin / partials / scrollsequence-admin-display-options.php

scrollsequence-admin-display-options.php in Scrollsequence – Cinematic Scroll Image Animation Plugin 1.6.3, at admin/partials/scrollsequence-admin-display-options.php

122 lines 3.5 KB

Raw Download Zip

1
2
3	<form method="post" action="options.php">
4	<?php
5	settings_fields( 'scrollsequence-settings-group' );
6	?>
7	<?php
8	do_settings_sections( 'scrollsequence-settings-group' );
9	?>
10	<table class="form-table">
11
12
13	<tr valign="top">
14	<th scope="row"><?php
15	_e( 'High Definition Canvas', 'scrollsequence' );
16	?></th>
17	<td>
18	<input type="radio" id="sticky-js-id" name="ssq_option_canvas_dpr" value="quality" <?php
19	checked( 'quality', get_option( 'ssq_option_canvas_dpr' ), true );
20	?>>
21	<label for="sticky-js-id">
22	<?php
23	_e( 'Maximum Image Quality (default)', 'scrollsequence' );
24	?> -
25	<?php
26	_e( 'Retina and high pixel density devices will show HD images.', 'scrollsequence' );
27	?>
28	</label><br>
29	<br>
30	<input type="radio" id="canvas-dpr-id" name="ssq_option_canvas_dpr" value="performance" <?php
31	checked( 'performance', get_option( 'ssq_option_canvas_dpr' ), true );
32	?>>
33	<label for="canvas-dpr-id">
34	<?php
35	_e( 'Maximum Performance', 'scrollsequence' );
36	?> -
37	<?php
38	_e( 'Retina and high pixel density devices may show blured images.', 'scrollsequence' );
39	?>
40
41	</label><br>
42
43
44	</td>
45	</tr>
46
47
48	<tr valign="top">
49	<th scope="row"><?php
50	_e( 'Image Preload Percentage', 'scrollsequence' );
51	?></th>
52	<td>
53	<input type="range" name="ssq_option_preload_percentage" min="0.0" max="0.5" step="0.02" value="<?php
54	echo esc_attr( get_option( 'ssq_option_preload_percentage' ) );
55	?>" class="slider" id="ssqRange"> <span id="ssqRangeOutput"></span>
56	<p class="description" ><?php
57	_e( 'Display animation after percentage of images are finished preloading. Default 12%', 'scrollsequence' );
58	?></p>
59	</td>
60	</tr>
61
62
63	<tr valign="top">
64	<th scope="row"><?php
65	_e( 'Position Sticky', 'scrollsequence' );
66	?></th>
67	<td>
68
69	<input type="radio" id="sticky-css-id" name="ssq_option_position_sticky" value="sticky-css" <?php
70	checked( 'sticky-css', get_option( 'ssq_option_position_sticky' ), true );
71	?>>
72	<label for="sticky-css-id"><?php
73	_e( 'CSS Sticky (recommended) - works with some themes', 'scrollsequence' );
74	?></label><br>
75	<br>
76	<input type="radio" id="sticky-js-id" name="ssq_option_position_sticky" value="sticky-js" <?php
77	checked( 'sticky-js', get_option( 'ssq_option_position_sticky' ), true );
78	?>>
79	<label for="sticky-js-id"><?php
80	_e( 'Javascript Sticky (default) - works with most themes', 'scrollsequence' );
81	?></label><br>
82
83	<p class="description" ><?php
84	_e( 'See documentation for more details.', 'scrollsequence' );
85	?></p>
86	<p><a href="https://scrollsequence.com/documentation/" target="_blank">Documentation</a></p>
87	</td>
88	</tr>
89
90
91
92
93	<?php
94	// END OF PRO ONLY
95	?>
96	</table>
97
98	<?php
99	submit_button();
100	?>
101
102	</form>
103
104
105	<script>
106	(function () {
107	var slider = document.getElementById("ssqRange");
108	var output = document.getElementById("ssqRangeOutput");
109	output.innerHTML = Math.round(slider.value*100)+'%'; // Display the default slider value
110	// Update the current slider value (each time you drag the slider handle)
111	slider.oninput = function() {
112	output.innerHTML = Math.round(this.value*100)+'%';
113	}
114
115	var x = document.getElementById("ssqRange");
116	var defaultVal = x.defaultValue;
117	var currentVal = x.value;
118	console.log('defaultVal',defaultVal,'currentVal:',currentVal)
119
120	})();
121	</script>
122