Web-программы своими руками

вторник, 2 сентября 2008 г.

галлерея

Несложный примерчик фотогаллереи


<style type="text/css">
#coverContent {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:url(/images/opacity.png);
  display:none;
  z-index:10;
  cursor:pointer;
}
* html #coverContent {
  background-image:none;
  background-color:#000;
  opacity:expression($('#coverContent').css('opacity',0.75));
}
*+html #coverContent {
  background-image:none;
  background-color:#000;
  opacity:expression($('#coverContent').css('opacity',0.75));
}
#bigImage {
  position:absolute;
  background:#fff url(/images/free.gif) top left no-repeat;
  display:none;
  z-index:11;
  cursor:pointer;
  text-align:center;
  vertical-align:bottom;
}
</style>

<script type="text/javascript">
function bigpic(src, w, h, comment) {
  if (w && h) {  
    w = parseInt(w);
    h = parseInt(h) + 20;
    
    comment = '<p style="color:#000;font:bold 12px tahoma;text-align:center;margin-top:'+(h-17)+'px">&nbsp;'+comment+'</p>';
    
    var left = Math.round((screen.width - w)/2);
    var top = Math.round(($(document.body).height() - h)/2) + $(window).scrollTop();//all
    
    if ($.browser.msie) {
      var height = document.body.scrollHeight;
    } else {
      var height = $(document).height();
    }
    height = $(document).height();
    
    $('#coverContent').css("top", 0).css("height", height).css('width','100%').css('display','block');
    $('#bigImage').css('height',h).css('width',w).css('backgroundImage','url('+src+')').css('top',top).css('left',left);
    $('#bigImage').html(comment).fadeIn(200);
    
  }
}

function boxInit() {
  $('#gallery a.fancybox').bind('click',function() {
    var src = $(this).attr('href');
    var comment = $(this).attr('title');
    
    bigpic(src, 600, 400, comment);
    return false;
  });
}


$(document).ready(
  function() {
    if ($('#coverContent').get(0) && $('#bigImage').get(0)) {
      boxInit();
    
      $('#coverContent').get(0).onclick = function() {
        closeBigImage();
      }
      $('#bigImage').get(0).onclick = function() {
        closeBigImage();
      }
      
      $(window).scroll(function() {
        if ($('#coverContent').css('display') == 'block') {
          var h = $('#bigImage').height();
          var top = Math.round(($(document.body).height() - h)/2) + $(window).scrollTop();//all
          $('#bigImage').css('top',top);
        }
      });
    }
  }
)

function closeBigImage() {
  $('#bigImage').css('display','none');
  $('#coverContent').css('display','none');
}
</script>

<body>
<div id="coverContent"></div>
<div id="bigImage"></div>

<a class="fancybox" target="_blank" href="/files/gallery/01b.jpg" rel="lightbox-tour" title="01b.jpg">
<img alt="01b.jpg" src="/files/gallery/01b_th.jpg"/>
</a>
<a class="fancybox" target="_blank" href="/files/gallery/02b.jpg" rel="lightbox-tour" title="02b.jpg">
<img alt="02b.jpg" src="/files/gallery/02b_th.jpg"/>
</a>
<a class="fancybox" target="_blank" href="/files/gallery/03b.jpg" rel="lightbox-tour" title="03b.jpg">
<img alt="03b.jpg" src="/files/gallery/03b_th.jpg"/>
</a>
</body>

среда, 13 августа 2008 г.

Создадим эффект, напоминающий «Лебедевский» на сайте http://www.mosgorreklama.ru . В отличии от него будем перемещать не слой внутри другого слоя, а фон. На основе этого эффекта можно собрать оригинальный фотоальбом, в котором большие картинки будут прокручиваться внутри маленькой области.

Как всегда, скрипт требует фреймворка JQuery

<script language="javascript" type="text/javascript">
  // background
  var x = 0;
  var y = 0;
  // mouse
  var mx = 0;
  var my = 0;
  var timer;
  // размеры контейнера
  var h = 0;
  var w = 0;
  // размеры картинки
  var width = 747;
  var height = 880;
  var drag = 0;
  var supported = /MSIE ((5\.5)|[6789])/.test(navigator.userAgent) && navigator.platform == "Win32";

 $(document).ready(
  function() {
 preventSelection(document);
 bindMoving('moveLeft',-30,0,25);
 bindMoving('moveRight',30,0,25);
 bindMoving('moveUp',0,-20,25);
 bindMoving('moveDown',0,20,25);

  $('#tdContainer').get(0).onmousemove = mouse;
 $('#tdContainer').get(0).onmousedown = function() {drag = 1;}
 $('#tdContainer').get(0).onmouseup = function() {drag = 0;}
 $('#tdContainer').get(0).ondrag = function() {return false}
 $('#tdContainer').get(0).ondragstart = function() {return false}
  }
);
 
function bindMoving(id,dx,dy,interval) {
  $('#'+id).get(0).onmouseover = function() {
   if (supported) {
    timer = setTimeout(function() {moveBy([dx,dy,interval])}, interval);
   } else {
    timer = setTimeout(moveBy, interval, [dx,dy,interval]);
   }
}
  $('#'+id).get(0).onmouseout = function() {
   clearTimeout(timer);
  }
}
function moveBy(par) {
  var dx = par[0];
  var dy = par[1];
  var interval = par[2];
  var fade = par[3];
  //alert('x='+dx+' y='+dy+' i='+interval);
  x = x + dx;
  y = y + dy;
  if(x > width) x = x - width+1;
  if(x < 0) x = x + width-1;
  if(y > height) y = y - height+1;
  if(y < 0) y = y + height-1;
  $('#tdContainer').css('backgroundPosition', x+'px '+y+'px');
  if (interval)
   if (supported) {
    timer = setTimeout(function() {moveBy([dx,dy,interval])}, interval);
   } else {
    timer = setTimeout(moveBy, interval,[dx,dy,interval]);
   }
}
function mouse(e) {
  var x = 0, y = 0;
 
  if (!e) e = window.event;
 
  if (e.pageX || e.pageY) {
   x = e.pageX;
   y = e.pageY;
  } else if (e.clientX || e.clientY) {
   x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
   y = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
  }
  if (drag)
   moveBy([x-mx,y-my,0]);

 mx = x;
  my = y;
  return {"x":x, "y":y};
}
</script>


<div style="background:url(/portfolio/1.jpg) repeat 0px 0px; width:400px; height:300px;" id="tdContainer'">
   <a id="moveUp" href="javascript:void(0)">Up</a>
   <a id="moveDown" href="javascript:void(0)">Down</a>
   <a id="moveRight" href="javascript:void(0)">Right</a>
   <a id="moveLeft" href="javascript:void(0)">Left</a>

</div>

Функция preventSelection(document);

среда, 6 августа 2008 г.

Меняем элементы местами Javascript

Бывают случаи, когда необходимо менять местами элементы какого-либо списка на веб-странице, не перезагружая ее. К примеру сообщения в форуме, категории товаров, порядок следования разделов в CMS. С этим пожожет справиться следующий скрипт.

При использовании его с технологией AJAX (AJAJ, AJAH..) можно настраивать сортировку разделов в панели управления сайтом.


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Перемещение вверх-вниз</title>
<script type="text/javascript" src="jquery.js"></script>

<style type="text/css">
div#listDiv {
  padding:5px;
  border:1px #000 solid;
  width:200px;
  margin:300px auto;
}

div.itemDiv {
  padding:2px;
  border-bottom:1px #999 solid;
  font:12px tahoma;
  width:190px;
}

div.itemDiv a {
  color:#00f;
  text-decoretion:none;
}
</style>

<script type="text/javascript">
function init() {
  bindClickUp();
  bindClickDn();
  colorized();
}

function colorized() {
  $('div.itemDiv').each(function(i){if(i % 2 == 1) $(this).css('backgroundColor','#eee')});
}

function bindClickUp() {
  var a_up = $('a.up');
  a_up.each(
    function(i) {
      this.onclick = function() {
        //if (i > 0) {
          var topHtml = $(a_up.get(i-1)).parent().html();
          var curHtml = $(this).parent().html();
          $(a_up.get(i-1)).parent().html(curHtml);
          $(this).parent().html(topHtml);
          init();
        //};        
      };
    }
  )
}
function bindClickDn() {
  var a_dn = $('a.dn');
  a_dn.each(
    function(i) {
      var contains = $('div.itemDiv');
      this.onclick = function() {
        //if (i < 4) {
          var botHtml = $(a_dn.get(i+1)).parent().html();
          var curHtml = $(this).parent().html();
          $(a_dn.get(i+1)).parent().html(curHtml);
          $(this).parent().html(botHtml);
          init();
        //};        
      };
    }
  )
}

$(document).ready(
  function() {
    init();
  }
);
</script>
</head>
<body>

<div id="listDiv">
<div class="itemDiv">Слой 1 <a href="javascript:void(0)" class="up">up</a> <a href="javascript:void(0)" class="dn">dn</a></div>
<div class="itemDiv">Слой 2 <a href="javascript:void(0)" class="up">up</a> <a href="javascript:void(0)" class="dn">dn</a></div>
<div class="itemDiv">Слой 3 <a href="javascript:void(0)" class="up">up</a> <a href="javascript:void(0)" class="dn">dn</a></div>
<div class="itemDiv">Слой 5 <a href="javascript:void(0)" class="up">up</a> <a href="javascript:void(0)" class="dn">dn</a></div>
<div class="itemDiv">Слой 6 <a href="javascript:void(0)" class="up">up</a> <a href="javascript:void(0)" class="dn">dn</a></div>
<div class="itemDiv">Слой 7 <a href="javascript:void(0)" class="up">up</a> <a href="javascript:void(0)" class="dn">dn</a></div>
<div class="itemDiv">Слой 8 <a href="javascript:void(0)" class="up">up</a> <a href="javascript:void(0)" class="dn">dn</a></div>
<div class="itemDiv">Слой 9 <a href="javascript:void(0)" class="up">up</a> <a href="javascript:void(0)" class="dn">dn</a></div>
<div class="itemDiv">Слой 10 <a href="javascript:void(0)" class="up">up</a> <a href="javascript:void(0)" class="dn">dn</a></div>
</div>

</body>
</html>

четверг, 24 июля 2008 г.

Полупрозрачный фон (кроссбраузерный)

Пример работает с использованием библиотеки JQuery


* html #back_plash {
    opacity:expression($('#back_plash').css('opacity',.5));
    height:expression($('#plash').height());
    display:block;  
}
#plash {
    background-image:url('/images/opacityw.png');
}

* html #plash {
    background-image:none;
    margin-top:expression(-$('#plash').height());
}
#back_plash {
    background:#fff;
    display:none;
}


<div id="back_plash"></div>
<div id="plash">content</div>

Web-программы своими руками

вторник, 2 сентября 2008 г.

галлерея

среда, 13 августа 2008 г.

Перемещение фона внутри слоя

среда, 6 августа 2008 г.

Меняем элементы местами Javascript

четверг, 24 июля 2008 г.

Полупрозрачный фон (кроссбраузерный)

Обо мне

вторник, 2 сентября 2008 г.

галлерея

среда, 13 августа 2008 г.

Перемещение фона внутри слоя

среда, 6 августа 2008 г.

Меняем элементы местами Javascript

четверг, 24 июля 2008 г.

Полупрозрачный фон (кроссбраузерный)

Обо мне

вторник, 2 сентября 2008 г.

среда, 13 августа 2008 г.

среда, 6 августа 2008 г.

четверг, 24 июля 2008 г.