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

Plug-ins, add-ons, skins, icons, templates and other downloads. Contributions are welcome.

Moderators: XnTriq, helmut, xnview

User avatar
XnTriq
Moderator & Librarian
Posts: 6386
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

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

Post by XnTriq »

Welcome to the download & support thread of “Scaracco” which is a web gallery template for XnView v2.35 and newer.
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:
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
Posts: 7
Joined: Thu Feb 18, 2016 10:05 pm

Re: [WebTemplate] Scaracco

Post by 19leunam93 »

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!
User avatar
XnTriq
Moderator & Librarian
Posts: 6386
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

Re: [WebTemplate] Scaracco

Post by XnTriq »

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.
User avatar
XnTriq
Moderator & Librarian
Posts: 6386
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

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

Post by XnTriq »

Installing “Scaracco + fancyBox”:
  1. Create a new folder named Scaracco_fancyBox in the WebTemplate sub-directory of your XnView installation.
  2. Download fancyapps-fancyBox-v2.1.5-0-ge2248f4.zip from fancyApps and Scaracco_fancyBox.zip (attached to this posting).
  3. Extract the contents of both ZIP archives into the new Scaracco_fancyBox folder.
  4. 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
You do not have the required permissions to view the files attached to this post.
User avatar
oops66
XnThusiast
Posts: 2005
Joined: Tue Jul 17, 2007 1:17 am
Location: France

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

Post by oops66 »

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>

XnViewMP Linux X64 - Debian - X64
User avatar
XnTriq
Moderator & Librarian
Posts: 6386
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

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

Post by XnTriq »

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?
User avatar
oops66
XnThusiast
Posts: 2005
Joined: Tue Jul 17, 2007 1:17 am
Location: France

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

Post by oops66 »

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 ;-)
XnViewMP Linux X64 - Debian - X64
User avatar
XnTriq
Moderator & Librarian
Posts: 6386
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

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

Post by XnTriq »

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.
User avatar
oops66
XnThusiast
Posts: 2005
Joined: Tue Jul 17, 2007 1:17 am
Location: France

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

Post by oops66 »

... 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.
XnViewMP Linux X64 - Debian - X64
User avatar
XnTriq
Moderator & Librarian
Posts: 6386
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

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

Post by XnTriq »

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.
User avatar
oops66
XnThusiast
Posts: 2005
Joined: Tue Jul 17, 2007 1:17 am
Location: France

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

Post by oops66 »

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. ;-)
XnViewMP Linux X64 - Debian - X64
User avatar
XnTriq
Moderator & Librarian
Posts: 6386
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

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

Post by XnTriq »

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. ;-)
:mrgreen: Please feel free to contact me via PM if you want me to do tests on a template, oops66.
User avatar
oops66
XnThusiast
Posts: 2005
Joined: Tue Jul 17, 2007 1:17 am
Location: France

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

Post by oops66 »

... 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/
You do not have the required permissions to view the files attached to this post.
XnViewMP Linux X64 - Debian - X64
19leunam93
Posts: 7
Joined: Thu Feb 18, 2016 10:05 pm

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

Post by 19leunam93 »

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!
User avatar
XnTriq
Moderator & Librarian
Posts: 6386
Joined: Sun Sep 25, 2005 3:00 am
Location: Ref Desk

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

Post by XnTriq »

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.