Your Slider

Manual

Upload the directories ‘YGCSS’, ‘YGJS’ and ‘yg_images’ in the root of your website-server.

Copy the text

<link rel='stylesheet' href='YGCSS/gallery-min.css'> <
script type='text/javascript' src='YGJS/gallery_standard-min.js'></script>

direct above the end </head> tag on the webpage where you want the slider.

Replace the images in ‘yg_images’. The thumbs in ‘yg_images/thumbs’ are created automatically when the page is visited for the first time.

Example 1 (standard)

Copy

<script type='text/javascript'>yg_standard();</script>

somewhere in the webpage between the <body> tags.

<!DOCTYPE html>
<html lang="nl">
<head>
    <title>Your Gallery Slider is here!! Yeah! Woww!!!</title>
    <meta charset="UTF-8">
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0' />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="stylesheet" href="YGCSS/gallery-min.css">
    <script type='text/javascript' src='YGJS/gallery_standard-min.js'></script>
</head>
<body>
<script type='text/javascript'>yg_standard();</script>
</body>
</html>

You can add information about the location of the yg_images directory by adding custom data:

<script type='text/javascript'>
     var yg_data0 = {
        site:      'http://www.example.com/test',
        images_map:'/yg_images/',
        thumbs_map:'/yg_images/thumbs/'
     };
</script>

See example 2.
Replace the example domain and/or path info in http://www.example.com/test by your own.
This must be the complete path to the directory where yg_images exists.
Attention: the ‘images_map’ and ‘thumbs_map’ values must start and end with an slash (‘/’).
html:

<!DOCTYPE html>
<html lang="nl">
<head>
    <title>Your Gallery Slider is here!! Yeah! Woww!!!</title>
    <meta charset="UTF-8">
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0' />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="stylesheet" href="YGCSS/gallery-min.css">
    <script type='text/javascript' src='YGJS/gallery_standard-min.js'></script>
    <script type='text/javascript'>
        var yg_data0 = {
           site:      'http://www.example.com/test',
           images_map:'/yg_images/',
           thumbs_map:'/yg_images/thumbs/'
        };
    </script>
</head>
<body>
<script type='text/javascript'>yg_standard();</script>
</body>
</html>

Example 2 (with custom data)

You can use the following code

<script type='text/javascript'>
     var yg_data0 = {
       thumb_width:120,
       thumb_height:70,
       thumb_margin:5,
       view_width:600,
       view_height:350,
       buttons_off:true
     };
</script>

to customize the slider. The value 0 in ‘yg_data0’ is the id of this slider.

Copy
<div>
  <script type='text/javascript'>yg_standard(0);</script>
</div>

somewhere in the webpage. The value between parenthesis in ‘yg_standard(0)’ is the id of this slider. You can put more then one slider on a webpage (see example 3).

<!DOCTYPE html>
<html lang="nl">
<head>
    <title>Your Gallery Slider is here!! Yeah! Woww!!!</title>
    <meta charset="UTF-8">
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0' />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="stylesheet" href="YGCSS/gallery-min.css">
    <script type='text/javascript' src='YGJS/gallery_standard-min.js'></script>
    <script type='text/javascript'>
        var yg_data0 = {
            thumb_width:120,
            thumb_height:70,
            thumb_margin:5,
            view_width:600,
            view_height:350,
            buttons_off:true
        };
    </script>
</head>
<body>
<script type='text/javascript'>yg_standard(0);</script>
</body>
</html>

You can use:

<script type='text/javascript'>
    var yg_data0 = {
       thumbs_bar_height:0,
       thumb_height:0,
       thumb_margin:0
    };
</script>

to hide the thumbsbar!

Example 3 (multiple sliders on a page)

If you have a webpage with images, for instance (simplified):

<body>
  <img src="image1.jpg"/>
  <img src="image2.jpg"/>
  <img src="image3.jpg"/>
  <img src="image4.jpg"/>
  <img src="image5.jpg"/>
  <img src="image6.jpg"/>
  <img src="image7.jpg"/>
  <img src="image8.jpg"/>
</body>

If you want two sliders, one with images 1-4 and the other with images 5-8, you can do this as follows (put corresponding images and slider code between <div> tags:

<body>
<div>
  <img src="image1.jpg"/>
  <img src="image2.jpg"/>
  <img src="image3.jpg"/>
  <img src="image4.jpg"/>
  <script type='text/javascript'>yg_standard();</script>
</div>
<div>
  <img src="image5.jpg"/>
  <img src="image6.jpg"/>
  <img src="image7.jpg"/>
  <img src="image8.jpg"/>
  <script type='text/javascript'>yg_standard();</script>
</div>
</body>

Enjoy!


Contact me