[WebTemplate] “Scaracco” & “Scaracco + fancyBox”

Post by **XnTriq** » Fri Feb 26, 2016 12:00 am

Welcome to the download & support thread of “Scaracco” which is a web gallery template for XnView v2.35 and newer.

The underlying style sheet is based on a technique developed by Scaracco.

The output of this template is more or less identical to the original demo gallery.
To install it, you have to create a new folder named “Scaracco” in the WebTemplate sub-directory of your XnView installation. Copy & paste the following code…

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="generator" content="XnView" />
<title>#TITLE#</title>
<script type="text/javascript">
//<![CDATA[
document.write("<style type=\"text/css\">" +
"div.XnBox {" +
"width: " + (#THUMB_WIDTH_MAX# + 16) + "px;" +
"}" +
"div.XnThumb {" +
"width: " + (#THUMB_WIDTH_MAX# + 16) + "px;" +
"height: " + (#THUMB_WIDTH_MAX# + 16) + "px;" +
"}" +
"</style>");
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
body {
text-align: center;
background-color: #ddd;
}
div#XnGallery {
margin: 0 auto;
width: 90%;
background-color: #eee;
}
div.XnBox {
margin: 8px;
display: -moz-inline-box;
-moz-box-orient: vertical;
display: inline-block;
vertical-align: top;
width: calc(#THUMB_WIDTH_MAX#px + 16px);
}
div.XnThumb {
display: table-cell;
vertical-align: middle;
width: calc(#THUMB_WIDTH_MAX#px + 16px);
height: calc(#THUMB_WIDTH_MAX#px + 16px);
background-color: #fff;
border: 1px outset;
}
div.XnThumb * {
vertical-align: middle;
}
div.XnThumb img {
border: 1px inset;
}
div.XnCaption {
width: calc(#THUMB_WIDTH_MAX#px + 16px);
overflow: hidden;
}
/*]]>*/
</style>
<!--[if lt IE 8]>
<style type="text/css">
/*<![CDATA[*/
div.XnBox {
display: inline;
}
div.XnThumb {
display: block;
}
div.XnThumb span {
width: 1px;
height: 100%;
display: inline-block;
}
/*]]>*/
</style>
<![endif]-->
</head>
<body>
<h2 id="XnHeader">#HEADER#</h2>
<div id="XnGallery">
#THUMB2_START#
<div class="XnBox">
<div class="XnThumb"><span></span><a href="#ORG_SUBPATH#/#PIC_LINK#"><img src="#THUMB_LINK#" width="#THUMB_WIDTH#" height="#THUMB_HEIGHT#" alt="#PIC_LINK#" title="#PIC_LINK#" /></a></div>
<div class="XnCaption">#THUMB_TEXT#</div>
</div>
#THUMB2_END#
</div>
<p id="XnFooter">#PAGE_GENERATED#.</p>
</body>
</html>

… into a text editor of your choice and save it as \XnView\WebTemplate\Scaracco\thumb.html. “Scaracco” will then be available in the Template drop-down list of Create » Web Page....

<!-- // EDIT //

I should've mentioned what I tried to achieve with this particular template:

Fluid layout (Generating webpages without tables)
Suitable for all types of orientation (landscape and portrait as well as square format)
Maximum cross-browser (backward) compatibility
Non-proprietary, standards-compliant, valid (X)HTML and CSS
Adherence to the principles of…
Customizable and extensible (lightbox functionality etc.)
Easy to integrate into existing sites

XnTriq ([url=http://newsgroup.xnview.com/viewtopic.php?p=121847#p121847]Web template variables for thumbnail dimensions[/url]) wrote:Most – if not all – of XnView's web templates are built with tables. The downside of this approach is that the thumbnail pages have a fixed number of columns.
I made a few “fluid” gallery templates years ago for my own personal use. They're based on lists or DIVs and have an integrated JavaScript lightbox.

// EDIT //-->

If this post generates any interest, I'm also going to publish my enhanced version including fancyBox.

19leunam93 · Post by **19leunam93** » Mon Feb 29, 2016 6:52 pm

Well, done ... thanks a lot for sharing!!

I found a little issue: The links from the thumbnails to the original photos is not working correctly. It points to the main-folder of the generated gallery, but the original files are placed in a subfolder, defined in the mask of XnView.
I don't know the variable of that subfolder, so I can't modify that by my self...

And yes, I'm very interested in a lightbox version of that great template!

Post by **XnTriq** » Tue Mar 01, 2016 4:30 am

Thanks for your feedback, 19leunam93 (-:

19leunam93 wrote:I found a little issue: The links from the thumbnails to the original photos is not working correctly. It points to the main-folder of the generated gallery, but the original files are placed in a subfolder, defined in the mask of XnView.

Fixed! I had #ORG_SUBPATH# removed for my tests and forgot to put it back.

19leunam93 wrote:I don't know the variable of that subfolder, so I can't modify that by my self...

There's a list, but the descriptions are still missing.

19leunam93 wrote:And yes, I'm very interested in a lightbox version of that great template!

Hopefully “Scaracco + fancyBox” (including a short tutorial) will be ready for upload later this week.

Post by **XnTriq** » Sun Mar 06, 2016 6:30 am

Installing “Scaracco + fancyBox”:

Create a new folder named Scaracco_fancyBox in the WebTemplate sub-directory of your XnView installation.
Download fancyapps-fancyBox-v2.1.5-0-ge2248f4.zip from fancyApps and Scaracco_fancyBox.zip (attached to this posting).
Extract the contents of both ZIP archives into the new Scaracco_fancyBox folder.
Rename the folder fancyapps-fancyBox-v2.1.5-0-ge2248f4 to fancybox.

Scaracco_fancyBox.zip

This should leave you with the following file structure:

\XnView\WebTemplate\Scaracco_fancyBox\thumb.html
\XnView\WebTemplate\Scaracco_fancyBox\required.css
\XnView\WebTemplate\Scaracco_fancyBox\required_ie.css
\XnView\WebTemplate\Scaracco_fancyBox\optional.css
\XnView\WebTemplate\Scaracco_fancyBox\typography.css
\XnView\WebTemplate\Scaracco_fancyBox\fancybox\config.js
\XnView\WebTemplate\Scaracco_fancyBox\fancybox\.gitattributes
\XnView\WebTemplate\Scaracco_fancyBox\fancybox\CHANGELOG.md
\XnView\WebTemplate\Scaracco_fancyBox\fancybox\README.md
\XnView\WebTemplate\Scaracco_fancyBox\fancybox\sprite.psd
\XnView\WebTemplate\Scaracco_fancyBox\fancybox\demo\*.*
\XnView\WebTemplate\Scaracco_fancyBox\fancybox\lib\jquery-1.9.0.min.js
\XnView\WebTemplate\Scaracco_fancyBox\fancybox\lib\jquery-1.10.1.min.js
\XnView\WebTemplate\Scaracco_fancyBox\fancybox\lib\jquery.mousewheel-3.0.6.pack.js
\XnView\WebTemplate\Scaracco_fancyBox\fancybox\source\jquery.fancybox.js
\XnView\WebTemplate\Scaracco_fancyBox\fancybox\source\jquery.fancybox.pack.js
\XnView\WebTemplate\Scaracco_fancyBox\fancybox\source\jquery.fancybox.css
\XnView\WebTemplate\Scaracco_fancyBox\fancybox\source\blank.gif
\XnView\WebTemplate\Scaracco_fancyBox\fancybox\source\fancybox_sprite.png
\XnView\WebTemplate\Scaracco_fancyBox\fancybox\source\fancybox_sprite@2x.png
\XnView\WebTemplate\Scaracco_fancyBox\fancybox\source\fancybox_loading.gif
\XnView\WebTemplate\Scaracco_fancyBox\fancybox\source\fancybox_loading@2x.gif
\XnView\WebTemplate\Scaracco_fancyBox\fancybox\source\fancybox_overlay.png
\XnView\WebTemplate\Scaracco_fancyBox\fancybox\source\helpers\jquery.fancybox-buttons.js
\XnView\WebTemplate\Scaracco_fancyBox\fancybox\source\helpers\jquery.fancybox-buttons.css
\XnView\WebTemplate\Scaracco_fancyBox\fancybox\source\helpers\fancybox_buttons.png
\XnView\WebTemplate\Scaracco_fancyBox\fancybox\source\helpers\jquery.fancybox-thumbs.js
\XnView\WebTemplate\Scaracco_fancyBox\fancybox\source\helpers\jquery.fancybox-thumbs.css
\XnView\WebTemplate\Scaracco_fancyBox\fancybox\source\helpers\jquery.fancybox-media.js

Notes:

Crossed-out files can be deleted.

Remember to change the references in thumb.html accordingly in case you choose to update the jQuery library and/or the mousewheel plugin.

Code: Select all

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

As of version 2.35, XnView exports line breaks entered into the text field of Show information (Create » Web Page... » Information displayed) as unclosed tags. If you need the output of this template to be standards-compliant/valid XHTML, you'll have to replace all instances of <br> in thumb.html with <br />.

The late JohnFredC was kind enough to check browser compatibility:

JohnFredC (10/Oct/2013) wrote:
I successfully tested your website in the latest versions of the following browsers, except where noted.

Windows 8
Internet Explorer 10

Opera 17

FireFox 24

Maxthon 4

Chrome 30

Cool Novo 2

Safari 5

Windows Phone 8
Internet Explorer

UC Browser
Not formatted as a grid (linear instead), even with agent set to desktop

SurfCube 5
Android 4.2.2
Chrome 30

Opera Beta 16

Dolphin 10

Dolphin Mini 2
Thumb grid did not scale to screen properly (horizontal scrolling required)

FireFox 24

Maxthon 4

UC Browser HD 2.4

IOS 6
Safari

oops66 · Post by **oops66** » Tue Mar 08, 2016 1:15 am

Hello XnTriq,
... Very nice template, thank you for sharing.
I have just adapted with: Number of columns = 4 , and gray background #888888 ... and it's perfect.

(...<table cellpadding="10" cellspacing="10"> )

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="pixnview.css">
<h1>#TITLE# - My Web Albums</h1>
    <div class="main">
      <h2>Album: #HEADER#</h2>
<script type="text/javascript">
//<![CDATA[
document.write("<style type=\"text/css\">" +
"div.XnSlide," +
"div.XnLabel {" +
"width: " + (#THUMB_WIDTH_MAX# + 16) + "px;" +
"}" +
"div.XnThumbnail {" +
"width: " + (#THUMB_WIDTH_MAX# + 16) + "px;" +
"height: " + (#THUMB_WIDTH_MAX# + 16) + "px;" +
"}" +
"</style>");
//]]>
</script>
<link rel="stylesheet" type="text/css" href="required.css" />
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="required_ie.css" />
<![endif]-->
<link rel="stylesheet" type="text/css" href="optional.css" />
<link rel="stylesheet" type="text/css" href="typography.css" />
<style type="text/css">
/*<![CDATA[*/
div.XnSlide,
div.XnLabel {
width: calc(#THUMB_WIDTH_MAX#px - 716px);
}
div.XnThumbnail {
width: calc(#THUMB_WIDTH_MAX#px - 716px);
height: calc(#THUMB_WIDTH_MAX#px - 716px);
}
/*]]>*/
</style>
<!-- jQuery library -->
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- mousewheel plugin (optional) -->
	<script type="text/javascript" src="fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- fancyBox main JS and CSS files -->
	<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css" media="screen" />
	<script type="text/javascript" src="fancybox/source/jquery.fancybox.pack.js"></script>
<!-- fancyBox button helper (optional) -->
	<link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-buttons.css" />
	<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
<!-- fancyBox thumbnail helper (optional) -->
	<link rel="stylesheet" type="text/css" href="fancybox/source/helpers/jquery.fancybox-thumbs.css" />
	<script type="text/javascript" src="fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<!-- fancyBox options -->
	<script type="text/javascript" src="fancybox/config.js"></script>
</head>
<body>
<h2 id="XnHeader">#HEADER#</h2>
<ul id="XnGallery">



      <table cellpadding="10" cellspacing="10">
        #THUMB_START#
        <td>
         <li class="XnSlide">
		<div class="XnThumbnail"><span></span><a rel="XnGroup" href="#ORG_SUBPATH#/#PIC_LINK#" class="fancybox"><img src="#THUMB_LINK#" width="#THUMB_WIDTH#" height="#THUMB_HEIGHT#" alt="#PIC_LINK#" title="#PIC_LINK#" /></a></div>
		<div class="XnLabel">#THUMB_TEXT#</div>
	</li>
        </td>
        #THUMB_END#
      </table>



</ul>
<p id="XnFooter">#PAGE_GENERATED#.</p>
</body>
</html>

Post by **XnTriq** » Tue Mar 08, 2016 9:30 pm

Bonsoir, oops66 (-:

oops66 wrote:I have just adapted with: Number of columns = 4 , and gray background #888888

Would you prefer a version of “Pixnview [black]” with fancyBox?

oops66 · Post by **oops66** » Tue Mar 08, 2016 9:58 pm

XnTriq wrote:
oops66 wrote:I have just adapted with: Number of columns = 4 , and gray background #888888
Would you prefer a version of “Pixnview [black]” with fancyBox?

Hi XnTriq ... Why not, I don't know, I have to try

Post by **XnTriq** » Tue Mar 08, 2016 10:15 pm

oops66 wrote:
XnTriq wrote:Would you prefer a version of “Pixnview [black]” with fancyBox?
Hi XnTriq ... Why not, I don't know, I have to try

I was wondering because you included a reference to pixnview.css (line #5).

BTW: My first post has been updated.

oops66 · Post by **oops66** » Tue Mar 08, 2016 11:51 pm

... Ah, yes, it was for a test ... BTW I use Classic xnview via Wine into Ubuntu with Firefox ... so maybe I have not exactly the same things/output than you? ... PS: I am not a expert with .html codes

... thank you again.

Post by **XnTriq** » Wed Mar 09, 2016 4:00 am

oops66 wrote:I use Classic xnview via Wine into Ubuntu with Firefox ... so maybe I have not exactly the same things/output than you?

Whether you're running XnView in a native Windows environment or on Linux with the help of Wine should make no difference whatsoever when it comes to its HTML output.

oops66 · Post by **oops66** » Wed Mar 09, 2016 9:10 am

XnTriq wrote:...Whether you're running XnView in a native Windows environment or on Linux with the help of Wine should make no difference whatsoever when it comes to its HTML output.

Bonjour XnTriq, .... I Know, but I noticed that sometimes some stranges things happen with all of these logicals abstractives layers

... then computoring seems not to always be an exact science.

Post by **XnTriq** » Thu Mar 10, 2016 12:30 am

oops66 wrote:I Know, but I noticed that sometimes some stranges things happen with all of these logicals abstractives layers ... then computoring seems not to always be an exact science.

Please feel free to contact me via PM if you want me to do tests on a template, oops66.

oops66 · Post by **oops66** » Thu Mar 10, 2016 9:24 pm

... Hello and thank you XnTriq ... you have a PM

For this kind of template, but with Exif & IPTC info, instead title="#PIC_LINK#" (photo name) within ".fancybox-title-over-wrap {..."
http://jsfiddle.net/2k8EP/

19leunam93 · Post by **19leunam93** » Wed Dec 28, 2016 1:57 pm

Think I posted in an old discussion...

Here again:
_____________________________
Hello XnTriq,

Thank you very much for sharing that great gallery...
I've applied your galery on my website. Looks very nice and fully generatable by XnView:
http://tech.spuur.ch/de/public/fotos/fotogalerie.html

Now I'm on a joomla project. And I have some troubles with implementing the generated galery in my joomla article:
http://kultur.spuur.ch/index.php/manu-f ... 1-diverses

I placed the generated html-file of the galery in the joomla article by using php:
{code}<?php include "./images/galery/technik/thumb.html"; ?>{/code}
But the facybox will not work. I think its because of the different paths of the article and the galery.
Is it possible to modify the fancybox so it can generate the pop-up without beeing in the same folder as the thumb.html?
Or is there a problem with joomla and fancyboy?

Thank you for that great work on the galery!

Post by **XnTriq** » Wed Dec 28, 2016 10:30 pm

Welcome back, 19leunam93 (-:

W3C Markup Validator:

You can ignore the warnings for the rel and beschreibung attributes, but the following lines have to be removed from thumb.html when XnView's output is included in an existing page in order to prevent “stray start tags”:

Code: Select all

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Titel</title>

[…]

</head>
<body>

[…]

</body>
</html>

Please let me know if this solves the issue.

XnView Software

[WebTemplate] “Scaracco” & “Scaracco + fancyBox”

[WebTemplate] “Scaracco” & “Scaracco + fancyBox”

Re: [WebTemplate] Scaracco

Re: [WebTemplate] Scaracco

Re: [WebTemplate] “Scaracco” & “Scaracco + fancyBox”

Re: [WebTemplate] “Scaracco” & “Scaracco + fancyBox”

Re: [WebTemplate] “Scaracco” & “Scaracco + fancyBox”

Re: [WebTemplate] “Scaracco” & “Scaracco + fancyBox”

Re: [WebTemplate] “Scaracco” & “Scaracco + fancyBox”

Re: [WebTemplate] “Scaracco” & “Scaracco + fancyBox”

Re: [WebTemplate] “Scaracco” & “Scaracco + fancyBox”

Re: [WebTemplate] “Scaracco” & “Scaracco + fancyBox”

Re: [WebTemplate] “Scaracco” & “Scaracco + fancyBox”

Re: [WebTemplate] “Scaracco” & “Scaracco + fancyBox”

Re: [WebTemplate] “Scaracco” & “Scaracco + fancyBox”

Re: [WebTemplate] “Scaracco” & “Scaracco + fancyBox”