1.
Steven Speirs wrote:Now I get it with the dimensions. So one solution would be to enter absolute numbers for height and width - but than the gallery is not responsive anymore, correct?
That is correct. Unless you listen for a change in the user's browser window size and dynamically set new dimensions for the gallery when the size changes. An example of this technique can be found in the sample galleries in the Using a Resizable Gallery with a Header support section.
Thanks for the transparent hint. But it should take the settings from the svBuilder Pro (which are set to transparent background)
Yes. Selecting the 'Background Transparent' checkbox in svBuilder-Pro's 'Customize -> Embed Options' section will automatically set the background color parameter to 'transparent' in the embedding code in the gallery's 'index.html' page.
If I enable to show the numbers of the photos under the thumbnails the numbers are cut off at the top edge.
Try either setting floatCaption="FALSE" or increasing the captionHeight (both of which can be found in svBuilder-Pro's 'Customize -> Caption' section).
How can I set the relative url for the photos (if they are clicked to be shown in a separate page)? At the moment the default is /photo/photonumber.jpg But it should be /BestOfPhoto/photo/photonumber.jpg otherwise I get an error that it's not found (normal, because /photo is a subfolder not in the root)
If you leave the linkURLs in the gallery's XML file blank, then SimpleViewer will just use the imageURLs instead.
Otherwise, you could edit your gallery's XML file in a plain text editor and perform a single global search and replace action (perhaps using regular expressions) to set all the linkURLs.
Hi Steven,
sorry for bothering you so mud but I am not an expert at all, just trying to build the Joomla site by myself.
1. I read your link regarding the resizable gallery with a header - I am afraid I don't get it. At the end of the post I will paste the source code - maybe you can help me out. It is not the best way to hit the enter inside the article to make the gallery and the photos bigger. It doesn't work every time. The Gallery loads with a tiny main image and the thumbnail rows are truncated into half. After I press several time the + button of the browser page in the left upper corner it somehow adjusts but the main image is not at the size I allowed (1920 px max width) and uploaded.
2. The transparent background works now perfect. My mistake- I constantly overrode the parameter with pasting from your examples. Now its fine.
3. That issue is also solved - replaced all the links with a wildcard search. Now the links are empty.
Here is the code:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr" >
<head>
<base href="http://www.possberg-media.com/work/photography.html" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="travel landscape nature images documentary video photography" />
<meta name="rights" content="Possberg" />
<meta name="description" content="landscape and travel photography and video " />
<meta name="generator" content="Joomla! - Open Source Content Management" />
<title>Photography</title>
<link href="http://www.possberg-media.com/work/photography.html" rel="canonical" />
<link href="/templates/joomspirit_76/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<link rel="stylesheet" href="/media/system/css/frontediting.css" type="text/css" />
<script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
<script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
<script src="/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
<script src="/media/system/js/mootools-core.js" type="text/javascript"></script>
<script src="/media/system/js/core.js" type="text/javascript"></script>
<script src="/media/system/js/tabs-state.js" type="text/javascript"></script>
<script src="/media/system/js/caption.js" type="text/javascript"></script>
<script src="/media/jui/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/media/system/js/mootools-more.js" type="text/javascript"></script>
<script src="/media/system/js/frontediting.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(window).on('load', function() {
new JCaption('img.caption');
});
jQuery(document).ready(function()
{
jQuery('.hasTooltip').tooltip({"html": true,"container": "body"});
});
jQuery(document).ready(function()
{
jQuery('.hasPopover').popover({"html": true,"trigger": "hover focus","container": "body"});
});
</script>
<meta name="viewport" content="initial-scale=1" />
<!-- Google fonts -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Metrophobic" />
<!-- Font face -->
<!-- style sheet links -->
<link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/templates/joomspirit_76/css/main.css" type="text/css" media="all" />
<link rel="stylesheet" href="/templates/joomspirit_76/css/nav.css" type="text/css" media="all" />
<link rel="stylesheet" href="/templates/joomspirit_76/css/template.css" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="/templates/joomspirit_76/css/dynamic_css.php?font=Metrophobic&font_content=Verdana&width=1000px&width_left=20&width_right=20" media="all" />
<link rel="stylesheet" href="/templates/joomspirit_76/css/media_queries.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/templates/joomspirit_76/css/black_background.css" type="text/css" media="all" />
<link rel="stylesheet" href="/templates/joomspirit_76/css/black_background_responsive.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/templates/joomspirit_76/css/theme_blue.css" type="text/css" media="all" />
<link rel="stylesheet" href="/templates/joomspirit_76/css/print.css" type="text/css" media="print" />
<!--[if lte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
<!--[if lte IE 8]>
<link rel="stylesheet" href="/templates/joomspirit_76/css/ie8.css" type="text/css" />
<script type="text/javascript" src="/templates/joomspirit_76/lib/js/html5.js"></script>
<script type="text/javascript" src="/templates/joomspirit_76/lib/js/css3-mediaqueries.js"></script>
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" href="/templates/joomspirit_76/css/ie7.css" type="text/css" />
<![endif]-->
</head>
<body style="font-size:0.95em;" class="black">
<div class="site">
<div class="border_top_header">
</div>
<div class="wrapper-site">
<header class="header-site">
<div class="logo" >
<h1><img src="/images/Eigene/Possberg_V031920pxSchmal.jpg" alt="Possberg V031920pxSchmal" /></h1>
</div>
<div class="clr"></div>
</header>
<aside class="main_menu_box">
<div>
<nav class="main_menu">
<div class="moduletable dropdown jmoddiv" data-jmodediturl="http://www.possberg-media.com/administrator/index.php?option=com_modules&view=module&layout=edit&id=1" data-jmodtip="<strong>Edit module</strong><br />Main Menu<br />Position: menu" >
<ul class="nav menu">
<li class="item-435"><a href="/" >Home</a></li><li class="item-483"><a href="/profile.html" >Profile</a></li><li class="item-294 deeper parent"><a href="/work.html" >Work</a><ul class="nav-child unstyled small"><li class="item-438"><a href="/work/time-lapse.html" >Time Lapse</a></li><li class="item-290"><a href="/work/travel-video.html" >Travel Video</a></li><li class="item-482 current"><a href="/work/photography.html" title="www.possi.eu" >Photography</a></li><li class="item-504"><a href="/work/publication.html" >Publications </a></li><li class="item-481"><a href="/work/projects.html" >Projects</a></li></ul></li><li class="item-233"><a href="/destinations.html" >Destinations</a></li><li class="item-238"><a href="/sample-sites.html" >References</a></li><li class="item-484"><a href="/blog.html" >Blog</a></li><li class="item-503"><a href="/contact.html" >Contact </a></li></ul>
</div>
</nav>
<div class="clr"></div>
</div>
</aside> <!-- enf of main menu box -->
<div class="middle-site" style="min-height : 400px ;">
<!-- RIGHT COLUMN -->
<div class="right_column">
<!-- USER 1, 2, 3 -->
<!-- END OF USERS TOP -->
<div id="main_component" >
<div class="main-content">
<!-- MAIN COMPONENT -->
<div id="system-message-container">
<div id="system-message">
</div>
</div>
<article class="item-page">
<ul class="actions">
<li class="print-icon">
<a href="/work/photography.html?tmpl=component&print=1&page=" title="Print" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><img src="/media/system/images/printButton.png" alt="Print" /></a> </li>
<li class="email-icon">
<a href="/component/mailto/?tmpl=component&template=joomspirit_76&link=59629eccb726670ea2ee521b6c2b4a329bcad2b0" title="Email" onclick="window.open(this.href,'win2','width=400,height=350,menubar=yes,resizable=yes'); return false;"><img src="/media/system/images/emailButton.png" alt="Email" /></a> </li>
<li class="edit-icon">
<a href="/work/photography.html?task=article.edit&a_id=76&return=aHR0cDovL3d3dy5wb3NzYmVyZy1tZWRpYS5jb20vd29yay9waG90b2dyYXBoeS5odG1s" ><img src="/media/system/images/edit.png" alt="Edit" /></a> </li>
</ul>
<!--START SIMPLEVIEWER EMBED.-->
<p>
<script type="text/javascript" src="http://www.possberg-media.com/BestOfPhoto/svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
// <![CDATA[
var flashvars = {};
flashvars.baseURL = "http://www.possberg-media.com/BestOfPhoto/";
simpleviewer.ready(function() {
simpleviewer.load("sv-container", "100%", "100%", "transparent", true, flashvars);
});
// ]]>
</script>
</p>
<div id="sv-container"> </div>
<p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p><p>
</p>
<ul class="pager pagenav">
<li class="next">
<a href="/work/projects.html" rel="next">Next ></a>
</li>
</ul>
</article>
</div>
<div class="clr"></div>
</div>
<!-- USER 4, 5, 6 -->
<!-- END OF USERS BOTTOM -->
<div class="clr"></div>
</div> <!-- END OF RIGHT COLUMN -->
<!-- important for left column -->
<div class="clr"></div>
</div> <!-- END OF MIDDLE SITE -->
<footer class="bottom-site">
<!-- SOCIAL LINKS -->
<div id="social-links">
<ul>
<li class="text_social_icons"><span>Follow me on</span></li>
<li><a target="_blank" id="twitter" title="Twitter" href="#AnnaPossberg"><img src="/templates/joomspirit_76/images/social-icons-blacktheme/twitter-bird3.png" alt="" /></a></li>
<li><a target="_blank" id="facebook" title="Facebook" href="http://www.facebook.com/anneliese.possberg"><img src="/templates/joomspirit_76/images/social-icons-blacktheme/facebook-logo.png" alt="" /></a></li>
<li><a target="_blank" id="vimeo" title="Vimeo" href="http://vimeo.com/anneliesepossberg"><img src="/templates/joomspirit_76/images/social-icons-blacktheme/vimeo.png" alt="" /></a></li>
</ul>
</div> <!-- end of Website icons -->
<!-- bottom nav -->
<nav class="bottom_menu with_social_icons">
<div class="moduletable jmoddiv" data-jmodediturl="http://www.possberg-media.com/administrator/index.php?option=com_modules&view=module&layout=edit&id=22" data-jmodtip="<strong>Edit module</strong><br />Bottom<br />Position: bottom_menu" >
<ul class="nav menu">
<li class="item-479"><a href="/site-map.html" >Site Map</a></li><li class="item-485"><a href="/imprint.html" >Imprint</a></li></ul>
</div>
</nav>
<div class="clr"></div>
</footer> <!-- END OF FOOTER SITE -->
</div> <!-- END OF WRAPPER SITE -->
</div> <!-- END OF SITE -->
<div class="background-site"></div>
</body>
</html>
