Annonces
le journal de mickey est prêt

code gallery

Voir le sujet précédent Voir le sujet suivant Aller en bas

avatar
fascicularia
Localisation : St Médard de Guizières 33230
Messages : 256
Age : 49
Date d'inscription : 13/09/2009
http://prestaplant.forumactif.com / http://altitudetropicale.for

Messagefascicularia le Jeu 3 Nov 2016 - 11:42

Code:
$(function($) {
var jSpeed = 400;// Set the change speed of the image
var jDirection;
$('head').append(
'<style type="text/css">' +
  '#overlay_gallery {' +
  '  background-color: #000;' +
  '  right: 0;' +
  '  bottom: 0;' +
  '  left: 0;' +
  '  opacity: 0.8;' +
  '  position: fixed;' +
  '  top: 0;' +
  '  z-index: 999;' +
  '}' +
  '.lightbox_gallery {' +
  '  position: fixed;' +
  '  top: 8%;' +
  '  max-height: 85%;' +
  '  left: 0px;' +
  '  display: flex;' +
  '  text-align: center;' +
  '  width: 100%;' +
  '  z-index: 999;' +
  '}' +
  '.close-gallery {' +
  '  background: #fff url(https://cdn4.iconfinder.com/data/icons/gnome-desktop-icons-png/PNG/32/Gnome-Window-Close-32.png) no-repeat center;' +
  '  padding: 5px;' +
  '  height: 32px;' +
  '  width: 32px;' +
  '  border-radius: 0 0 0 3px;' +
  '  cursor: pointer;' +
  '  position: absolute;' +
  '  right: 3px;' +
  '  top: 3px;' +
  '}' +
  '.lightbox_gallery img {max-width: 100%;margin: 0 auto;}' +
  '  .lb-gallery {' +
  '  -moz-border-radius-: 4px;' +
  '  -webkit-border-: 4px;' +
  '  background-color: #fff;' +
  '  border-radius: 4px;' +
  '  margin: 0 auto;' +
  '  max-width: 65%;' +
  '  min-height: 130px;' +
  '  min-width: 250px;' +
  '  position: relative;' +
  '  zoom: 1;' +
  '}' +
  '.lb-gallery-container {' +
  '  padding: 4px;' +
  '}' +
  '#gallery_bs {' +
  '  background-color: #222;' +
  '  min-height: 400px;' +
  '  margin: 10px auto;' +
  '  position: relative;' +
  '  width: 650px;' +
  '  -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);' +
  '  -moz-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);' +
  '  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7 );' +
  '}' +
  '#gallery_bs .prev, #gallery_bs .next {' +
  '  background-color: #121212;' +
  '  border-radius: 5px;' +
  '  padding: 3px;' +
  '  opacity: 0;' +
  '  height: 32px;' +
  '  width: 32px;' +
  '  position: absolute;' +
  '  z-index: 200;' +
  '  cursor: pointer;' +
  '  top: 240px;' +
  '  background-repeat: no-repeat;' +
  '  background-position: center;' +
  '}' +
  '#gallery_bs:hover .prev, #gallery_bs:hover .next {' +
  '  -moz-transition: all .4s linear;' +
  '  -o-transition: all .4s linear;' +
  '  -webkit-transition: all .4s linear;' +
  '  opacity: 1;' +
  '}' +
  '.gallery_bs {' +
  '  height: 348px;' +
  '  text-align: center;' +
  '}' +
  '#gallery_bs .image_bs {' +
  '  cursor: -webkit-zoom-in;' +
  '  max-height: 100% !important;' +
  '  max-width: 100% !important;' +
  '  width: 100% !important;' +
  '  -moz-transition: all .2s linear;' +
  '  -o-transition: all .2s linear;' +
  '  -webkit-transition: all .2s linear;' +
  '}' +
  '#gallery_bs .prev {background-image: url(http://i.imgur.com/V93QBXz.png);left: 20px;}' +
  '#gallery_bs .next {background-image: url(http://i.imgur.com/PTqQ1DY.png);right: 20px;}' +
  '#gallery_bs .header_gal {' +
  '  background-color: #333;' +
  '  text-align: center;' +
'display: flex;'+
'width: 100%;'   +
  '}' +
  '#gallery_bs .header_gal img {' +
  '  width: 65px;' +
  '  height: 85px;' +
  '  padding: 0px;' +
  '  margin: 5px;' +
  '  border-style: solid;' +
  '  border-width: 3px;' +
  '  transition: all linear .2s;' +
  '  cursor: pointer;' +
  '}' +
  '#gallery_bs .header_gal img:hover {' +
  '  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, .4);' +
  '  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .4);' +
  '  box-shadow: 0 0 5px rgba(0, 0, 0, .4);' +
  '  border-color: #777;' +
  '}' +
  '</style>'
);
$('body').append(
'<div id="overlay_gallery" class="overlay_gallery" style="display: none;"></div>' +
'<div id="lightbox_gallery" class="lightbox_gallery" style="display: none;">' +
'  <div class="lb-gallery">' +
'  <div class="lb-gallery-container">' +
'    <span class="close-gallery" onclick="close_pop_up()"></span>' +
'    <img class="lb-gallery-image">' +
'  </div>' +
'  </div>' +
'</div>'
);
var jContent = $('.postbody, .blog_message');
  jContent.html(function() {
        return $(this)
        .html()
        .replace(/\[gallery](.*?)\[\/gallery\]/g,'<div id="gallery_bs" class="image_gallery"><div class="header_gal">$1</div><span class="prev"></span><span class="next"></span><div class="gallery_bs"><img class="image_bs" onclick="open_pop_up(this)" /></div></div>');
  });
  $('.image_gallery').each(function() {
    var jThis = $(this);
    var jImg = jThis.find('img');
    var jImgSrc = jImg.attr('src');
    var jImageBs = jThis.find('.image_bs');
    jImageBs.attr('src', jImgSrc);
    jImg.click(function() {
        var jThisSrc = $(this).attr('src');
        jImageBs.fadeOut(jSpeed, function() {
          jImageBs.attr('src', jThisSrc).fadeIn();
        });
    });
    jThis.find('.prev, .next').click(function() {
      var jChange = $(this);
      var jCurrentSrc = jImageBs.attr('src');
      var jCurrentImg = jThis.find('img[src="' + jCurrentSrc + '"]');
      jImageBs.fadeOut(jSpeed, function() {
          if(jChange.hasClass('prev')) {
          jDirection = jCurrentImg.prev().attr('src');
          } else {
          jDirection = jCurrentImg.next().attr('src');
          }
          jImageBs.attr('src', jDirection).fadeIn();
      });
    });
  });
});
function open_pop_up(GAL) {
      var jSrc = $(GAL).attr('src');
      $('#overlay_gallery').fadeIn('slow', function() {
        $('#lightbox_gallery').fadeIn('fast');
        $('.lb-gallery-image').attr('src', jSrc);
      });
}
function close_pop_up() {
      $('#lightbox_gallery').fadeOut('slow', function() {
        $('#overlay_gallery').fadeOut('fast');
      });
}

_________________

Voir le sujet précédent Voir le sujet suivant Revenir en haut

Créer un compte ou se connecter pour répondre

Vous devez être membre pour répondre.

S'enregistrer

Rejoignez notre communauté ! C'est facile !


S'enregistrer

Connexion

Vous êtes déjà membre ? Aucun soucis, cliquez ici pour vous connecter.


Connexion

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum