view-help-demos.php — Gallery : FooGallery 3.2.6

foogallery / includes / admin / view-help-demos.php

foogallery / includes / admin Last commit date

view-help-demos.php

210 lines

1	<?php
2
3	if ( ! defined( 'ABSPATH' ) ) {
4	exit;
5	}
6
7	function foogallery_admin_help_demo_item( $seed, $width, $height, $title, $desc, $href ) {
8	$placeholder = foogallery_get_svg_placeholder_image( $width, $height );
9	?><div class="fg-item fg-type-image fg-idle">
10	<figure class="fg-item-inner">
11	<a class="fg-thumb"
12	href="<?php echo esc_url( $href ); ?>"
13	data-type="image"
14	data-title="<?php echo esc_attr( $title ); ?>"
15	data-description="<?php echo esc_attr( $desc ); ?>">
16	<span class="fg-image-wrap">
17	<img class="fg-image"
18	src="<?php echo esc_url( $placeholder ); ?>"
19	data-src-fg="https://picsum.photos/seed/<?php echo esc_attr( $seed ); ?>/<?php echo esc_attr( $width ); ?>/<?php echo esc_attr( $height ); ?>"
20	data-srcset-fg="https://picsum.photos/seed/<?php echo esc_attr( $seed ); ?>/<?php echo absint( $width * 2 ); ?>/<?php echo absint( $height * 2 ); ?> 2x"
21	width="<?php echo esc_attr( $width ); ?>"
22	height="<?php echo esc_attr( $height ); ?>"
23	title="<?php echo esc_attr( $title ); ?>"
24	alt="<?php echo esc_attr( $desc ); ?>">
25	</span>
26	<span class="fg-image-overlay"></span>
27	</a>
28	<figcaption class="fg-caption">
29	<div class="fg-caption-inner">
30	<div class="fg-caption-title"><?php echo esc_html( $title ); ?></div>
31	<?php if ( !empty( $desc ) ) {?>
32	<div class="fg-caption-desc"><?php echo esc_html( $desc ); ?></div>
33	<?php } ?>
34	</div>
35	</figcaption>
36	</figure>
37	<div class="fg-loader"></div>
38	</div>
39	<?php
40	}
41
42	?>
43
44	<div id="demos_section" class="foogallery-admin-help-section fgah-demo" style="display: none">
45	<header>
46	<h3><?php esc_html_e( 'Gallery Demos 😎', 'foogallery' );?></h3>
47	<p><?php esc_html_e( 'Select a demo below to see it in action!', 'foogallery' ); ?></p>
48	<a href="#foogallery-admin-help-demo-1" class="foogallery-admin-help-demo foogallery-admin-help-button foogallery-admin-help-button-active"><?php esc_html_e( 'Default', 'foogallery' ); ?></a>
49	<a href="#foogallery-admin-help-demo-2" class="foogallery-admin-help-demo foogallery-admin-help-button"><?php esc_html_e( 'Masonry', 'foogallery' ); ?></a>
50	<a href="#foogallery-admin-help-demo-3" class="foogallery-admin-help-demo foogallery-admin-help-button"><?php esc_html_e( 'Image Viewer', 'foogallery' ); ?></a>
51	<a href="#foogallery-admin-help-demo-4" class="foogallery-admin-help-demo foogallery-admin-help-button"><?php esc_html_e( 'Justified', 'foogallery' ); ?></a>
52	<a href="#foogallery-admin-help-demo-5" class="foogallery-admin-help-demo foogallery-admin-help-button"><?php esc_html_e( 'Simple Portfolio', 'foogallery' ); ?></a>
53	<a href="#foogallery-admin-help-demo-6" class="foogallery-admin-help-demo foogallery-admin-help-button"><?php esc_html_e( 'Carousel', 'foogallery' ); ?></a>
54	<a href="<?php echo esc_url( foogallery_admin_url( 'https://fooplugins.com/foogallery-wordpress-gallery-plugin/demos/', 'help' ) ); ?>" target="_blank" class="foogallery-admin-help-button"><?php esc_html_e( 'More Demos', 'foogallery' ); ?><i class="dashicons dashicons-external"></i></a>
55	</header>
56
57	<div id="foogallery-admin-help-demo-1" class="foogallery-admin-help-demo-content">
58	<header class="foogallery-admin-help-header">
59	<h3 id="default_demo"><?php esc_html_e( 'Default Responsive Gallery Demo', 'foogallery' );?></h3>
60	<p><?php esc_html_e( 'Our default responsive gallery template. You have full control over the image border, captions and hover effects. This demo has a thin white border with a small gutter. An icon and the captions are shown on hover. There is also a dark tint and zoom hover effect.', 'foogallery' );?></p>
61	</header>
62
63	<div id="foogallery-gallery-0" class="foogallery fg-default fg-center fg-hover-zoomed-semi fg-gutter-10 fg-m-col2 fg-loading-default fg-loaded-fade-in fg-light fg-shadow-inset-small fg-caption-hover fg-hover-fade fg-hover-zoom4"
64	data-foogallery="{"lazy":true}">
65
66	<?php foogallery_admin_help_demo_item( '001', 250, 200, 'Lorem Ipsum' , '', '#default_demo' ); ?>
67	<?php foogallery_admin_help_demo_item( '016', 250, 200, 'Dolor Sit Amet' , 'Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.', '#default_demo' ); ?>
68	<?php foogallery_admin_help_demo_item( '003', 250, 200, 'Nulla Quis Lorem' , 'Quisque velit nisi, pretium ut lacinia in, elementum id enim. Quisque velit nisi.', '#default_demo' ); ?>
69	<?php foogallery_admin_help_demo_item( '009', 250, 200, 'Quisque ut Libero' , 'Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat.', '#default_demo' ); ?>
70	<?php foogallery_admin_help_demo_item( '005', 250, 200, 'Velit Nisi' , 'Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.', '#default_demo' ); ?>
71	<?php foogallery_admin_help_demo_item( '006', 250, 200, 'Vivamus Magna' , 'Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.', '#default_demo' ); ?>
72	<?php foogallery_admin_help_demo_item( '014', 250, 200, 'Lacinia Eget' , 'Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.', '#default_demo' ); ?>
73	<?php foogallery_admin_help_demo_item( '012', 250, 200, 'Consectetur Sed' , 'Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.', '#default_demo' ); ?>
74
75	</div>
76	</div>
77
78	<div id="foogallery-admin-help-demo-2" class="foogallery-admin-help-demo-content" style="display: none">
79	<header class="foogallery-admin-help-header">
80	<h3 id="masonry_demo"><?php esc_html_e( 'Masonry Demo', 'foogallery' );?></h3>
81	<p><?php esc_html_e( 'A masonry-style gallery template, which keeps all images at a constant width while packing them in to best fill the space. This demo has a thin white border and captions are below the image. Images also have hover effects.', 'foogallery' );?></p>
82	</header>
83	<style>
84	#foogallery-gallery-1.fg-masonry .fg-item {
85	width: 200px;
86	margin-right: 10px;
87	margin-bottom: 10px;
88	}
89	</style>
90	<div id="foogallery-gallery-1" class="foogallery fg-center fg-masonry fg-light fg-border-thin fg-shadow-small fg-loading-default fg-loaded-fade-in fg-hover-eye fg-captions-bottom fg-hover-fade fg-hover-plus fg-ready fg-fixed"
91	data-foogallery="{"item":{"showCaptionTitle":true,"showCaptionDescription":true},"lazy":true,"template":{"columnWidth":200,"gutter":10}}">
92	<div class="fg-column-width"></div>
93	<div class="fg-gutter-width"></div>
94
95	<?php foogallery_admin_help_demo_item( '1', 200, 300, 'Lorem Ipsum' , 'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae', '#masonry_demo' ); ?>
96	<?php foogallery_admin_help_demo_item( '4', 200, 200, 'Dolor Sit Amet' , 'Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec sollicitudin molestie malesuada.', '#masonry_demo' ); ?>
97	<?php foogallery_admin_help_demo_item( '6', 200, 250, 'Nulla Quis Lorem' , 'Quisque velit nisi, pretium ut lacinia in, elementum id enim. Quisque velit nisi, pretium ut lacinia in, elementum id enim.', '#masonry_demo' ); ?>
98	<?php foogallery_admin_help_demo_item( '9', 200, 220, 'Quisque ut Libero' , 'Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.', '#masonry_demo' ); ?>
99	<?php foogallery_admin_help_demo_item( '16', 200, 250, 'Velit Nisi' , 'Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.', '#masonry_demo' ); ?>
100	<?php foogallery_admin_help_demo_item( '15', 200, 300, 'Vivamus Magna' , 'Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.', '#masonry_demo' ); ?>
101	<?php foogallery_admin_help_demo_item( '12', 200, 150, 'Lacinia Eget' , 'Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ante ipsum primis in faucibus orci luctus.', '#masonry_demo' ); ?>
102	<?php foogallery_admin_help_demo_item( '13', 200, 200, 'Consectetur Sed' , 'Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.', '#masonry_demo' ); ?>
103
104	</div>
105	</div>
106
107	<div id="foogallery-admin-help-demo-3" class="foogallery-admin-help-demo-content" style="display: none">
108	<header class="foogallery-admin-help-header">
109	<h3 id="iv_demo"><?php esc_html_e( 'Image Viewer Demo', 'foogallery' );?></h3>
110	<p><?php esc_html_e( 'Our image viewer gallery template, which showcases a single image at a time. In this demo, captions are always shown, and a white hover effect is also enabled.', 'foogallery' );?></p>
111	</header>
112	<div id="foogallery-gallery-2" class="foogallery foogallery-link-image fg-center fg-image-viewer fg-light fg-border-thin fg-shadow-outline fg-loading-default fg-loaded-fade-in fg-caption-always fg-hover-fade fg-hover-zoom fg-ready fg-light-overlays fg-round-small"
113	data-foogallery="{"item":{"showCaptionTitle":true,"showCaptionDescription":true},"lazy":true,"template":{"loop":true}}">
114	<div class="fiv-inner">
115	<div class="fiv-inner-container">
116	<?php foogallery_admin_help_demo_item( '21', 500, 400, 'Lorem Ipsum' , 'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae', '#iv_demo' ); ?>
117	<?php foogallery_admin_help_demo_item( '24', 500, 400, 'Dolor Sit Amet' , 'Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec sollicitudin molestie malesuada.', '#iv_demo' ); ?>
118	<?php foogallery_admin_help_demo_item( '26', 500, 400, 'Nulla Quis Lorem' , 'Quisque velit nisi, pretium ut lacinia in, elementum id enim. Quisque velit nisi, pretium ut lacinia in, elementum id enim.', '#iv_demo' ); ?>
119	<?php foogallery_admin_help_demo_item( '29', 500, 400, 'Quisque ut Libero' , 'Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.', '#iv_demo' ); ?>
120	<?php foogallery_admin_help_demo_item( '216', 500, 400, 'Velit Nisi' , 'Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.', '#iv_demo' ); ?>
121	</div>
122	<div class="fiv-ctrls">
123	<div class="fiv-prev"><span>Prev</span></div>
124	<label class="fiv-count"><span class="fiv-count-current">1</span>of<span class="fiv-count-total">5</span></label>
125	<div class="fiv-next"><span>Next</span></div>
126	</div>
127	</div>
128	</div>
129	</div>
130
131	<div id="foogallery-admin-help-demo-4" class="foogallery-admin-help-demo-content" style="display: none">
132	<header class="foogallery-admin-help-header">
133	<h3 id="justified_demo"><?php esc_html_e( 'Justified Demo', 'foogallery' );?></h3>
134	<p><?php esc_html_e( 'A justified gallery template, where the images have a similar height. This demo has no image borders, the captions are always visible and overlaid on top of the images. There is also a simple hover effect.', 'foogallery' );?></p>
135	</header>
136	<style>
137	#foogallery-gallery-3.fg-justified .fg-item {
138	margin-right: 1px;
139	margin-bottom: 1px;
140	}
141	#foogallery-gallery-3.fg-justified .fg-image {
142	height: 200px;
143	}
144	</style>
145	<div id="foogallery-gallery-3" class="foogallery foogallery-container foogallery-justified foogallery-lightbox-foogallery fg-justified fg-dark fg-loading-default fg-loaded-fade-in fg-caption-always fg-hover-fade fg-hover-zoom2 fg-ready"
146	data-foogallery="{"item":{"showCaptionTitle":true,"showCaptionDescription":false},"lazy":true,"template":{"rowHeight":200,"maxRowHeight":250,"margins":1,"align":"center"}}">
147	<div class="fg-column-width"></div>
148	<div class="fg-gutter-width"></div>
149
150	<?php foogallery_admin_help_demo_item( '31', 300, 250, 'Lorem Ipsum' , '', '#justified_demo' ); ?>
151	<?php foogallery_admin_help_demo_item( '32', 150, 250, 'Dolor Sit Amet' , '', '#justified_demo' ); ?>
152	<?php foogallery_admin_help_demo_item( '34', 200, 250, 'Nulla Quis Lorem' , '', '#justified_demo' ); ?>
153	<?php foogallery_admin_help_demo_item( '37', 220, 250, 'Quisque ut Libero' , '', '#justified_demo' ); ?>
154	<?php foogallery_admin_help_demo_item( '38', 250, 250, 'Velit Nisi' , '', '#justified_demo' ); ?>
155	<?php foogallery_admin_help_demo_item( '39', 180, 250, 'Vivamus Magna' , '', '#justified_demo' ); ?>
156	<?php foogallery_admin_help_demo_item( '310', 350, 250, 'Lacinia Eget' , '', '#justified_demo' ); ?>
157	<?php foogallery_admin_help_demo_item( '313', 250, 250, 'Consectetur Sed' , '', '#justified_demo' ); ?>
158	<?php foogallery_admin_help_demo_item( '314', 320, 250, 'Nisi Magna' , '', '#justified_demo' ); ?>
159	</div>
160	</div>
161
162	<div id="foogallery-admin-help-demo-5" class="foogallery-admin-help-demo-content" style="display: none">
163	<header class="foogallery-admin-help-header">
164	<h3 id="portfolio_demo"><?php esc_html_e( 'Simple Portfolio Gallery Demo', 'foogallery' );?></h3>
165	<p><?php esc_html_e( 'A portfolio gallery template that keeps all items in a row at the same height. Captions are visible below the images and centered.', 'foogallery' );?></p>
166	</header>
167	<style>
168	#foogallery-gallery-4.fg-simple_portfolio {
169	justify-content: center;
170	}
171	#foogallery-gallery-4.fg-simple_portfolio .fg-item {
172	flex-basis: 250px;
173	margin: 5px;
174	}
175	</style>
176	<div id="foogallery-gallery-4" class="foogallery foogallery-container foogallery-simple_portfolio foogallery-lightbox-foogallery fg-simple_portfolio fg-light fg-border-thin fg-shadow-outline fg-loading-default fg-loaded-fade-in fg-caption-always fg-hover-fade fg-hover-zoom fg-c-c fg-ready fg-caption-always"
177	data-foogallery="{"item":{"showCaptionTitle":true,"showCaptionDescription":true},"lazy":true}">
178	<?php foogallery_admin_help_demo_item( '41', 250, 200, 'Lorem Ipsum' , 'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae', '#portfolio_demo' ); ?>
179	<?php foogallery_admin_help_demo_item( '42', 250, 200, 'Dolor Sit Amet' , 'Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec sollicitudin molestie malesuada.', '#portfolio_demo' ); ?>
180	<?php foogallery_admin_help_demo_item( '44', 250, 200, 'Nulla Quis Lorem' , 'Quisque velit nisi, pretium ut lacinia in, elementum id enim. Quisque velit nisi, pretium ut lacinia in, elementum id enim.', '#portfolio_demo' ); ?>
181	<?php foogallery_admin_help_demo_item( '45', 250, 200, 'Quisque ut Libero' , 'Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.', '#portfolio_demo' ); ?>
182	<?php foogallery_admin_help_demo_item( '46', 250, 200, 'Velit Nisi' , 'Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.', '#portfolio_demo' ); ?>
183	<?php foogallery_admin_help_demo_item( '47', 250, 200, 'Quis Dolor' , 'Curabitur arcu erat, accumsan id imperdiet et. Vestibulum ac diam sit amet.', '#portfolio_demo' ); ?>
184	</div>
185	</div>
186
187	<div id="foogallery-admin-help-demo-6" class="foogallery-admin-help-demo-content" style="display: none">
188	<header class="foogallery-admin-help-header">
189	<h3 id="portfolio_demo"><?php esc_html_e( 'Carousel Gallery Demo', 'foogallery' );?></h3>
190	<p><?php esc_html_e( 'A responsive carousel gallery allows you to showcase your images in a single row.', 'foogallery' );?></p>
191	</header>
192	<div id="foogallery-gallery-5" class="foogallery foogallery-container foogallery-carousel foogallery-lightbox-foogallery fg-carousel fg-light fg-border-thin fg-shadow-outline fg-loading-default fg-loaded-fade-in fg-hover-fade fg-hover-zoom fg-c-c fg-ready"
193	data-foogallery="{"item":{"showCaptionTitle":true,"showCaptionDescription":false},"lazy":true,"template":{"maxItems":5,"scale":0.12,"gutter":{"min":-40,"max":-20,"unit":"%"},"autoplay":{"time":6,"interaction":"pause"},"centerOnClick":true}}">
194	<button type="button" class="fg-carousel-prev"></button>
195	<div class="fg-carousel-inner">
196	<div class="fg-carousel-center"></div>
197	<?php foogallery_admin_help_demo_item( '48', 250, 200, 'Lorem Ipsum' , 'Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae', '#portfolio_demo' ); ?>
198	<?php foogallery_admin_help_demo_item( '49', 250, 200, 'Dolor Sit Amet' , 'Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Donec sollicitudin molestie malesuada.', '#carousel_demo' ); ?>
199	<?php foogallery_admin_help_demo_item( '50', 250, 200, 'Nulla Quis Lorem' , 'Quisque velit nisi, pretium ut lacinia in, elementum id enim. Quisque velit nisi, pretium ut lacinia in, elementum id enim.', '#carousel_demo' ); ?>
200	<?php foogallery_admin_help_demo_item( '51', 250, 200, 'Quisque ut Libero' , 'Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem.', '#carousel_demo' ); ?>
201	<?php foogallery_admin_help_demo_item( '52', 250, 200, 'Velit Nisi' , 'Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.', '#carousel_demo' ); ?>
202	<?php foogallery_admin_help_demo_item( '53', 250, 200, 'Quis Dolor' , 'Curabitur arcu erat, accumsan id imperdiet et. Vestibulum ac diam sit amet.', '#carousel_demo' ); ?>
203	</div>
204	<div class="fg-carousel-bottom"></div>
205	<div class="fg-carousel-progress"></div>
206	<button type="button" class="fg-carousel-next"></button>
207	</div>
208	</div>
209	</div>
210