КОнтакты, предложения, отзывы

.rar или .zip
Вложение
Онлайн-чат
На этом сайте, вы найдёте полезную информацию, практические советы в области веб-программирования, веб-дизайна и веб-разработок в целом. Мы с удовольствием поделимся с вами реальными примерами и решениями задач, связанных с jQuery , JavaScript , PHP и MySQL , версткой сайтов , поможем разобраться новичкам с современными технологиями, такими как Ajax , HTML5 , CSS3 и многими другими.

Красивая самодельная jQuery-галерея

Ещё одна красивая самодельная галерея

Её реализация ещё проще чем предыдущей, труднее всего подобрать нужные размеры картинок и стили для них:
#galleryII{
  margin: 11px auto;width:1000px;height: 650px;
  background-color: #000;
}
#main {
  width: 700px; height: 478px;float: right;margin:0px auto;
}
.center2{
  width: 700px; height: 487px;margin: 0;padding:0;float: left;
}
.small{
  width: 100px; height: 80px;margin: 0;padding:0;
}
.left{
  float: left;margin: 0;padding:0;
}
jQuery-код:
$(function(){
  $('body').on('click', '#galleryII img:not(#mainII img)', function(){
    $('#mainII img').hide().attr('src',$(this).attr('src'));
    $('#mainII img').load(function(){
      $(this).show(1000);
    });
  });
});
Что тут происходит: после клика на картинке дива с id="galleryII" (но не главной, которая большая в блоке с id="mainII") большая прячется, меняется её атрибут src (путь) и после полной загрузки (load) показывается за 1000мс уже новая картинка, та, по миниатюре которой мы кликнули.
Но что если малость изменить код:
$(function(){  
  $('body').on('click','#galleryII img:not(#maingallery img)',function(){
    $('#maingallery img').hide().attr('src',$(this).attr('src'));
    $('#maingallery img').load(function(){
      var showw = Array("blind","clip","fold","drop","explode","puff","highlight","slide");
      shuffle(showw);
      $(this).show(showw[0],1000);
    });
  });
});
function shuffle(array){
  for(var j, x, i = array.length; i; j = parseInt(Math.random() * i), x = array[--i], array[i] = array[j], array[j] = x);
  return true;
}
Теперь наши картинки будут показываться каждый раз с новым эффектом от jQuery UI (не забудьте подключить). Создаём массивчик с названиями эффектов, пишем функцию shuffle(), которая его перемешает после клика на картинке, и применит нулевой (можно какой-нибудь другой номер, но не больший за число элементов массива) эффект show (показа картинки) из массива.
2015.05.23 171
jpg

Кто бы мог тогда подумать, что папа дяди Федора из "Простоквашино" был программистом: в свитере, с бородой и защищал кота.
Войдите или Зарегистрируйтесь чтобы оставить комментарий

Комментарии


    Яндекс.Метрика Яндекс.Метрика