Shift pictures on my gallery 
Author: Peter K.I want to make a gallery like this: When i select the pictures it will be big with an arrow.
I can then go to the next picture with a click on the arrow. If i want i can close my big picture again.
The program Fancybox can do this work:
In HTML and Objects i have thes code:
<a class="fancybox" href="glcarl_b.jpg" data-fancybox-group="gallery" title=""><img src="glcarl.jpg" alt="" /></a>
<a class="fancybox" href="grav_b.jpg" data-fancybox-group="gallery" title="2004"><img src="grav.jpg" alt="" /></a>
Genereal settings:
<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.5" media="screen" />
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox();
});
<style type="text/css">
.fancybox-custom .fancybox-skin {
box-shadow: 0 0 50px #222;
}
body {
max-width: 700px;
margin: 0 auto;
}
</style>
</script>
I think my problem is to write the code in the right places
Hello Peter,
Unfortunately I cannot help you with the use of custom code. Generally speaking since the functions do not depend on WebSite X5, you can search useful information about the custom code with search engines like google or wait until someone on the community of Answers can help you.
The code you added in general settings check if it is set in the section "before closing the HEAD tag" and then it is all in the correct place.
Many thanks!
Author
I think that my problem just is to place the code on the right place.
I have placed links to extern plugins in "general settings"
I have placed a peace of javascript in "General settings" like i will do in other programs.
I have moved the css-code to "HTML and Objects - Expert" in the site with the Fancybox.
Can you tell me where i shall place the code (I don't ask you to analyse the code) ?
Hello Peter,
The code you added in general settings needs to be set in the section "Before closing the HEAD tag" to work correctly but you need also to check all the files linked in the code are linked in the project and the path to load them in the custom code is correct or in case you need to adapt it to the path used in the program.
Generally if you add a file in the HTML object this is set in the /files/ folder if you didn't change it, and in this case as example if you addthe file jquery.mousewheel-3.0.6.pack.j
from
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>
will become
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="files/jquery.mousewheel-3.0.6.pack.js"></script>
Take in consideration if you modify the path you need to check again the code to have all links correct.
Many thanks!