Skip to content

Commit

Permalink
Some improvements and bugs solved. Better examples page.
Browse files Browse the repository at this point in the history
  • Loading branch information
@tin-cat
tin-cat committed Aug 19, 2016
1 parent 0e96d18 commit 0c9666f
Show file tree
Hide file tree
Showing 5 changed files with 395 additions and 44 deletions.
271 changes: 239 additions & 32 deletions examples/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,241 @@

include "res/common.php";

// Build mosaic
$lowResImagesDir = "res/images/topdown/lowres/";
$highResImagesDir = "res/images/topdown/";
$imageFiles = getImageFiles($lowResImagesDir, 12);
shuffle($imageFiles);

foreach ($imageFiles as $file)
$items .=
"\t".
"<img".
" src=\"".$lowResImagesDir.$file["fileName"]."\"".
" data-high-res-image-src=\"".$highResImagesDir.$file["fileName"]."\"".
" width=\"".$file["width"]."\"".
" height=\"".$file["height"]."\"".
" />".
"\n";

$mosaic =
"<div id=\"mosaic\" class=\"mosaic\">\n".
"$items".
"</div>\n".
"\n".
"<script>\n".
" $('#mosaic').Mosaic({\n".
" maxRowHeight: 400,\n".
" highResImagesWidthThreshold: 640,\n".
" maxRowHeightPolicy: 'skip'\n".
" });\n".
"</script>\n";

// Build how to use
$content .= "
<div class=\"content\">
<a name=\"basicUsage\"></a>
<h1>Basic usage</h1>
<ul class=\"fancy\">
<li>
Download the <a href=\"https://github.com/tin-cat/jquery-mosaic\">jQuery Mosaic plugin</a>
</li>
<li>
Include the jQuery library and the <i>jquery.mosaic.js</i> and <i>jquery.mosaic.css</i> filed from the jQuery Mosaic download in your head section.
<blockquote class=\"code html\">".formatHtml("
<html>
<head>
...
<script src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js\"></script>
<script type=\"text/javascript\" src=\"jquery.mosaic.js\"></script>
<link rel=\"stylesheet\" type=\"text/css\" href=\"jquery.mosaic.css\" />
...
</head>
<body>
...
")."</blockquote>
</li>
<li>
Create a DIV with an id and place your contents inside. Each DIV, A or IMG you place there will be considered as a piece of the mosaic
<blockquote class=\"code html\">".formatHtml("
<div id=\"myMosaic\">
<img src=\"image1.jpg\" width=\"400\" height=\"350\" />
<img src=\"image2.jpg\" width=\"320\" height=\"200\" />
<img src=\"image3.jpg\" width=\"870\" height=\"420\" />
<img src=\"image4.jpg\" width=\"442\" height=\"922\" />
...
</div>
")."</blockquote>
</li>
<li>
Build the mosaic by running the plugin in your div
<blockquote class=\"code html\">".formatHtml("
<script>
$('#myMosaic').Mosaic();
</script>
")."</blockquote>
</li>
<li>
That's it! See the <a href=\"#examples\">examples</a> and their source code to learn more.
</li>
</ul>
</div>
<hr>
<div class=\"content\">
<a name=\"options\"></a>
<h1>Options</h1>
<p>You can optionally specify the following options when calling the plugin to customize the mosaic:</p>
<ul class=\"options\">
<li>
<div class=\"name\">maxRowHeight</div>
<div class=\"description\">The maximum desired height of rows</div>
<div class=\"default\">400</div>
</li>
<li>
<div class=\"name\">refitOnResize</div>
<div class=\"description\">Whether to rebuild the mosaic when the window is resized or not</div>
<div class=\"default\">true</div>
</li>
<li>
<div class=\"name\">refitOnResizeDelay</div>
<div class=\"description\">Milliseconds to wait after a resize event to refit the mosaic. Useful when creating huge mosaics that can take some CPU time on the user's browser. Leave it to false to refit the mosaic in realtime</div>
<div class=\"default\">false</div>
</li>
<li>
<div class=\"name\">defaultAspectRatio</div>
<div class=\"description\">The aspect ratio to use when none has been specified, or can't be calculated</div>
<div class=\"default\">1</div>
</li>
<li>
<div class=\"name\">maxRowHeightPolicy</div>
<div class=\"description\">Sometimes some of the remaining items cannot be fitted on a row without surpassing the maxRowHeight. For those cases, choose one of the available settings for maxRowHeightPolicy:
<ul>
<li><b>skip</b> Does not renders the unfitting items.</li>
<li><b>crop</b> Caps the desired height to the specified maxRowHeight, resulting in those items not keeping their aspect ratios.</li>
<li><b>oversize</b> Renders the items respecting their aspect ratio but surpassing the specified maxRowHeight</li>
</ul>
</div>
<div class=\"default\">skip</div>
</li>
<li>
<div class=\"name\">highResImagesWidthThreshold</div>
<div class=\"description\">When set to a width, item &gt;div&lt;s or &gt;a&lt;s or &gt;img&lt;s wider than this will be given a higher resolution background image (if specified on html div property data-high-res-background-image-url) or image src (if specified on html img property data-high-res-image-src)</div>
<div class=\"default\">350</div>
</li>
</ul>
<p>For example:</p>
<blockquote class=\"code javascript\">".formatHtml("
$('#myMosaic').Mosaic({
maxRowHeight: 800,
refitOnResize: true,
refitOnResizeDelay: false,
defaultAspectRatio: 0.5,
maxRowHeightPolicy: 'crop',
highResImagesWidthThreshold: 850
});
")."</blockquote>
</div>
<hr>
<div class=\"content\">
<a name=\"advancedUsage\"></a>
<h1>Advanced usage</h1>
<ul class=\"fancy\">
<li>
You can specify the aspect ratio of each mosaic piece by adding the <i>data-aspect-ratio</i> property on each element instead of the <i>height</i> and <i>width</i>
<blockquote class=\"code html\">".formatHtml("
<div id=\"myMosaic\">
<img src=\"image1.jpg\" data-aspect-ratio=\"1.432\" />
<img src=\"image2.jpg\" data-aspect-ratio=\"0.3\" />
<img src=\"image3.jpg\" data-aspect-ratio=\"1.4842\" />
<img src=\"image4.jpg\" data-aspect-ratio=\"0.883\" />
...
</div>
")."</blockquote>
</li>
<li>
You can specify a high resolution version of the image by adding the <i>data-high-res-image-src</i> property on each element. It will only be loaded and used when needed
<blockquote class=\"code html\">".formatHtml("
<div id=\"myMosaic\">
<img src=\"image1.jpg\" data-aspect-ratio=\"1.432\" data-high-res-image-src=\"image1_highres.jpg\"/>
<img src=\"image2.jpg\" data-aspect-ratio=\"0.3\" data-high-res-image-src=\"image2_highres.jpg\" />
<img src=\"image3.jpg\" data-aspect-ratio=\"1.4842\" data-high-res-image-src=\"image3_highres.jpg\" />
<img src=\"image4.jpg\" data-aspect-ratio=\"0.883\" data-high-res-image-src=\"image4_highres.jpg\" />
...
</div>
")."</blockquote>
</li>
<li>
You can use DIVs instead of IMGs for the mosaic. They will be resized to the proper width and height, and their contents will be left untouched, like in <a href=\"example_divs.php\">this example</a>
<blockquote class=\"code html\">".formatHtml("
<div id=\"myMosaic\">
<div data-aspect-ratio=\"1.32\">My content</div>
<div data-aspect-ratio=\"1.02\">My content</div>
<div data-aspect-ratio=\"0.8\">My content</div>
<div data-aspect-ratio=\"1.02\">My content</div>
...
</div>
")."</blockquote>
</li>
<li>
You can set background images to DIVs for more interesting creative options, add the provided <i>item</i> CSS class to each mosaic element to do so, or use your own CSS
<blockquote class=\"code html\">".formatHtml("
<div id=\"myMosaic\">
<div class=\"item withImage\" data-aspect-ratio=\"1.32\" style=\"background-image: url('image1.jpg');\">My content</div>
<div class=\"item withImage\" data-aspect-ratio=\"1.02\" style=\"background-image: url('image2.jpg');\">My content</div>
<div class=\"item withImage\" data-aspect-ratio=\"0.8\" style=\"background-image: url('image3.jpg');\">My content</div>
<div class=\"item withImage\" data-aspect-ratio=\"1.02\" style=\"background-image: url('image4.jpg');\">My content</div>
...
</div>
")."</blockquote>
</li>
<li>
When using background images on DIVs, you can still specify a high resolution background image by adding the <i>high-res-background-image-url</i> property
<blockquote class=\"code html\">".formatHtml("
<div id=\"myMosaic\">
<div class=\"item withImage\" data-aspect-ratio=\"1.32\" style=\"background-image: url('image1.jpg');\" data-high-res-background-image-url=\"image1_highres.jpg\">My content</div>
<div class=\"item withImage\" data-aspect-ratio=\"1.02\" style=\"background-image: url('image2.jpg');\" data-high-res-background-image-url=\"image2_highres.jpg\">My content</div>
<div class=\"item withImage\" data-aspect-ratio=\"0.8\" style=\"background-image: url('image3.jpg');\" data-high-res-background-image-url=\"image3_highres.jpg\">My content</div>
<div class=\"item withImage\" data-aspect-ratio=\"1.02\" style=\"background-image: url('image4.jpg');\" data-high-res-background-image-url=\"image4_highres.jpg\">My content</div>
...
</div>
")."</blockquote>
</li>
<li>
Using Anchors instead of DIVs, background images, and an overlay you can create <a href=\"example_high_resolution.php\">a neat interactive mosaic</a>.
<blockquote class=\"code html\">".formatHtml("
<div id=\"myMosaic\">
<div class=\"item withImage\" data-aspect-ratio=\"1.32\" style=\"background-image: url('image1.jpg');\" data-high-res-background-image-url=\"image1_highres.jpg\">
<div class=\"overlay\"><div class=\"texts\">
<h1>Title</h1>
<h1>Subtitle</h1>
</div></div>
</div>
<div class=\"item withImage\" data-aspect-ratio=\"1.02\" style=\"background-image: url('image2.jpg');\" data-high-res-background-image-url=\"image2_highres.jpg\">
<div class=\"overlay\"><div class=\"texts\">
<h1>Title</h1>
<h1>Subtitle</h1>
</div></div>
</div>
<div class=\"item withImage\" data-aspect-ratio=\"0.8\" style=\"background-image: url('image3.jpg');\" data-high-res-background-image-url=\"image3_highres.jpg\">
<div class=\"overlay\"><div class=\"texts\">
<h1>Title</h1>
<h1>Subtitle</h1>
</div></div>
</div>
..
</div>
")."</blockquote>
</li>
</ul>
</div>
<hr>
";

// Build examples list
$examples = [
[
Expand Down Expand Up @@ -32,49 +267,21 @@
]
];

$content = "<a name=\"examples\"></a><ul class=\"examples\">";
$content .= "<div class=\"content\"><a name=\"examples\"></a><ul class=\"fancy\">";
foreach ($examples as $example)
$content .=
"<li>".
"<a class=\"title\" href=\"".$example["link"]."\"".($example["linkIsNewwWindow"] ? " target=\"_newwindow\"" : null).">".$example["title"]."</a>".
($example["description"] ? "<p>".$example["description"]."</p>" : null).
($example["description"] ? $example["description"] : null).
"</li>";
$content .= "</ul>";

// Build mosaic
$lowResImagesDir = "res/images/topdown/lowres/";
$highResImagesDir = "res/images/topdown/";
$imageFiles = getImageFiles($lowResImagesDir, 6);
shuffle($imageFiles);

foreach ($imageFiles as $file)
$items .=
"\t".
"<img".
" src=\"".$lowResImagesDir.$file["fileName"]."\"".
" data-high-res-image-src=\"".$highResImagesDir.$file["fileName"]."\"".
" width=\"".$file["width"]."\"".
" height=\"".$file["height"]."\"".
" />".
"\n";

$mosaic =
"<div id=\"mosaic\" class=\"mosaic\">\n".
"$items".
"</div>\n".
"\n".
"<script>\n".
" $('#mosaic').Mosaic({\n".
" maxRowHeight: 600,\n".
" highResImagesWidthThreshold: 640\n".
" });\n".
"</script>\n";
$content .= "</ul></div>";

pattern([
"title" => "jQuery Mosaic plugin",
"header" => "jQuery Mosaic plugin",
"headerSubtitle" => "with <div class=\"love\"></div> by <a href=\"http://tin.cat\">tin.cat</a> · download on <a href=\"https://github.com/tin-cat/jquery-mosaic\">Github</a> · see <a href=\"#examples\">examples</a>",
"headerSubSubtitle" => "A free plugin for jQuery to build wonderful and responsive mosaics of images or anything else",
"footer" => "with <div class=\"love\"></div> by <a href=\"http://tin.cat\">tin.cat</a>",
"mosaic" => $mosaic,
"content" => $content
]);
8 changes: 8 additions & 0 deletions examples/res/common.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,4 +50,12 @@ function getImageFiles($dir, $limit = false) {
die("No suitable images on ".$dir);

return $images;
}

function formatHtml($code) {
$code = trim($code);
$code = str_replace("\t", " ", $code);
$code = htmlspecialchars($code);
$code = str_replace("...", "<span class=\"ellipsis\">...</span>", $code);
return $code;
}
Loading

0 comments on commit 0c9666f

Please sign in to comment.