Просмотр фотографий без перехода на новую страницу (Romych)
От Автора:
к написанию данного скрипта сподвиг пользователь под ником Mango, видел что у Деффа есть слайд-шоу в постах основанное на плагине iLoad,
я тоже воспользовался им, но суть моего скрипта не в том чтобы создавать слайд-шоу в постах, а в том чтобы убрать лишние телодвижения при просмотре фото, которые размещены в сообщение в виде превью, скрипт позволяет открывать фото-превью в этом же окне, не отходя от кассы и разворачивать фото на полную (оригинальную) ширину,
кроме нашего родного uploads.ru,скрипт работает с превью от таких фото-хостингов как радикал и ifotki.info,
если в одном посте целая группа фотографий, то скрипт позволяет их просмотреть в режиме слайд-шоу перелистывая одно за другим
для работы с скриптом на понадобится сам плагин iLoad можно скачать здесь, и закачать его в Администрирование -> Файлы
лично для себя я этот файл немного поднастроил на более быстрое срабатывание
в html-верх грузим наш плагин iLoad
в html-низ скрипт:
Просмотр фотографий без перехода на новую страницу v.2.5
Фото всплывают, исчезают быстрее, режим слайд-шоу длится чуть медленнее, чтоб успеть рассмотреть фото.
добавлена возможность в скрипт работа с превью от разных популярных фотохостингов,
на данный момент список получился таким:
uploads.ru, ifotki.info, savepic.net, savepic.ru, radikale.ru, radikal.ru, fastpic.ru, firepic.org, imgbox.com
в html-верх:
<!---Просмотр фотографий без перехода на новую страницу--->
<script type='text/javascript' src='http://petushki-city.ru/files/0002/10/47/24479.js'></script>
в html-низ:
<!---Просмотр фотографий без перехода на новую страницу v.2.5--->
<script type="text/javascript">
var a = 1; // режим демонстрации слайд-шоу, 0 - на всей странице, 1 - в отдельно взятом посте
var host = ['uploads.ru','fotki.info','savepic.net','savepic.ru','radikale.ru','radikal.ru','fastpic.ru','firepic.org','imgbox.com'];
$('.post-content').map(function(){
var Col, Cont, PR, HR, Tit, hvost;
Col = $(this).find('img.postimg').length;
if(a!==0){Cont=$(this).attr('id');}else{Cont='all';}
$(this).find('a:has(img)').each(function(){
PR = $(this).find('img.postimg').attr('src'); HR = $(this).attr('href');
Tit = $(this).find('img.postimg').attr('title');$(this).attr('title',Tit);
if (HR.lastIndexOf('.html')!= -1){hvost=HR.slice(-8,-5);}
for (var i=0; i<host.length; i++){
if((PR.indexOf(host[i])!= -1)){
PR=PR.replace(/(.*?)\.uploads\.ru\/t\/(.*?)/gi, '$1.uploads.ru/i/$2');
PR=PR.replace(/(.*?)\.ifotki\.info\/thumb\/(.*?)/gi, '$1.ifotki.info/org/$2');
PR=PR.replace(/http:\/\/savepic\.(net|ru)\/(\d+)m\.(png|jpg|gif|jpeg)/gi, 'http://savepic.$1/$2.$3');
PR=PR.replace(/(.*?)\.fastpic\.ru\/thumb\/(.*?)\.(png|jpg|gif|jpeg)/gi, '$1.fastpic.ru/big/$2.'+hvost);
PR=PR.replace(/(.*?)\.radikale\.ru\/uploads\/(.*?)\-prev\.(png|jpg|gif|jpeg)/gi, '$1.radikale.ru/uploads/$2-full.$3');
PR=PR.replace(/(.*?)\.radikal\.ru\/(.*?)t\.(png|jpg|gif|jpeg)/gi, '$1.radikal.ru/$2.$3');
PR=PR.replace(/(.*?)\.firepic\.org\/(\d+)\/thumbs\/(.*?)\.(png|jpg|gif|jpeg)/gi, '$1.firepic.org/$2/images/$3.$4');
PR=PR.replace(/http:\/\/(.*?)\.imgbox\.com\/(.*?)\.(png|jpg|gif|jpeg)/gi, 'http://i.imgbox.com/$2.$3');
}
if((HR.indexOf(host[i])!= -1)){$(this).attr('href',PR);}}
if(Col<2){$(this).attr('rel','iLoad');}else{$(this).attr('rel','iLoad|'+Cont);}
});});
</script>
в скрипте в самом верху есть настройка режима показа слайд-шоу
var a = 1; // режим демонстрации слайд-шоу, 0 - на всей странице, 1 - в отдельно взятом посте
Помня старую критику по поводу навигации, сообщаю что пользоваться удобнее всего комбинациями на клавиатуре, чем тыкать мышкой
итак:
1. стрелки <- -> на клавиатуре дают возможность листать фото
если у вас мобильный браузер просто нажимайте на само фото и у вас отобразится следующее
2. Shift - запускает слайд-шоу
3. Ctrl - останавливает слайд-шоу
4. Esc останавливает просмотр фото, тоже самое делает нажатие курсором на тёмный фон вне фотографии
единственное что приходится нажимать кусором на панели управления под фото, это разворачивание фото до оригинального размера (крайняя правая кнопка)
http://s7.uploads.ru/PnTNg.jpg
p.s. если вы желаете, чтоб при просмотре фото (слайд-шоу) под изображением отображалось ваше к нему описание, его придётся добавить в ручную к каждому изображению таким образом:
[url=http://savepic.net/7788146.htm][img=ВАШЕ ОПИСАНИЕ К ФОТО]http://savepic.net/7788146m.jpg[/img][/url]
т.е. после тега img пишем знак = и своё описание img=ВАШЕ ОПИСАНИЕ К ФОТО
к написанию данного скрипта сподвиг пользователь под ником Mango, видел что у Деффа есть слайд-шоу в постах основанное на плагине iLoad,
я тоже воспользовался им, но суть моего скрипта не в том чтобы создавать слайд-шоу в постах, а в том чтобы убрать лишние телодвижения при просмотре фото, которые размещены в сообщение в виде превью, скрипт позволяет открывать фото-превью в этом же окне, не отходя от кассы и разворачивать фото на полную (оригинальную) ширину,
кроме нашего родного uploads.ru,скрипт работает с превью от таких фото-хостингов как радикал и ifotki.info,
если в одном посте целая группа фотографий, то скрипт позволяет их просмотреть в режиме слайд-шоу перелистывая одно за другим
для работы с скриптом на понадобится сам плагин iLoad можно скачать здесь, и закачать его в Администрирование -> Файлы
лично для себя я этот файл немного поднастроил на более быстрое срабатывание
Просмотр фотографий без перехода на новую страницу
в html-верх грузим наш плагин iLoad
Цитата
<script type='text/javascript' src='http://petushki-city.ru/files/0002/10/47/24479.js'></script>
в html-низ скрипт:
Код
<script type="text/javascript">
$('.post-content').click(function(){
var Col = $(this).find('img.postimg').length;
var Cont=$(this).attr('id');
$(this).find('p:has(a) a').each(function(){
var PR = $(this).find('img.postimg').attr('src');
var HR = $(this).attr('href');
if(PR.indexOf("/t/")!= -1) {prev=/(.*?)uploads\.ru\/t\/(.*?)/gim;PR=PR.replace(prev, "$1uploads.ru/i/$2");}
if(PR.indexOf("ifotki.info")!= -1) {prev=/(.*?)ifotki\.info\/thumb\/(.*?)/gim;PR=PR.replace(prev, "$1ifotki.info/org/$2");}
if((HR.indexOf("uploads.ru")!= -1) || (HR.indexOf("ifotki.info")!= -1)){$(this).attr('href',PR);}
if (Col==1) {$(this).attr('rel','iLoad')};
if (Col>=2) {$(this).attr('rel','iLoad|'+Cont)};
});});
</script>
$('.post-content').click(function(){
var Col = $(this).find('img.postimg').length;
var Cont=$(this).attr('id');
$(this).find('p:has(a) a').each(function(){
var PR = $(this).find('img.postimg').attr('src');
var HR = $(this).attr('href');
if(PR.indexOf("/t/")!= -1) {prev=/(.*?)uploads\.ru\/t\/(.*?)/gim;PR=PR.replace(prev, "$1uploads.ru/i/$2");}
if(PR.indexOf("ifotki.info")!= -1) {prev=/(.*?)ifotki\.info\/thumb\/(.*?)/gim;PR=PR.replace(prev, "$1ifotki.info/org/$2");}
if((HR.indexOf("uploads.ru")!= -1) || (HR.indexOf("ifotki.info")!= -1)){$(this).attr('href',PR);}
if (Col==1) {$(this).attr('rel','iLoad')};
if (Col>=2) {$(this).attr('rel','iLoad|'+Cont)};
});});
</script>
Просмотр фотографий без перехода на новую страницу v.2.5
Фото всплывают, исчезают быстрее, режим слайд-шоу длится чуть медленнее, чтоб успеть рассмотреть фото.
добавлена возможность в скрипт работа с превью от разных популярных фотохостингов,
на данный момент список получился таким:
uploads.ru, ifotki.info, savepic.net, savepic.ru, radikale.ru, radikal.ru, fastpic.ru, firepic.org, imgbox.com
в html-верх:
Код
<!---Просмотр фотографий без перехода на новую страницу--->
<script type='text/javascript' src='http://petushki-city.ru/files/0002/10/47/24479.js'></script>
в html-низ:
Код
<!---Просмотр фотографий без перехода на новую страницу v.2.5--->
<script type="text/javascript">
var a = 1; // режим демонстрации слайд-шоу, 0 - на всей странице, 1 - в отдельно взятом посте
var host = ['uploads.ru','fotki.info','savepic.net','savepic.ru','radikale.ru','radikal.ru','fastpic.ru','firepic.org','imgbox.com'];
$('.post-content').map(function(){
var Col, Cont, PR, HR, Tit, hvost;
Col = $(this).find('img.postimg').length;
if(a!==0){Cont=$(this).attr('id');}else{Cont='all';}
$(this).find('a:has(img)').each(function(){
PR = $(this).find('img.postimg').attr('src'); HR = $(this).attr('href');
Tit = $(this).find('img.postimg').attr('title');$(this).attr('title',Tit);
if (HR.lastIndexOf('.html')!= -1){hvost=HR.slice(-8,-5);}
for (var i=0; i<host.length; i++){
if((PR.indexOf(host[i])!= -1)){
PR=PR.replace(/(.*?)\.uploads\.ru\/t\/(.*?)/gi, '$1.uploads.ru/i/$2');
PR=PR.replace(/(.*?)\.ifotki\.info\/thumb\/(.*?)/gi, '$1.ifotki.info/org/$2');
PR=PR.replace(/http:\/\/savepic\.(net|ru)\/(\d+)m\.(png|jpg|gif|jpeg)/gi, 'http://savepic.$1/$2.$3');
PR=PR.replace(/(.*?)\.fastpic\.ru\/thumb\/(.*?)\.(png|jpg|gif|jpeg)/gi, '$1.fastpic.ru/big/$2.'+hvost);
PR=PR.replace(/(.*?)\.radikale\.ru\/uploads\/(.*?)\-prev\.(png|jpg|gif|jpeg)/gi, '$1.radikale.ru/uploads/$2-full.$3');
PR=PR.replace(/(.*?)\.radikal\.ru\/(.*?)t\.(png|jpg|gif|jpeg)/gi, '$1.radikal.ru/$2.$3');
PR=PR.replace(/(.*?)\.firepic\.org\/(\d+)\/thumbs\/(.*?)\.(png|jpg|gif|jpeg)/gi, '$1.firepic.org/$2/images/$3.$4');
PR=PR.replace(/http:\/\/(.*?)\.imgbox\.com\/(.*?)\.(png|jpg|gif|jpeg)/gi, 'http://i.imgbox.com/$2.$3');
}
if((HR.indexOf(host[i])!= -1)){$(this).attr('href',PR);}}
if(Col<2){$(this).attr('rel','iLoad');}else{$(this).attr('rel','iLoad|'+Cont);}
});});
</script>
в скрипте в самом верху есть настройка режима показа слайд-шоу
Цитата
var a = 1; // режим демонстрации слайд-шоу, 0 - на всей странице, 1 - в отдельно взятом посте
Помня старую критику по поводу навигации, сообщаю что пользоваться удобнее всего комбинациями на клавиатуре, чем тыкать мышкой
итак:
1. стрелки <- -> на клавиатуре дают возможность листать фото
если у вас мобильный браузер просто нажимайте на само фото и у вас отобразится следующее
2. Shift - запускает слайд-шоу
3. Ctrl - останавливает слайд-шоу
4. Esc останавливает просмотр фото, тоже самое делает нажатие курсором на тёмный фон вне фотографии
единственное что приходится нажимать кусором на панели управления под фото, это разворачивание фото до оригинального размера (крайняя правая кнопка)
http://s7.uploads.ru/PnTNg.jpg
p.s. если вы желаете, чтоб при просмотре фото (слайд-шоу) под изображением отображалось ваше к нему описание, его придётся добавить в ручную к каждому изображению таким образом:
Код
[url=http://savepic.net/7788146.htm][img=ВАШЕ ОПИСАНИЕ К ФОТО]http://savepic.net/7788146m.jpg[/img][/url]
т.е. после тега img пишем знак = и своё описание img=ВАШЕ ОПИСАНИЕ К ФОТО
Просмотров: 637, Загрузок: 26, Оценка: 5.0 (1)
| Страницы: | |