Фотогалерея для чата на jquery

prot

Админ

Сообщений: 18

22.02.2011 10:11:53

Фотогалерея для чата на jquery

Фото галерея для чата на jquery на 24 фотографии, соответственно, новые добавляем, удаляя старые.

Подсказки в коде в комментариях. Код кидаем в админка - - -> страницы

<html>
<head>
<title>Фотогалерея</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<link rel="stylesheet" href="http://vscripte.ru/august4u/css/style.css" type="text/css" media="screen"/>
<script src="http://vscripte.ru/august4u/js/cufon-yui.js" type="text/javascript"></script>
<script src="http://vscripte.ru/august4u/js/ChunkFive_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1',{ textShadow: '1px 1px #fff'});
Cufon.replace('.description',{ textShadow: '1px 1px #fff'});
Cufon.replace('a',{ textShadow: '1px 1px #fff', hover : true});
</script>
<style type="text/css">
/* в бэкграунд вставляем ссылку на свое изображение если надо */
body{
background:#f0f0f0 url(http://savepic.net/463064.jpg) repeat top left;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color: #555;
}

.description{
position:fixed;
right:10px;
top:10px;
font-size:12px;
color:#888;
}
span.reference{
position:fixed;
left:10px;
bottom:10px;
font-size:12px;
}
span.reference a{
color:#888;
text-transform:uppercase;
text-decoration:none;
padding-right:20px;
}
span.reference a:hover{
color:#444;
}
</style>
</head>

<body>
<h2>Галерея чата "название вашего чата"</h2>
<div class="description"></div>
<div id="im_wrapper" class="im_wrapper">

<div style="background-position:0px 0px;"><img src="http://savepic.net/475334.jpg" alt="" /></div>
<div style="background-position:-125px 0px;"><img src="http://savepic.net/479430.jpg" alt="" /></div>
<div style="background-position:-250px 0px;"><img src="http://savepic.net/470214.jpg" alt="" /></div>
<div style="background-position:-375px 0px;"><img src="http://savepic.net/472262.jpg" alt="" /></div>
<div style="background-position:-500px 0px;"><img src="http://savepic.net/462022.jpg" alt="" /></div>
<div style="background-position:-625px 0px;"><img src="http://savepic.net/466118.jpg" alt="" /></div>

<div style="background-position:0px -125px;"><img src="http://savepic.net/522457.jpg" alt="" /></div>
<div style="background-position:-125px -125px;"><img src="http://savepic.net/508121.jpg" alt="" /></div>
<div style="background-position:-250px -125px;"><img src="http://savepic.net/515289.jpg" alt="" /></div>
<div style="background-position:-375px -125px;"><img src="http://savepic.net/503001.jpg" alt="" /></div>
<div style="background-position:-500px -125px;"><img src="http://savepic.net/505049.jpg" alt="" /></div>
<div style="background-position:-625px -125px;"><img src="http://savepic.net/497881.jpg" alt="" /></div>

<div style="background-position:0px -250px;"><img src="http://savepic.net/486617.jpg" alt="" /></div>
<div style="background-position:-125px -250px;"><img src="http://savepic.net/486617.jpg" alt="" /></div>
<div style="background-position:-250px -250px;"><img src="http://savepic.net/477401.jpg" alt="" /></div>
<div style="background-position:-375px -250px;"><img src="http://savepic.net/521432.jpg" alt="" /></div>
<div style="background-position:-500px -250px;"><img src="http://savepic.net/511192.jpg" alt="" /></div>
<div style="background-position:-625px -250px;"><img src="http://savepic.net/509144.jpg" alt="" /></div>

<div style="background-position:0px -375px;"><img src="http://savepic.net/514264.jpg" alt="" /></div>
<div style="background-position:-125px -375px;"><img src="http://savepic.net/512216.jpg" alt="" /></div>
<div style="background-position:-250px -375px;"><img src="http://savepic.net/501976.jpg" alt="" /></div>
<div style="background-position:-375px -375px;"><img src="http://savepic.net/499928.jpg" alt="" /></div>
<div style="background-position:-500px -375px;"><img src="http://savepic.net/500952.jpg" alt="" /></div>
<div style="background-position:-625px -375px;"><img src="http://savepic.net/506072.jpg" alt="" /></div>
</div>
<div id="im_loading" class="im_loading"></div>
<div id="im_next" class="im_next"></div>
<div id="im_prev" class="im_prev"></div>
<div>
</div>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src="http://vscripte.ru/august4u/js/jquery.transform-0.9.1.min.js"></script>
<script type="text/javascript">

(function($,sr){
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}

jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); };
})(jQuery,'smartresize');
</script>
<script type="text/javascript">
$(function() {
var ie = false;
if ($.browser.msie)
ie = true;
var flg_click = true;
var $im_wrapper = $('#im_wrapper');
var $thumbs = $im_wrapper.children('div');
var $thumb_imgs = $thumbs.find('img');
var nmb_thumbs = $thumbs.length;
var $im_loading = $('#im_loading');
var $im_next = $('#im_next');
var $im_prev = $('#im_prev');
var per_line = 6;
var per_col = Math.ceil(nmb_thumbs/per_line)
var current = -1;
var mode = 'grid';
var positionsArray = [];
for(var i = 0; i < nmb_thumbs; ++i)
positionsArray[i]=i;

$im_loading.show();
var loaded = 0;
$thumb_imgs.each(function(){
var $this = $(this);
$('<img/>').load(function(){
++loaded;
if(loaded == nmb_thumbs*2)
start();
}).attr('src',$this.attr('src'));
$('<img/>').load(function(){
++loaded;
if(loaded == nmb_thumbs*2)
start();
}).attr('src',$this.attr('src').replace('/thumbs',''));
});

function start(){
$im_loading.hide();
disperse();
}

function disperse(){
if(!flg_click) return;
setflag();
mode = 'grid';
var spaces_w = $(window).width()/(per_line + 1);
var spaces_h = $(window).height()/(per_col + 1);
$thumbs.each(function(i){
var $thumb = $(this);
var left = spaces_w*((i%per_line)+1) - $thumb.width()/2;
var top = spaces_h*(Math.ceil((i+1)/per_line)) - $thumb.height()/2;
var r = Math.floor(Math.random()*41)-20;

if(ie)
var param = {
'left' : left + 'px',
'top' : top + 'px'
};
else
var param = {
'left' : left + 'px',
'top' : top + 'px',
'rotate' : r + 'deg'
};
$thumb.stop()
.animate(param,700,function(){
if(i==nmb_thumbs-1)
setflag();
})
.find('img')
.fadeIn(700,function(){
$thumb.css({
'background-image' : 'none'
});
$(this).animate({
'width' : '115px',
'height' : '115px',
'marginTop' : '5px',
'marginLeft': '5px'
},150);
});
});
}

function setflag(){
flg_click = !flg_click
}

$thumbs.bind('click',function(){
if(!flg_click) return;
setflag();

var $this = $(this);
current = $this.index();

if(mode == 'grid'){
mode = 'single';
var image_src = $this.find('img').attr('src').replace('/thumbs','');

$thumbs.each(function(i){
var $thumb = $(this);
var $image = $thumb.find('img');

$image.stop().animate({
'width' : '100%',
'height' : '100%',
'marginTop' : '0px',
'marginLeft': '0px'
},150,function(){

var f_w = per_line * 125;
var f_h = per_col * 125;
var f_l = $(window).width()/2 - f_w/2
var f_t = $(window).height()/2 - f_h/2

if(ie)
var param = {
'left' : f_l + (i%per_line)*125 + 'px',
'top' : f_t + Math.floor(i/per_line)*125 + 'px'
};
else
var param = {
'rotate': '0deg',
'left' : f_l + (i%per_line)*125 + 'px',
'top' : f_t + Math.floor(i/per_line)*125 + 'px'
};
$thumb.css({
'background-image' : 'url('+image_src+')'
}).stop()
.animate(param,1200,function(){

if(i==nmb_thumbs-1){
addNavigation();
setflag();
}
});

$image.fadeOut(700);
});
});
}
else{
setflag();

removeNavigation();

disperse();
}
});

function removeNavigation(){
$im_next.stop().animate({'right':'-50px'},300);
$im_prev.stop().animate({'left':'-50px'},300);
}

function addNavigation(){
$im_next.stop().animate({'right':'0px'},300);
$im_prev.stop().animate({'left':'0px'},300);
}

$im_next.bind('click',function(){
if(!flg_click) return;
setflag();

++current;
var $next_thumb = $im_wrapper.children('div:nth-child('+(current+1)+')');
if($next_thumb.length>0){
var image_src = $next_thumb.find('img').attr('src').replace('/thumbs','');
var arr = Array.shuffle(positionsArray.slice(0));
$thumbs.each(function(i){

var t = $(this);
setTimeout(function(){
t.css({
'background-image' : 'url('+image_src+')'
});
if(i == nmb_thumbs-1)
setflag();
},arr.shift()*20);
});
}
else{
setflag();
--current;
return;
}
});

$im_prev.bind('click',function(){
if(!flg_click) return;
setflag();
--current;
var $prev_thumb = $im_wrapper.children('div:nth-child('+(current+1)+')');
if($prev_thumb.length>0){
var image_src = $prev_thumb.find('img').attr('src').replace('/thumbs','');
var arr = Array.shuffle(positionsArray.slice(0));
$thumbs.each(function(i){
var t = $(this);
setTimeout(function(){
t.css({
'background-image' : 'url('+image_src+')'
});
if(i == nmb_thumbs-1)
setflag();
},arr.shift()*20);
});
}
else{
setflag();
++current;
return;
}
});

$(window).smartresize(function(){
removeNavigation()
disperse();
});

Array.shuffle = function( 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 array;
};
});
</script>
</body>
</html>

Тут смотрим демку

#5479

prot

Админ

Сообщений: 18

22.02.2011 10:13:41

Re: Фотогалерея для чата на jquery

В этом учатке кода заменяем ссылки на свои. Пример: Выкидываем фото на http://savepic.ru и заменяем ссылки.

#5480

Jaguar

Админ

Сообщений: 1505

14.08.2011 00:14:33

Re: Фотогалерея для чата на jquery

Не получается ничего. Фотки искажаются почему то.

#10888

Пижон

Дизайнер

Сообщений: 899

14.08.2011 12:12:59

Re: Фотогалерея для чата на jquery

Jaguar
Сначала в фотошопе, или любом другом редакторе изображений, подгони все фотографии под один размер.

#10897

LEKUS

Сообщений: 5

28.09.2011 04:39:49

Re: Фотогалерея для чата на jquery

а кто автор даной галереи????

#12665

Князь Волк

Сообщений: 338

28.09.2011 05:18:21

Re: Фотогалерея для чата на jquery

Неоднократно видел её в интернете в свободном доступе. Автора не помню. Кроме этого в интернете очень много гораздо лучших, на мой взгляд, галерей. Если кому-то нужно - могу выложить здесь.
Кстати на будущее, товарищи админы:
если выкладываете какую-либо работу, пожалуйста указывайте автора. Ежели пишите сами - то естественно своё имя.

#12666

LEKUS

Сообщений: 5

28.09.2011 05:36:44

Re: Фотогалерея для чата на jquery

Князь Волк: Неоднократно видел её в интернете в свободном доступе. Автора не помню. Кроме этого в интернете очень много гораздо лучших, на мой взгляд, галерей. Если кому-то нужно - могу выложить здесь.
Кстати на будущее, товарищи админы:
если выкладываете какую-либо работу, пожалуйста указывайте автора. Ежели пишите сами - то естественно своё имя.

во-во, автора вылаживать нада....

#12667

Князь Волк

Сообщений: 338

01.10.2011 07:35:28

Re: Фотогалерея для чата на jquery

По просьбе Анри.
Фотогалерея с использованием jQuery и CSS3.
Демо-версия

Админка-страницы-любая пустая страница
Вставляем следующий код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Фотогалерея</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<meta name="description" content="Фотогалерея чата" />
<meta name="keywords" content="Фотогалерея, чат"/>
<link rel="icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="http://addons4u.ru/jQueryGallery/Variant1/
css/style.css" type="text/css" media="screen"/>
<style>
span.reference{
position:fixed;
left:10px;
bottom:10px;
font-size:11px;
}
span.reference a{
color:#555;
text-decoration:none;
text-shadow:1px 1px 1px #fff;
}
span.reference a:hover{
color:#000;
}
h1.title{
text-indent:-9000px;
position:absolute;
top:0px;
left:0px;
width:563px;
height:88px;
background:transparent url(http://addons4u.ru/jQueryGallery/Variant1/images/title.png) no-repeat top left;
}
</style>
</head>
<body>
<div>
<h1 class="title">Копирайты</h1>
<span class="reference">
<a href="http://tympanus.net/codrops/2010/07/01/interactive-photo-desk">© Codrops</a><br>
<a href="http://igust4u.ru">Айгуст</a><br>
<a href="http://addons4u.ru">Русификация: Князь Волк</a>
</span>
</div>

<div>
<a id="pd_loading" href="#" class="pd_loading"></a>
</div>

<div id="pd_options_bar" class="pd_options_bar">
<a href="#" class="shuffle">Перемешать</a>
<a href="#" class="backdesk" style="display:none;">Все фото</a>
<a href="#" class="viewall">В кучу</a>
</div>
<div id="pd_container" class="pd_container">

<div class="pd_photo">
<div class="pd_hold">
<img src="photos/1.jpg" alt=""/>
</div>
<span class="delete"></span>
</div>

<div class="pd_photo">
<div class="pd_hold">
<img src="photos/2.jpg" alt=""/>
</div>
<span class="delete"></span>
</div>

<div class="pd_photo">
<div class="pd_hold">
<img src="photos/3.jpg" alt=""/>
</div>
<span class="delete"></span>
</div>

<div class="pd_photo">
<div class="pd_hold">
<img src="photos/4.jpg" alt=""/>
</div>
<span class="delete"></span>
</div>

<div class="pd_photo">
<div class="pd_hold">
<img src="photos/5.jpg" alt=""/>
</div>
<span class="delete"></span>
</div>

</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script src="http://addons4u.ru/jQueryGallery/Variant1/jquery.transform-0.6.2.min.js"></script>
<script src="http://addons4u.ru/jQueryGallery/Variant1/jquery.animate-shadow-min.js"></script>
<script type="text/javascript">
$(function() {
/**
* idx:
* index of photo that is currently hold
* idxLarge:
* index of photo that is currently on full mode
* mouseup:
* flag to use on the mouseup and mousedown events,
* to help preventing the browser default selection of elements
*/
var idx,idxLarge = -1;
var mouseup = false;

/**
* for now we hardcode the values of our thumb containers
*/
var photoW = 184;
var photoH = 205;

/**
* the photos and options container
*/
var $container = $('#pd_container');

var $options = $('#pd_options_bar');

var photosSize = $container.find('.pd_photo').length;

/**
* navigation current step
*/
var navPage = 0;
/**
* spreads the photos on the table..
*/

var ie = false;
if ($.browser.msie) {
ie = true;
}

start();

function start(){
$('#pd_loading').show();

var tableW = $container.width();
var tableH = $container.height();

var horizontalMax = tableW - photoW;
var verticalMax = tableH - photoH;

$('<img />').attr('src','http://addons4u.ru/jQueryGallery/Variant1/images/paperball.png');
/**
* display all the photos on the desk, with a random rotation,
* and also make them draggable.
* on mouse down, we want the photo to enlarge in a few pixels,
* and to rotate 0 degrees
*/
var cntPhotos = 0;
$container.find('.pd_photo').each(function(i){
var $photo = $(this);
$('<img />').load(function(){
++cntPhotos;
var $image = $(this);

var r = Math.floor(Math.random()*201)-100;//*41
var maxzidx = parseInt(findHighestZIndex()) + 1;
var param = {
'top' : Math.floor(Math.random()*verticalMax) +'px',
'left' : Math.floor(Math.random()*horizontalMax) +'px',
'z-index' : maxzidx
};

$photo.css(param);
if(!ie)
$photo.transform({'rotate' : r + 'deg'});
$photo.show();
if(cntPhotos == photosSize){
bindEvents();
$('#pd_loading').hide();
}
}).attr('src',$photo.find('img').attr('src'));
});
}

/**
* grab a photo
*/
function mouseDown($photo){
mouseup = true;
idx = $photo.index() + 1;
var maxzidx = parseInt(findHighestZIndex()) + 1;
$photo.css('z-index',maxzidx);
if(ie)
var param = {
'width' : '+=40px',
'height' : '+=40px'
};
else
var param = {
'width' : '+=40px',
'height' : '+=40px',
'rotate' : '0deg',
'shadow' : '5px 5px 15px #222'
};
$photo.stop(true,true).animate(param,100).find('img').stop(true,true).animate({
'width' : '+=40px',
'height' : '+=40px'
},100);
}

/**
* we do the mouseup on the document to prevent the
* case when we release the mouse outside of a photo.
* also, we want the photo to get smaller again,
* rotate some random degrees, and also move it some pixels
*/
$(document).bind('mouseup',function(e){
if(mouseup){
mouseup = false;
var $photo = $container.find('.pd_photo:nth-child('+idx+')');
var r = Math.floor(Math.random()*101)-50;
var $photoT = parseFloat($photo.css('top'),10);
var $photoL = parseFloat($photo.css('left'),10);
var newTop = $photoT + r;
var newLeft = $photoL + r;
if(ie)
var param = {
'width' : '-=40px',
'height' : '-=40px',
'top' : newTop + 'px',
'left' : newLeft + 'px'
};
else
var param = {
'width' : '-=40px',
'height' : '-=40px',
'top' : newTop + 'px',
'left' : newLeft + 'px',
'rotate' : r+'deg',
'shadow' : '0 0 5px #000'
};
$photo.stop(true,true).animate(param,200).find('img').stop(true,true).animate({
'width' : '-=40px',
'height': '-=40px'
},200);
}
e.preventDefault();
});

/**
* removes the photo element from the DOM,
* after showing the paper image..
*/
$container.find('.delete').bind('click',function(){
var $photo = $(this).parent();
var $photoT = parseFloat($photo.css('top'),10);
var $photoL = parseFloat($photo.css('left'),10);
var $photoZIndex = $photo.css('z-index');
var $trash = $('<div />',{
'className' : 'pd_paperball',
'style' : 'top:' + parseInt($photoT + photoH/2) + 'px;left:' + parseInt($photoL + photoW/2) +'px;width:0px;height:0px;z-index:' + $photoZIndex
}).appendTo($container);

$trash.animate({
'width' : photoW + 'px',
'height': photoH + 'px',
'top' : $photoT + 'px',
'left' : $photoL + 'px'
},100,function(){
var $this = $(this);
setTimeout(function(){
$this.remove();
},800);
});
$photo.animate({
'width' : '0px',
'height': '0px',
'top' : $photoT + photoH/2 + 'px',
'left' : $photoL + photoW/2 +'px'
},200,function(){
--photosSize;
$(this).remove();
});
});

function stack(){
navPage = 0;
var cnt_photos = 0;
var windowsW = $(window).width();
var windowsH = $(window).height();
$container.find('.pd_photo').each(function(i){
var $photo = $(this);
$photo.css('z-index',parseInt(findHighestZIndex()) + 1000 + i)
.stop(true)
.animate({
'top' : parseInt((windowsH-100)/2 - photoH/2) + 'px',
'left' : parseInt((windowsW-100)/2 - photoW/2) + 'px'
},800,function(){
$options.find('.backdesk').show();
var $photo = $(this);
++cnt_photos;
var $nav = $('<a class="pd_next_photo" style="display:none;"></a>');
$nav.bind('click',function(){
navigate();
$(this).remove();
});
$photo.prepend($nav);
$photo.draggable('destroy')
.find('.delete')
.hide()
.andSelf()
.find('.pd_hold')
.unbind('mousedown')
.bind('mousedown',function(){return false;});

$photo.unbind('mouseenter')
.bind('mouseenter',function(){
$nav.show();
})
.unbind('mouseleave')
.bind('mouseleave',function(){
$nav.hide();
});
$options.find('.shuffle,.viewall').unbind('click');
if(cnt_photos == photosSize)
enlarge(findElementHighestZIndex());
});
});
}

function enlarge($photo){
var windowsW = $(window).width();
var windowsH = $(window).height();
if(ie)
var param = {
'width' : '+=200px',
'height': '+=200px',
'top' : parseInt((windowsH-100)/2 - (photoH+200)/2) + 'px',
'left' : parseInt((windowsW-100)/2 - (photoW+200)/2) + 'px'
};
else
var param = {
'width' : '+=200px',
'height': '+=200px',
'top' : parseInt((windowsH-100)/2 - (photoH+200)/2) + 'px',
'left' : parseInt((windowsW-100)/2 - (photoW+200)/2) + 'px',
'rotate': '0deg',
'shadow': '5px 5px 15px #222'
};
$photo.animate(param,500,function(){
idxLarge = $(this).index();
}).find('img').animate({
'width' : '+=200px',
'height': '+=200px'
},500);
}

/**
* back to desk
*/
function disperse(){
var windowsW = $(window).width();
var windowsH = $(window).height();

$container.find('.pd_photo').each(function(i){
var $photo = $(this);
//if it is the current large photo:
if($photo.index() == idxLarge){
if(ie)
var param = {
'top' : parseInt((windowsH-100)/2 - photoH/2) + 'px',
'left' : parseInt((windowsW-100)/2 - photoW/2) + 'px',
'width' : '170px',
'height' : '170px'
};
else
var param = {
'top' : parseInt((windowsH-100)/2 - photoH/2) + 'px',
'left' : parseInt((windowsW-100)/2 - photoW/2) + 'px',
'width' : '170px',
'height' : '170px',
'shadow' : '1px 1px 5px #555'
};
$photo.stop(true).animate(param,500, function(){
shuffle();
$options.find('.viewall').show();
}).find('img').animate({
'width' : '170px',
'height' : '170px'
},500);
}
});
$container.find('.pd_next_photo').remove();
bindEvents();
}

function bindEvents(){
$options.find('.shuffle').unbind('click').bind('click',function(e){
if(photosSize == 0) return;
shuffle();
e.preventDefault();
}).andSelf().find('.viewall').unbind('click').bind('click',function(e){
var $this = $(this);
if(photosSize == 0) return;
stack();
$this.hide();
e.preventDefault();
}).andSelf().find('.backdesk').unbind('click').bind('click',function(e){
var $this = $(this);
if(photosSize == 0) return;
disperse();
$this.hide();
e.preventDefault();
});

$container.find('.pd_photo').each(function(i){
var $photo = $(this);
$photo.draggable({
containment : '#pd_container'
}).find('.delete')
.show()
}).find('.pd_hold').unbind('mousedown').bind('mousedown',function(e){
var $photo = $(this).parent();
mouseDown($photo);
e.preventDefault();
});
}

function navigate(){
if(photosSize == 0) return;

var tableW = $container.width();
var tableH = $container.height();

var horizontalMax = tableW - photoW;
var verticalMax = tableH - photoH;

var $photo = $container.find('.pd_photo:nth-child('+parseInt(idxLarge+1)+')');
var r = Math.floor(Math.random()*201)-100;//*41
if(ie)
var param = {
'top' : Math.floor(Math.random()*verticalMax) +'px',
'left' : Math.floor(Math.random()*horizontalMax) +'px',
'width' : '170px',
'height' : '170px'
};
else
var param = {
'top' : Math.floor(Math.random()*verticalMax) +'px',
'left' : Math.floor(Math.random()*horizontalMax) +'px',
'width' : '170px',
'height' : '170px',
'rotate' : r+'deg',
'shadow' : '1px 1px 5px #555'
};
$photo.stop(true).animate(param,500,function(){
++navPage;
var $photo = $(this);

$container.append($photo.css('z-index',1));
if(navPage < photosSize)
enlarge(findElementHighestZIndex());
else{ //last one
$options.find('.backdesk').hide();
$options.find('.viewall').show();
bindEvents();
}
}).find('img').animate({
'width' : '170px',
'height' : '170px'
},500);
}

function shuffle(){
var tableW = $container.width();
var tableH = $container.height();

var horizontalMax = tableW - photoW;
var verticalMax = tableH - photoH;
$container.find('.pd_photo').each(function(i){
var $photo = $(this);
var r = Math.floor(Math.random()*301)-100;//*41
if(ie)
var param = {
'top' : Math.floor(Math.random()*verticalMax) +'px',
'left' : Math.floor(Math.random()*horizontalMax) +'px'
};
else
var param = {
'top' : Math.floor(Math.random()*verticalMax) +'px',
'left' : Math.floor(Math.random()*horizontalMax) +'px',
'rotate' : r+'deg'
};
$photo.animate(param,800);
});
}

function findHighestZIndex(){
var photos = $container.find('.pd_photo');
var highest = 0;
photos.each(function(){
var $photo = $(this);
var zindex = $photo.css('z-index');
if (parseInt(zindex) > highest) {
highest = zindex;
}
});
return highest;
}

function findElementHighestZIndex(){
var photos = $container.find('.pd_photo');
var highest = 0;
var $elem;
photos.each(function(){
var $photo = $(this);
var zindex = $photo.css('z-index');
if (parseInt(zindex) > highest) {
highest = zindex;
$elem = $photo;
}
});
return $elem;
}

// Array Remove - By John Resig (MIT Licensed)
Array.prototype.remove = function(from, to) {
var rest = this.slice((to || from) + 1 || this.length);
this.length = from < 0 ? this.length + from : from;
return this.push.apply(this, rest);
};
});
</script>
</body>
</html>

Ищем:

Вместо Фотогалерея чата можете написать свои ключевые фразы, которые будут индексироваться поисковиками (например "чат всия Руси, фотогалерея с последнего похода на турков").

Вместо Фотогалерея, чат можете написать свои ключевые слова, которые будут индексироваться поисковиками (например "чат, Русь, поход").

Вместо ../favicon.ico можем поставить свою ссылку на иконку, которая будет отображаться в браузере. Если нет иконки - ничего не меняйте или удалите эту строчку полностью.

С предисловиями покончили.
Теперь самое главное. Либо создаём на бесплатном хостинге сайт (например http://ucoz.ru), создаём там папку photos (название папки разумеется можете выбрать любое), заливаем в неё все фотки, либо заливаем все фотки на бесплатные хостинги изображений.
Далее ищем:

Смотрим:
photos/1.jpg
Это ссылка на фотографию. Все ссылки меняем на свои.
alt=""
Тут между кавычек можем написать комментарий к фотографии. (Например alt="Как я Батыя голыми руками брал")
Один такой блок отвечает за одну фотографию. Если посмотреть дальше, то после него идут ещё 4 таких блока, различие между ними только в ссылке (photos/1.jpg, photos/2.jpg, photos/3.jpg и тд.). Таких блоков вы можете создать неограниченное количество. Единственное, смотрите сами, чтобы фотки в итоге не лежали, как в мусорном ведре. Указывайте только полные ссылки! (например: http://img.ru/17543/photo1.jpg). Пример добавления трёх фотографий:

Автор галереи - © Codrops
Русификация: Князь Волк

Все копирайты в русифицированной версии сохранены. Удалять или скрывать их запрещено.

#12789

Анри

Сообщений: 19

01.10.2011 13:26:38

Re: Фотогалерея для чата на jquery

Спасибо огромное!
Вопрос такой - имеет ли значение размер фото и формат фото,т.е как это есть в фотогалерее выложенной вначале (размер фото 750 на 500 jpeg) ?

#12803

Анри

Сообщений: 19

01.10.2011 13:46:32

Re: Фотогалерея для чата на jquery

И ещё. а Можно ли поменять фон картинки на свой?

#12806

Князь Волк

Сообщений: 338

01.10.2011 20:12:30

Re: Фотогалерея для чата на jquery

Размер и формат фотографий в этой галерее значения не имеет. Можете поставить как больше по размеру, так и меньше. Галерея сама подгонит фотографию под нужный размер. Поддерживаются самые популярные форматы: jpg, gif и png. В демо-версии можно посмотреть фотографии разных размеров и трёх форматов.

Чтобы поставить свою фоновую картинку, ищем:

<style>

сразу после это строчки добавляем:

body {
background-image: url();
}

url() - между скобочками указываем ссылку на картинку.

Должно получится:

И тд.

#12833

Другие темы раздела