

<!-- class Upload
{
	public $filename;
	public $width = 800;
	public $height = 800;
	public $crop = false;
	public $thumb_crop = true;
	public $thumb_width = 100;
	public $thumb_height = 100;
	public $thumb = false;
	public $max_size = 6097152; // ~6MB

	private $dest_path;
	private $thumb_path;
	private $orig_path;
	private $resize = false;
	private $tmp_name;
	private $file = [];
	private $file_ok = false;

	function __construct($dest_path, $file)
	{
		$this->file = $file;

		$oldumask = umask(0);
		@mkdir($dest_path . "thumb/", 0777, true);
		@mkdir($dest_path . "orig/", 0777, true);
		umask($oldumask);

		$this->dest_path = $dest_path;
		$this->thumb_path = $dest_path . 'thumb/';
		$this->orig_path = $dest_path . 'orig/';

		$this->tmp_name = $this->file['tmp_name'];
		$this->filename = $this->get_filename($this->file['name']);

		if (in_array($this->file["type"], ["image/gif", "image/jpeg", "image/png", "image/webp"]) && ($this->file["size"] < $this->max_size)) {
			$this->file_ok = true;
			$this->save_original();
		}
	}

	private function get_filename($filename)
	{
		$name = pathinfo($filename, PATHINFO_FILENAME);
		$extension = pathinfo($filename, PATHINFO_EXTENSION);

		$temp_name = $name;
		$i = 1;
		while (file_exists($this->orig_path . $temp_name . "." . $extension)) {
			$temp_name = $name . '_' . $i;
			$i++;
		}

		return $temp_name . "." . $extension;
	}

	public function save_image()
	{
		if ($this->file_ok) {
			if ($this->resize) {
				$this->create_image($this->dest_path, $this->filename, $this->width, $this->height, $this->crop);
			} else {
				copy($this->orig_path . $this->filename, $this->dest_path . $this->filename);
			}

			if ($this->thumb) {
				$this->create_image($this->thumb_path, $this->filename, $this->thumb_width, $this->thumb_height, $this->thumb_crop);
			}
		}
	}

	private function create_image($path, $filename, $targetWidth, $targetHeight, $crop)
	{
		$file_path = $this->orig_path . $filename;
		list($origWidth, $origHeight) = getimagesize($file_path);

		$src_image = $this->image_create_from_file($file_path, $this->file['type']);
		if (!$src_image) {
			return false; // Failed to create image from file
		}

		// Calculate resize ratio respecting aspect ratio
		$ratio_orig = $origWidth / $origHeight;
		$ratio_target = $targetWidth / $targetHeight;

		// Initialize dimensions for resizing
		$resizeWidth = $targetWidth;
		$resizeHeight = $targetHeight;

		if ($crop) {
			if ($ratio_orig > $ratio_target) {
				// Original image is wider, fit height
				$resizeWidth = $targetHeight * $ratio_orig;
				$resizeHeight = $targetHeight;
			} else {
				// Original image is taller, fit width
				$resizeWidth = $targetWidth;
				$resizeHeight = $targetWidth / $ratio_orig;
			}
		} else {
			if ($ratio_orig > $ratio_target) {
				// Original image is wider, fit height
				$resizeWidth = $targetHeight * $ratio_orig;
				$resizeHeight = $targetHeight;
			} else {
				// Original image is taller, fit width
				$resizeWidth = $targetWidth;
				$resizeHeight = $targetWidth / $ratio_orig;
			}
		}

		// Create a new true color image with the calculated dimensions
		$resized_image = imagecreatetruecolor($resizeWidth, $resizeHeight);

		// Preserve transparency in PNG images
		if ($this->file['type'] == 'image/png') {
			imagecolortransparent($resized_image, imagecolorallocatealpha($resized_image, 0, 0, 0, 127));
			imagealphablending($resized_image, false);
			imagesavealpha($resized_image, true);
		}

		// Resize the original image
		imagecopyresampled($resized_image, $src_image, 0, 0, 0, 0, $resizeWidth, $resizeHeight, $origWidth, $origHeight);

		// Calculate cropping coordinates to center the image
		$crop_x = ($resizeWidth - $targetWidth) / 2;
		$crop_y = ($resizeHeight - $targetHeight) / 2;

		// Create the final image with the target dimensions
		$destination_image = imagecreatetruecolor($targetWidth, $targetHeight);

		// Preserve transparency in PNG images
		if ($this->file['type'] == 'image/png') {
			imagecolortransparent($destination_image, imagecolorallocatealpha($destination_image, 0, 0, 0, 127));
			imagealphablending($destination_image, false);
			imagesavealpha($destination_image, true);
		}

		// Crop the resized image to the target dimensions
		imagecopyresampled($destination_image, $resized_image, 0, 0, $crop_x, $crop_y, $targetWidth, $targetHeight, $targetWidth, $targetHeight);

		// Save the image in the original format
		$this->image_save_to_file($destination_image, $path . $filename, $this->file['type']);

		// Save the image in WebP format
		$this->image_save_to_webp($destination_image, $path . pathinfo($filename, PATHINFO_FILENAME) . '.webp', 70); // Adjust quality as needed

		// Cleanup
		imagedestroy($src_image);
		imagedestroy($resized_image);
		imagedestroy($destination_image);
	}


	private function image_create_from_file($filepath, $type)
	{
		switch ($type) {
			case 'image/jpeg':
				return imagecreatefromjpeg($filepath);
			case 'image/png':
				return imagecreatefrompng($filepath);
			case 'image/gif':
				return imagecreatefromgif($filepath);
			case 'image/webp':
				return imagecreatefromwebp($filepath);
			default:
				return false;
		}
	}

	private function image_save_to_file($image, $filepath, $type)
	{
		switch ($type) {
			case 'image/jpeg':
				imagejpeg($image, $filepath, 80); // Adjust quality as needed
				break;
			case 'image/png':
				imagepng($image, $filepath, 6); // Adjust compression level as needed
				break;
			case 'image/gif':
				imagegif($image, $filepath);
				break;
			case 'image/webp':
				imagewebp($image, $filepath, 85); // Adjust quality as needed
				break;
		}
	}

	private function image_save_to_webp($image, $filepath, $quality)
	{
		return imagewebp($image, $filepath, $quality);
	}

	private function save_original()
	{
		move_uploaded_file($this->tmp_name, $this->orig_path . $this->filename);
	}

	public function resize($width, $height)
	{
		$this->resize = true;
		$this->width = $width;
		$this->height = $height;
	}

	public function thumb($width = 100, $height = 100, $crop = true)
	{
		$this->thumb = true;
		$this->thumb_width = $width;
		$this->thumb_height = $height;
		$this->thumb_crop = $crop;
	}

	// Rotate Exif function omitted for brevity
} -->


<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-1PYP9RYPQC"></script>
  <script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());

    gtag('config', 'G-1PYP9RYPQC');
  </script>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <link rel="shortcut icon" href="favicon.ico">


  		<title>Foto - Club Champino Drachten</title>
		<meta name="description" content="0" />
		<meta name="keywords" content="0" />

		<!-- <meta name="Distribution" content="Global" /> -->
		<meta name="Rating" content="General" />
		<meta name="Robots" content="INDEX,FOLLOW" />
		<meta name="Revisit-after" content="7 Days" />
		<meta name="author" content="Spinnerz communicatie">
		<link rel="canonical" href="http://www.champino.nl/foto/" />


<!--
<link rel="apple-touch-icon" sizes="57x57" href="/favicons/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="114x114" href="/favicons/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="72x72" href="/favicons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="144x144" href="/favicons/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="60x60" href="/favicons/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="120x120" href="/favicons/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="76x76" href="/favicons/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="152x152" href="/favicons/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon-180x180.png">
<link rel="shortcut icon" href="/favicons/favicon.ico">
<link rel="icon" type="image/png" href="/favicons/favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicons/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="/favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/favicons/mstile-144x144.png">
<meta name="msapplication-config" content="/favicons/browserconfig.xml">
-->

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript" src="/js/parallax.min.js"></script>
  <!-- Bootstrap core CSS -->
  <link href="/css/bootstrap.css" rel="stylesheet">

  <!-- Google Fonts CSS -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,600i" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:700" rel="stylesheet">


  <!-- Font Awesome -->
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

  <!-- eigen style sheets -->
  <link rel="stylesheet" href="/css/owl.carousel.css">
  <link rel="stylesheet" type="text/css" href="/css/nav.css">
  <link rel="stylesheet" href="/swipebox/source/swipebox.css">
  <link rel="stylesheet" type="text/css" href="/css/custom.css">

  <script src="https://www.google.com/recaptcha/api.js?render=6Lco3vkeAAAAAFg4_DZKOPNzC08OeiCEB-ND-jHh"></script>
  <script defer data-domain="champino.nl" src="https://tester.spinnerz.nl/js/script.js"></script>

</head>

<body>

  <div id="fb-root"></div>
  <script>
    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s);
      js.id = id;
      js.src = "//connect.facebook.net/nl_NL/all.js#xfbml=1";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
  </script>


  <div class="container">

    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
	<div class="container">
		<!-- Brand and toggle get grouped for better mobile display -->
		<div class="navbar-header">
			<div class="visible-xs"><a class="navbar-brand" href="/index.php"><img src="/images/logochampino.png" height="40px;"></a></div>
			<button style="border:none; margin-top:20px;" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
		</div>
		<!-- Collect the nav links, forms, and other content for toggling -->
		<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

			<ul class="nav navbar-nav"><li class=" "><a href="/Home">Home</a></li><li class=" "><a href="/Agenda">Agenda</a></li><li class=" "><a href="/Tickets">Tickets</a></li><li class=" "><a href="/Vacatures">Vacatures</a></li><li class="active "><a href="/Foto">Foto</a></li><li class=" "><a href="/Belbus">Belbus</a></li><li class=" "><a href="/Je+eigen+feestje%21+">Je eigen feestje! </a></li><li class=" dropdown"><a href="#" data-toggle="dropdown">Informatie <i class="fa fa-angle-down"></i></a><ul class="dropdown-menu"><li class=" "><a href="/Locatie+en+Openingstijden">Locatie en Openingstijden</a></li><li class=" "><a href="/Feestregels">Feestregels</a></li><li class=" "><a href="/Contact">Contact</a></li></ul></li></ul>			<div class="pull-right"><a href="/index.php"><img src="/images/logochampino.png" class="img-responsive text-align-right" style="height:48px; padding-right:14px; padding-top:10px;"></a></div>
		</div>


	</div><!-- /.navbar-collapse -->
</div>  </div>
  <!--
  <div class="row">
  <div class="col-xs-12">
  <img class="img-responsive" src="/images/vacature1200.jpg" alt="Vacature barmedewerk(st)er" width="" height="" />
</div>
</div>
-->

  
    <!-- <div class="container-fluid hidden-sm hidden-xs" style="background-color: white !important;">
    <div class="parallax-window" data-parallax="scroll" data-image-src="/images/mental.jpg"></div>
</div> -->

  
  <div class="container-fluid" style="background-color:#000;">
    <div class="container">

      <div class="row" style="margin-top:65px;">
      </div>


              <div class="row">
          <div class="col-lg-12">
            <div id="owl-foto" class="owl-carousel">

	
		<div class="item">
			<div class="col-xs-12">
				<img class="img-responsive" src="/upload/custom_pages/agenda/new wave .webp">
			</div>

			<div class="col-xs-12">


				<p class="agenda-omschrijving well gradient"><span class="agenda-evenement">
						<span style="color:#fff;">za 14 september</span><br>							New wave | Throwback urb</span><br>
						<br>
						<span class=""><a class="btn btn-custom btn-sm" style="border-radius:0px;" onClick="javascipt:goTo('6822');">Lees meer</a>
													</span>
						<p>

			</div>
		</div>

	
		<div class="item">
			<div class="col-xs-12">
				<img class="img-responsive" src="/upload/custom_pages/agenda/team sonnema.webp">
			</div>

			<div class="col-xs-12">


				<p class="agenda-omschrijving well gradient"><span class="agenda-evenement">
						<span style="color:#fff;">vr 20 september</span><br>							Team Sonnema drive in sh</span><br>
						<br>
						<span class=""><a class="btn btn-custom btn-sm" style="border-radius:0px;" onClick="javascipt:goTo('6874');">Lees meer</a>
													</span>
						<p>

			</div>
		</div>

	
		<div class="item">
			<div class="col-xs-12">
				<img class="img-responsive" src="/upload/custom_pages/agenda/Rejecta.webp">
			</div>

			<div class="col-xs-12">


				<p class="agenda-omschrijving well gradient"><span class="agenda-evenement">
						<span style="color:#fff;">za 21 september</span><br>							Going hard with REJECTA!</span><br>
						<br>
						<span class=""><a class="btn btn-custom btn-sm" style="border-radius:0px;" onClick="javascipt:goTo('6796');">Lees meer</a>
													</span>
						<p>

			</div>
		</div>

	
		<div class="item">
			<div class="col-xs-12">
				<img class="img-responsive" src="/upload/custom_pages/agenda/kumpulan.webp">
			</div>

			<div class="col-xs-12">


				<p class="agenda-omschrijving well gradient"><span class="agenda-evenement">
						<span style="color:#fff;">vr 27 september</span><br>							Kumpulan Gemadra</span><br>
						<br>
						<span class=""><a class="btn btn-custom btn-sm" style="border-radius:0px;" onClick="javascipt:goTo('6900');">Lees meer</a>
													</span>
						<p>

			</div>
		</div>

	
		<div class="item">
			<div class="col-xs-12">
				<img class="img-responsive" src="/upload/custom_pages/agenda/Joe the party .webp">
			</div>

			<div class="col-xs-12">


				<p class="agenda-omschrijving well gradient"><span class="agenda-evenement">
						<span style="color:#fff;">za 28 september</span><br>							Joe The Party! </span><br>
						<br>
						<span class=""><a class="btn btn-custom btn-sm" style="border-radius:0px;" onClick="javascipt:goTo('6848');">Lees meer</a>
													</span>
						<p>

			</div>
		</div>

	
		<div class="item">
			<div class="col-xs-12">
				<img class="img-responsive" src="/upload/custom_pages/agenda/Bauers.webp">
			</div>

			<div class="col-xs-12">


				<p class="agenda-omschrijving well gradient"><span class="agenda-evenement">
						<span style="color:#fff;">za 12 oktober</span><br>							De Bauertjes on tour!</span><br>
						<br>
						<span class=""><a class="btn btn-custom btn-sm" style="border-radius:0px;" onClick="javascipt:goTo('6952');">Lees meer</a>
													</span>
						<p>

			</div>
		</div>

	
		<div class="item">
			<div class="col-xs-12">
				<img class="img-responsive" src="/upload/custom_pages/agenda/Stappers van toen.jpeg">
			</div>

			<div class="col-xs-12">


				<p class="agenda-omschrijving well gradient"><span class="agenda-evenement">
						<span style="color:#fff;">vr 18 oktober</span><br>							Stappers van toen by Dé</span><br>
						<br>
						<span class=""><a class="btn btn-custom btn-sm" style="border-radius:0px;" onClick="javascipt:goTo('6213');">Lees meer</a>
															<a a href="/Tickets/6213/Stappers+van+toen+by+D%C3%A9+Re%C3%BCnie%21+/2024-10-18"" class=" btn btn-custom btn-sm" style=""><i class="fa fa-chevron-right"></i> Voorverkoop</a>
													</span>
						<p>

			</div>
		</div>

	
		<div class="item">
			<div class="col-xs-12">
				<img class="img-responsive" src="/upload/custom_pages/agenda/Paul 24.webp">
			</div>

			<div class="col-xs-12">


				<p class="agenda-omschrijving well gradient"><span class="agenda-evenement">
						<span style="color:#fff;">za 19 oktober</span><br>							90's party met Paul Elst</span><br>
						<br>
						<span class=""><a class="btn btn-custom btn-sm" style="border-radius:0px;" onClick="javascipt:goTo('5399');">Lees meer</a>
													</span>
						<p>

			</div>
		</div>

	
		<div class="item">
			<div class="col-xs-12">
				<img class="img-responsive" src="/upload/custom_pages/agenda/Bertus sipma 24.webp">
			</div>

			<div class="col-xs-12">


				<p class="agenda-omschrijving well gradient"><span class="agenda-evenement">
						<span style="color:#fff;">za 26 oktober</span><br>							Welkom in de feesttent m</span><br>
						<br>
						<span class=""><a class="btn btn-custom btn-sm" style="border-radius:0px;" onClick="javascipt:goTo('7072');">Lees meer</a>
													</span>
						<p>

			</div>
		</div>

	
		<div class="item">
			<div class="col-xs-12">
				<img class="img-responsive" src="/upload/custom_pages/agenda/Django 2 nov banner _1.webp">
			</div>

			<div class="col-xs-12">


				<p class="agenda-omschrijving well gradient"><span class="agenda-evenement">
						<span style="color:#fff;">za 2 november</span><br>							Meezingen met Django Wag</span><br>
						<br>
						<span class=""><a class="btn btn-custom btn-sm" style="border-radius:0px;" onClick="javascipt:goTo('7020');">Lees meer</a>
													</span>
						<p>

			</div>
		</div>

	
		<div class="item">
			<div class="col-xs-12">
				<img class="img-responsive" src="/upload/custom_pages/agenda/q music 24.webp">
			</div>

			<div class="col-xs-12">


				<p class="agenda-omschrijving well gradient"><span class="agenda-evenement">
						<span style="color:#fff;">za 9 november</span><br>							Q- MUSIC Het FOUTE UUR L</span><br>
						<br>
						<span class=""><a class="btn btn-custom btn-sm" style="border-radius:0px;" onClick="javascipt:goTo('7098');">Lees meer</a>
													</span>
						<p>

			</div>
		</div>

	
		<div class="item">
			<div class="col-xs-12">
				<img class="img-responsive" src="/upload/custom_pages/agenda/Tukker fm 2024.webp">
			</div>

			<div class="col-xs-12">


				<p class="agenda-omschrijving well gradient"><span class="agenda-evenement">
						<span style="color:#fff;">za 23 november</span><br>							Tukker FM, donders mooi!</span><br>
						<br>
						<span class=""><a class="btn btn-custom btn-sm" style="border-radius:0px;" onClick="javascipt:goTo('7046');">Lees meer</a>
													</span>
						<p>

			</div>
		</div>

	
		<div class="item">
			<div class="col-xs-12">
				<img class="img-responsive" src="/upload/custom_pages/agenda/jannes piraten.webp">
			</div>

			<div class="col-xs-12">


				<p class="agenda-omschrijving well gradient"><span class="agenda-evenement">
						<span style="color:#fff;">za 30 november</span><br>							Piratenavond Jannes! </span><br>
						<br>
						<span class=""><a class="btn btn-custom btn-sm" style="border-radius:0px;" onClick="javascipt:goTo('5324');">Lees meer</a>
													</span>
						<p>

			</div>
		</div>

	
		<div class="item">
			<div class="col-xs-12">
				<img class="img-responsive" src="/upload/custom_pages/agenda/Gaatze bosma 7 dec.webp">
			</div>

			<div class="col-xs-12">


				<p class="agenda-omschrijving well gradient"><span class="agenda-evenement">
						<span style="color:#fff;">za 7 december</span><br>							Meezingen met Gaatze Bos</span><br>
						<br>
						<span class=""><a class="btn btn-custom btn-sm" style="border-radius:0px;" onClick="javascipt:goTo('5274');">Lees meer</a>
													</span>
						<p>

			</div>
		</div>

	
		<div class="item">
			<div class="col-xs-12">
				<img class="img-responsive" src="/upload/custom_pages/agenda/Mooi Wark.webp">
			</div>

			<div class="col-xs-12">


				<p class="agenda-omschrijving well gradient"><span class="agenda-evenement">
						<span style="color:#fff;">za 14 december</span><br>							Mooi Wark in Ome Pino!</span><br>
						<br>
						<span class=""><a class="btn btn-custom btn-sm" style="border-radius:0px;" onClick="javascipt:goTo('6978');">Lees meer</a>
													</span>
						<p>

			</div>
		</div>

	
	</div>          </div>
        </div>
            <!-- Hoofdtekst  -->
      
	
	<div class="row">
		<div class="col-xs-12 col-md-12" style="margin-bottom:50px;">
							<h1>Foto</h1>
				<p>Klik op de foto&#39;s voor een grotere weergave. Scroll door de foto&#39;s met de pijlen of gebruik de &#39;pijltjes&#39; op het toetsenbord.</p>
						<div class="select" style="clear:both; margin-bottom:20px;">
		<SELECT class="form-control" ONCHANGE="location = this.options[this.selectedIndex].value;">
		<option value="maak een keuze">Bekijk foto's van een andere datum...</option>
					<option value="/foto-481">Zaterdag 24 augustus</option>
					<option value="/foto-480">Zaterdag 17 augustus</option>
					<option value="/foto-479">Zaterdag 27 juli</option>
					<option value="/foto-478">Zaterdag 20 juli</option>
					<option value="/foto-477">Zaterdag 13 juli</option>
					<option value="/foto-476">Zaterdag 6 juli</option>
			</select>
</div>

	<div class="row">
		<p class="titelfotomap">Foto's van: Zaterdag 17 augustus</p>

		
			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/Stappers van toen kopie.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/Stappers van toen kopie.webp" alt="Stappers van toen kopie.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/Paul elstak kopie.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/Paul elstak kopie.webp" alt="Paul elstak kopie.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7549.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7549.webp" alt="IMG_7549.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7548.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7548.webp" alt="IMG_7548.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7543.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7543.webp" alt="IMG_7543.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7542.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7542.webp" alt="IMG_7542.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7541.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7541.webp" alt="IMG_7541.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7540.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7540.webp" alt="IMG_7540.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7537.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7537.webp" alt="IMG_7537.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7535.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7535.webp" alt="IMG_7535.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7534.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7534.webp" alt="IMG_7534.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7533.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7533.webp" alt="IMG_7533.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7532.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7532.webp" alt="IMG_7532.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7529.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7529.webp" alt="IMG_7529.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7529.jpg.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7529.jpg.webp" alt="IMG_7529.jpg.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7526.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7526.webp" alt="IMG_7526.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7524.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7524.webp" alt="IMG_7524.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7522.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7522.webp" alt="IMG_7522.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7521.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7521.webp" alt="IMG_7521.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7520.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7520.webp" alt="IMG_7520.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7519.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7519.webp" alt="IMG_7519.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7518.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7518.webp" alt="IMG_7518.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7517.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7517.webp" alt="IMG_7517.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7516.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7516.webp" alt="IMG_7516.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7515.jpg.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7515.jpg.webp" alt="IMG_7515.jpg.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7515.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7515.webp" alt="IMG_7515.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7512.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7512.webp" alt="IMG_7512.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7510.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7510.webp" alt="IMG_7510.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7509.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7509.webp" alt="IMG_7509.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7507.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7507.webp" alt="IMG_7507.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7506.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7506.webp" alt="IMG_7506.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7504.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7504.webp" alt="IMG_7504.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7503.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7503.webp" alt="IMG_7503.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7502.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7502.webp" alt="IMG_7502.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7500.jpg.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7500.jpg.webp" alt="IMG_7500.jpg.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7500.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7500.webp" alt="IMG_7500.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7499.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7499.webp" alt="IMG_7499.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7498.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7498.webp" alt="IMG_7498.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7495.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7495.webp" alt="IMG_7495.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7494.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7494.webp" alt="IMG_7494.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7493.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7493.webp" alt="IMG_7493.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/1.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/1.webp" alt="1.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/2.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/2.webp" alt="2.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/3.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/3.webp" alt="3.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/4.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/4.webp" alt="4.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/5.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/5.webp" alt="5.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/6.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/6.webp" alt="6.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7488.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7488.webp" alt="IMG_7488.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7489.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7489.webp" alt="IMG_7489.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7491.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7491.webp" alt="IMG_7491.jpg "> </a>
			</div>
		

			<div class="col-xs-4 col-sm-4" style="padding:0px !important;">
				<a class="swipebox" rel="Zaterdag 17 augustus" href="../upload/gallery/20240822013012/IMG_7492.jpg">
										<img class="lazy img-responsive" data-src="../upload/gallery/20240822013012/thumb/IMG_7492.webp" alt="IMG_7492.jpg "> </a>
			</div>
			</div>

<script>
	document.addEventListener("DOMContentLoaded", function() {
		var lazyImages = document.querySelectorAll('.lazy');

		// Function to check if an element is in the viewport
		function isInViewport(element) {
			var rect = element.getBoundingClientRect();
			return (
				rect.top >= 0 &&
				rect.left >= 0 &&
				rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
				rect.right <= (window.innerWidth || document.documentElement.clientWidth)
			);
		}

		// Function to lazy load images
		function lazyLoad() {
			lazyImages.forEach(function(image) {
				if (isInViewport(image)) {
					if (!image.src || image.src === '') {
						image.src = image.dataset.src;
					}
				}
			});
		}

		// Initial load
		lazyLoad();

		// Event listener for scroll events
		window.addEventListener('scroll', lazyLoad);
	});
</script>
		</div>
	</div>


      <!-- Footer -->
      <div class="row" style="margin-bottom:40px;">
			<div class="col-xs-12 col-md-4">
			<div class="footerblock well gradient">
				<p class="footerkop">Je eigen feestje! </p>
				<span class="contactinhoud">Club Champino&nbsp;is d&egrave; uitgaansgelegenheid bij uitstek en de leukste plek voor je eigen feest!&nbsp;
Op alle avonden&nbsp;kunnen &eacute;&eacute;n of meerdere van de genoemde locaties exclusief afgehuurd worden. Zaterdagavond is ook mogelijk tot een bepaalde......</span>
				<p class="leesmeer"><br><a class="btn btn-custom btn-xs" href="/Je eigen feestje! "><i class="fa fa-arrow-circle-o-right fa-lg"></i> Lees meer</a></p>
			</div>
		</div>

			<div class="col-xs-12 col-md-4">
			<div class="footerblock well gradient">
				<p class="footerkop">Locatie en Openingstijden</p>
				<span class="contactinhoud">Club Champino is iedere zaterdag geopend en op andere dagen alleen tijdens speciale evenementen. Kijk op agenda pagina voor een overzicht van alle speciale evenementen.

Zaterdag: 23:00- 04:00......</span>
				<p class="leesmeer"><br><a class="btn btn-custom btn-xs" href="/Locatie en Openingstijden"><i class="fa fa-arrow-circle-o-right fa-lg"></i> Lees meer</a></p>
			</div>
		</div>

			<div class="col-xs-12 col-md-4">
			<div class="footerblock well gradient">
				<p class="footerkop">Contact</p>
				<span class="contactinhoud">Champino&nbsp;
Zuidkade 65
9203 CP Drachten

E-mail:&nbsp;info@champino.nl

Heb je een vraag dan kan je ook gebruik maken van het onderstaande......</span>
				<p class="leesmeer"><br><a class="btn btn-custom btn-xs" href="/Contact"><i class="fa fa-arrow-circle-o-right fa-lg"></i> Lees meer</a></p>
			</div>
		</div>

	</div>    </div> <!-- eind container -->
  </div>
  </div>


  <!-- JS -->
  <script src="/js/bootstrap.js" type="text/javascript"></script>
  <script type="text/javascript" src="/js/main.js"></script>
  <script type="text/javascript" src="/js/jquery.validate.js"></script>
  <script type="text/javascript" src="/js/owl.carousel.js"></script>
  <script type="text/javascript" src="/js/holder.js"></script>
  <script src="/swipebox/source/jquery.swipebox.js"></script>
  <script type="text/javascript" src="/js/parallax.min.js"></script>
  <script type-"text/javascript" src="/js/jquery.match.height.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
      setInterval(function() {
        grecaptcha.ready(function() {
          grecaptcha.execute('6Lco3vkeAAAAAFg4_DZKOPNzC08OeiCEB-ND-jHh', {
            action: 'name'
          }).then(function(token) {
            $('#token').val(token);
            $('#action').val('name');
          });
        });
      }, 3000);
    });
  </script>

  <script>
    $(window).on("load", function() {
      $("#respop").modal("show");
    });
  </script>

</body>

</html>