Skip to content

Commit f4878f6

Browse files
CodeHimBlogCodeHimBlog
committed
Upload file: maximage-by-akv2.html
1 parent 07be795 commit f4878f6

File tree

1 file changed

+377
-0
lines changed

1 file changed

+377
-0
lines changed

‎jquery-plugins/maximage-by-akv2.html

+377
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,377 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Maximage by Akv2</title>
7+
<meta name="description" content="The first jQuery plugin to use jQuery Cycle plugin as a fullscreen background slideshow.">
8+
<meta name="author" content="akv2">
9+
<meta name="robots" content="index, follow">
10+
<!-- Canonical URL -->
11+
<link rel="canonical" href="https://codehimblog.github.io/jquery-plugins/maximage-by-akv2.html">
12+
<!-- Favicon -->
13+
<link rel="icon" href="/favicon.ico" type="image/png">
14+
<!-- Bootstrap CSS -->
15+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
16+
<!-- Bootstrap Icons -->
17+
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
18+
<link rel="stylesheet" href="/css/styles.css">
19+
</head>
20+
<body>
21+
<!-- Navbar -->
22+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
23+
<div class="container">
24+
<a class="navbar-brand" href="https://codehimblog.github.io">
25+
<i class="bi bi-box-seam me-2"></i>CodehimBlog
26+
</a>
27+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
28+
<span class="navbar-toggler-icon"></span>
29+
</button>
30+
<div class="collapse navbar-collapse" id="navbarNav">
31+
<ul class="navbar-nav ms-auto">
32+
<li class="nav-item">
33+
<a class="nav-link" href="https://codehimblog.github.io/"><i class="bi bi-house-door me-1"></i> Home</a>
34+
</li>
35+
<li class="nav-item">
36+
<a class="nav-link" href="https://codehimblog.github.io/projects/"><i class="bi bi-box me-1"></i> Projects</a>
37+
</li>
38+
<li class="nav-item">
39+
<a class="nav-link" href="https://codehimblog.github.io/about.html"><i class="bi bi-book me-1"></i> About</a>
40+
</li>
41+
<li class="nav-item">
42+
<a class="nav-link" href="https://codehimblog.github.io/contact.html"><i class="bi bi-envelope me-1"></i> Contact</a>
43+
</li>
44+
</ul>
45+
</div>
46+
</div>
47+
</nav>
48+
49+
<!-- Breadcrumbs -->
50+
<div class="container mt-4 breadcrumbs">
51+
<nav aria-label="breadcrumb">
52+
<ol class="breadcrumb mb-0">
53+
<li class="breadcrumb-item"><a href="https://codehimblog.github.io/">Home</a></li>
54+
<li class="breadcrumb-item"><a href="https://codehimblog.github.io/jquery-plugins/">jQuery Plugins</a></li>
55+
<li class="breadcrumb-item active" aria-current="page">Maximage</li>
56+
</ol>
57+
</nav>
58+
</div>
59+
60+
<!-- Schema Markup for Breadcrumbs -->
61+
<script type="application/ld+json">
62+
{
63+
"@context": "https://schema.org",
64+
"@type": "BreadcrumbList",
65+
"itemListElement": [
66+
{
67+
"@type": "ListItem",
68+
"position": 1,
69+
"name": "Home",
70+
"item": "https://codehimblog.github.io/"
71+
},
72+
{
73+
"@type": "ListItem",
74+
"position": 2,
75+
"name": "jQuery Plugins",
76+
"item": "https://codehimblog.github.io/jquery-plugins/"
77+
},
78+
{
79+
"@type": "ListItem",
80+
"position": 3,
81+
"name": "Maximage",
82+
"item": "https://codehimblog.github.io/projects/{{packageSlug}}"
83+
}
84+
]
85+
}
86+
</script>
87+
<!-- Main Content -->
88+
<div class="container mt-3">
89+
<div class="row">
90+
<!-- Main Details -->
91+
<main class="col-md-8 site-main p-0">
92+
<article>
93+
<!-- Project Name & Description -->
94+
<h1 id="packageName">Maximage</h1>
95+
<p id="packageDescription" class="text-muted">The first jQuery plugin to use jQuery Cycle plugin as a fullscreen background slideshow.</p>
96+
97+
98+
99+
<!-- Statistics -->
100+
<div class="stat-row d-flex justify-content-around align-items-center text-center mb-2">
101+
<div class="stat-box d-flex align-items-center flex-column-mobile">
102+
<i class="bi bi-star-fill text-warning mb-2"></i>
103+
<div>
104+
<span id="stargazersCount" class="stat-value">407</span>
105+
<p class="stat-label mb-0">Stars</p>
106+
</div>
107+
</div>
108+
109+
<div class="stat-box d-flex align-items-center flex-column-mobile">
110+
<i class="bi bi-box-arrow-in-down mb-2"></i>
111+
<div>
112+
<span id="repoSize" class="stat-value">13.07 MB</span>
113+
<p class="stat-label mb-0">Size</p>
114+
</div>
115+
</div>
116+
117+
<div class="stat-box d-flex align-items-center flex-column-mobile">
118+
<i class="bi bi-arrow-repeat text-secondary mb-2"></i>
119+
<div>
120+
<span id="forksCount" class="stat-value">218</span>
121+
<p class="stat-label mb-0">Forks</p>
122+
</div>
123+
</div>
124+
125+
<div class="stat-box d-flex align-items-center flex-column-mobile">
126+
<i class="bi bi-exclamation-circle text-danger mb-2"></i>
127+
<div>
128+
<span id="openIssuesCount" class="stat-value">24</span>
129+
<p class="stat-label mb-0">Open Issues</p>
130+
</div>
131+
</div>
132+
</div>
133+
134+
135+
<div class="ad-unit ad-apt">
136+
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7089100907045419"
137+
crossorigin="anonymous"></script>
138+
<!-- CodehimBlog APT -->
139+
<ins class="adsbygoogle"
140+
style="display:block"
141+
data-ad-client="ca-pub-7089100907045419"
142+
data-ad-slot="4990741913"
143+
data-ad-format="auto"
144+
data-full-width-responsive="true"></ins>
145+
<script>
146+
(adsbygoogle = window.adsbygoogle || []).push({});
147+
</script>
148+
</div>
149+
150+
<div class="row mb-4">
151+
<!-- Tabs (Left) -->
152+
<div class="col-12 col-md-6 d-flex justify-content-start mb-3 mb-md-0">
153+
<ul class="nav nav-tabs" id="infoTabs" role="tablist">
154+
<li class="nav-item" role="presentation">
155+
<button class="nav-link active" id="installation-tab" data-bs-toggle="tab" data-bs-target="#installation" type="button" role="tab" aria-controls="installation" aria-selected="true">
156+
<i class="bi bi-file-earmark-text"></i> Readme
157+
</button>
158+
</li>
159+
<li class="nav-item" role="presentation">
160+
<button class="nav-link" id="changelog-tab" data-bs-toggle="tab" data-bs-target="#changelog" type="button" role="tab" aria-controls="changelog" aria-selected="false">
161+
<i class="bi bi-journal-text me-2"></i> Changelog
162+
</button>
163+
</li>
164+
</ul>
165+
</div>
166+
167+
<!-- Action Buttons (Right) -->
168+
<div class="col-12 col-md-6 d-flex align-items-center justify-content-end">
169+
<a href="https://github.com/akv2/MaxImage/archive/refs/heads/master.zip" class="btn btn-primary me-2 action-btn" id="downloadBtn">
170+
<i class="bi bi-cloud-download me-2"></i>Download ZIP
171+
</a>
172+
<a href="https://github.com/akv2/MaxImage" target="_blank" class="btn btn-outline-secondary action-btn" id="githubBtn">
173+
<i class="bi bi-github me-2"></i>Fork on GitHub
174+
</a>
175+
</div>
176+
</div>
177+
<div class="tab-content mt-3" id="infoTabsContent">
178+
<div class="tab-pane fade show active" id="installation" role="tabpanel" aria-labelledby="installation-tab">
179+
<h2>Currently at Version 2.0.8</h2>
180+
<p>Documentation can be found at:<br />
181+
<a href="http://blog.aaronvanderzwan.com/2012/07/maximage-2-0/">http://blog.aaronvanderzwan.com/2012/07/maximage-2-0/</a></p>
182+
<p>Full demo can be found at:<br />
183+
<a href="http://www.aaronvanderzwan.com/maximage/2.0/">http://www.aaronvanderzwan.com/maximage/2.0/</a></p>
184+
<h2>Known Issues:</h2>
185+
<ul>
186+
<li>HTML5 video fallbacks for IE7 &amp; IE8 currently do not fill the screen within a slideshow. I am working on this currently, but if this is important to you, please use another slideshow for the time being and check back for updates as this has proven more complex than was expected.</li>
187+
</ul>
188+
<h2>Changelog:</h2>
189+
<p>Version 2.0.8:</p>
190+
<ul>
191+
<li>[Fixed] With jQuery removing $.browser Maximage now does it's own browser detection.</li>
192+
</ul>
193+
<p>Version 2.0.7:</p>
194+
<ul>
195+
<li>[Fixed] I have completely rewritten the Old.preload() method to avoid a Stack Overflow bug found in IE7 &amp; IE8 if there are more than 13 slides.</li>
196+
<li>[Added] QUnit tests in /tests</li>
197+
</ul>
198+
<p>Version 2.0.6:</p>
199+
<ul>
200+
<li>[Added] Add ability for backgroundSize option to be passed as a function to the plugin. This way you can completely customize how you want the image to resize. See example @ <a href="http://www.aaronvanderzwan.com/maximage/2.0/#CustomBGSize">http://www.aaronvanderzwan.com/maximage/2.0/#CustomBGSize</a></li>
201+
<li>[Added] Added a landing page with code explanations for some examples.</li>
202+
</ul>
203+
<p>Version 2.0.5:</p>
204+
<ul>
205+
<li>Now you can call maximage on any object and it will fill and center it (pass it a string, 'maxcover', 'maxcontain', 'fill' or 'center'). This makes it really easy to have any visual element be the fullscreen background element of the slideshow (HTML5 video, etc). A small explanation / tutorial can be found at: <a href="http://blog.aaronvanderzwan.com/forums/topic/maximage-cover-helper-function/">http://blog.aaronvanderzwan.com/forums/topic/maximage-cover-helper-function/</a></li>
206+
<li>Exposed options to be global</li>
207+
<li>Created &quot;Adjust&quot; object to handle math for fit and center functions</li>
208+
<li>Remove Timer object (it wasn't being used anymore)</li>
209+
</ul>
210+
<p>Version 2.0.4:</p>
211+
<ul>
212+
<li>Added CSS transitions as the default 'easing' cycle option (Thanks to Roger Braunstein for this idea [<a href="http://partlyhuman.com/">http://partlyhuman.com/</a>])</li>
213+
<li>Added &quot;cssTransitions&quot; option that can force the plugin to run without using CSS transitions</li>
214+
<li>Renamed &quot;noBackgroundCSS&quot; to &quot;cssBackgroundSize&quot; and changed the default to &quot;true&quot;</li>
215+
<li>Added browser detection for CSS transitions and BackgroundSize to avoid dependence on Modernizr</li>
216+
<li>Removed Jquery Easing plugin from the demo as I was not using it anyways</li>
217+
</ul>
218+
<p>Version 2.0.3:</p>
219+
<ul>
220+
<li>Added &quot;noBackgroundCSS&quot; option that forces the plugin to run without using CSS3's background-size</li>
221+
</ul>
222+
<p>Version 2.0.2:</p>
223+
<ul>
224+
<li>Added &quot;fillElement&quot; option that provides the ability to constrain your slideshow to a container element (not just the window)</li>
225+
</ul>
226+
<p>Version 2.0.1: </p>
227+
<ul>
228+
<li>Added backgroundSize option so that older browsers can act as though they support CSS3 background-size:contain</li>
229+
<li>Now using dynamic backgroundSize CSS3 check for older browser functionality</li>
230+
</ul>
231+
<p>Version 2.0:</p>
232+
<ul>
233+
<li>Fixed compatibility with older browsers, specifically a bug that was creating white space after browser resize</li>
234+
</ul>
235+
<p>Version 2.0-beta3:</p>
236+
<ul>
237+
<li>Added ability to add other HTML within Slides (still to be tested in pre-CSS3 browsers)</li>
238+
</ul>
239+
<h2>Past Fork Notes</h2>
240+
<p>re: alancwoo - Added the ability to use a data-href attribute on the images. Thus one can now use this attribute for various things such as jquery tooltips, click functions etc.</p>
241+
</div>
242+
243+
<div class="tab-pane fade" id="changelog" role="tabpanel" aria-labelledby="changelog-tab">
244+
<ul id="changelogList">
245+
No changelog available.
246+
</ul>
247+
</div>
248+
249+
</div>
250+
251+
<div class="tags mb-2 mt-2">
252+
253+
</div>
254+
255+
</article>
256+
257+
258+
</main>
259+
<!-- Sidebar -->
260+
<aside class="col-md-4 p-0">
261+
<div class="sidebar">
262+
<!-- Owner Section -->
263+
<div class="sidebar-item mb-4">
264+
<div class="ad-unit">
265+
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7089100907045419"
266+
crossorigin="anonymous"></script>
267+
<!-- CodehimBlog Sidebar -->
268+
<ins class="adsbygoogle"
269+
style="display:block"
270+
data-ad-client="ca-pub-7089100907045419"
271+
data-ad-slot="8929986923"
272+
data-ad-format="auto"
273+
data-full-width-responsive="true"></ins>
274+
<script>
275+
(adsbygoogle = window.adsbygoogle || []).push({});
276+
</script>
277+
</div>
278+
<div class="d-flex align-items-center">
279+
<img src="https://avatars.githubusercontent.com/u/306057?v=4" alt="Owner Avatar" class="rounded-circle me-2 owner-avatar">
280+
<a href="https://github.com/akv2" target="_blank" id="ownerName" class="sidebar-link">akv2</a>
281+
</div>
282+
</div>
283+
284+
<!-- Metadata Section -->
285+
<div class="sidebar-item mb-2">
286+
<div class="metadata-item d-flex align-items-center">
287+
<i class="bi bi-calendar me-2"></i>
288+
<strong>Created At:</strong>
289+
<span id="createdAt" class="ms-1">November 16, 2011</span>
290+
</div>
291+
<div class="metadata-item d-flex align-items-center mt-2">
292+
<i class="bi bi-pencil-square me-2"></i>
293+
<strong>Last Updated:</strong>
294+
<span id="updatedAt" class="ms-1">March 9, 2024</span>
295+
</div>
296+
<div class="metadata-item d-flex align-items-center mt-2">
297+
<i class="bi bi-file-earmark-code me-2"></i>
298+
<strong>Language:</strong>
299+
<span id="language" class="ms-1">JavaScript</span>
300+
</div>
301+
302+
<div class="metadata-item d-flex align-items-center mt-2">
303+
<i class="bi bi-shield-check"></i>
304+
<strong>License:</strong>
305+
<span id="license" class="ms-1">Unknown</span>
306+
</div>
307+
<a href="http://www.aaronvanderzwan.com/maximage/2.0/" target="_blank" class="btn btn-outline-dark btn-sm" id="homepageBtn">
308+
<i class="bi bi-house-door me-2"></i>Visit Homepage
309+
</a>
310+
311+
</div>
312+
313+
<div class="sidebar-item mb-2">
314+
<li>No dependencies!</li>
315+
</div>
316+
317+
<div class="sidebar-item">
318+
<h5 class="sidebar-title">Contributors</h5>
319+
<ul class="p-0" id="contributorsList">
320+
<ul class="list-group list-group-flush" id="contributorsList"><li class="list-group-item d-flex align-items-center contributor-item"><img src="https://avatars.githubusercontent.com/u/306057?v=4" alt="akv2" class="rounded-circle me-3" style="width: 40px; height: 40px;"><div><a href="https://github.com/akv2" target="_blank" class="text-decoration-none fw-bold">akv2</a><p class="mb-0 text-muted small">68 contributions</p></div></li><li class="list-group-item d-flex align-items-center contributor-item"><img src="https://avatars.githubusercontent.com/u/2017013?v=4" alt="gon1387" class="rounded-circle me-3" style="width: 40px; height: 40px;"><div><a href="https://github.com/gon1387" target="_blank" class="text-decoration-none fw-bold">gon1387</a><p class="mb-0 text-muted small">2 contributions</p></div></li><li class="list-group-item d-flex align-items-center contributor-item"><img src="https://avatars.githubusercontent.com/u/1481890?v=4" alt="alancwoo" class="rounded-circle me-3" style="width: 40px; height: 40px;"><div><a href="https://github.com/alancwoo" target="_blank" class="text-decoration-none fw-bold">alancwoo</a><p class="mb-0 text-muted small">1 contributions</p></div></li><li class="list-group-item d-flex align-items-center contributor-item"><img src="https://avatars.githubusercontent.com/u/105728?v=4" alt="amclin" class="rounded-circle me-3" style="width: 40px; height: 40px;"><div><a href="https://github.com/amclin" target="_blank" class="text-decoration-none fw-bold">amclin</a><p class="mb-0 text-muted small">1 contributions</p></div></li><li class="list-group-item d-flex align-items-center contributor-item"><img src="https://avatars.githubusercontent.com/u/15921?v=4" alt="dramalho" class="rounded-circle me-3" style="width: 40px; height: 40px;"><div><a href="https://github.com/dramalho" target="_blank" class="text-decoration-none fw-bold">dramalho</a><p class="mb-0 text-muted small">1 contributions</p></div></li><li class="list-group-item d-flex align-items-center contributor-item d-none"><img src="https://avatars.githubusercontent.com/u/89664?v=4" alt="rafd" class="rounded-circle me-3" style="width: 40px; height: 40px;"><div><a href="https://github.com/rafd" target="_blank" class="text-decoration-none fw-bold">rafd</a><p class="mb-0 text-muted small">1 contributions</p></div></li><li class="list-group-item text-center"><a href="#" id="toggleContributors" class="d-block">+1 more Contributors</a></li></ul>
321+
</ul>
322+
323+
</div>
324+
325+
<div class="ad-unit">
326+
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7089100907045419"
327+
crossorigin="anonymous"></script>
328+
<!-- CodehimBlog Skyscrapper -->
329+
<ins class="adsbygoogle"
330+
style="display:block"
331+
data-ad-client="ca-pub-7089100907045419"
332+
data-ad-slot="7469565592"
333+
data-ad-format="auto"
334+
data-full-width-responsive="true"></ins>
335+
<script>
336+
(adsbygoogle = window.adsbygoogle || []).push({});
337+
</script>
338+
</div>
339+
340+
</div>
341+
</aside>
342+
</div>
343+
</div>
344+
<!-- Footer -->
345+
<footer class="bg-dark text-white text-center py-3 page-footer">
346+
<div class="container">
347+
<p class="mb-2">© 2024 CodehimBlog - Powered by GitHub</p>
348+
<nav>
349+
<ul class="list-inline mb-0">
350+
<li class="list-inline-item">
351+
<a href="/privacy-policy.html" class="footer-link">Privacy Policy</a>
352+
</li>
353+
<li class="list-inline-item">
354+
<span class="text-white">|</span>
355+
</li>
356+
<li class="list-inline-item">
357+
<a href="/terms-and-conditions.html" class="footer-link">Terms and Conditions</a>
358+
</li>
359+
</ul>
360+
</nav>
361+
</div>
362+
</footer>
363+
<!-- Bootstrap Bundle JS -->
364+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
365+
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
366+
<script src="/js/script.js"></script>
367+
<!-- Google tag (gtag.js) -->
368+
<script async src="https://www.googletagmanager.com/gtag/js?id=G-FG2ZX76XGT"></script>
369+
<script>
370+
window.dataLayer = window.dataLayer || [];
371+
function gtag(){dataLayer.push(arguments);}
372+
gtag('js', new Date());
373+
374+
gtag('config', 'G-FG2ZX76XGT');
375+
</script>
376+
</body>
377+
</html>

0 commit comments

Comments
 (0)