вообще это делается как-то так (за исключением того, что я картинки по высоте ограничил, чтобы в окно просмотра поместились). В частности, первая картинка вставляется серверным скриптом, причем не обязательно первая по счету, а в зависимости от параметра в URL. Таким образом, поисковая система увидит все изображения и пользователь, в случае отключенного javascript или ошибок в скрипте, тоже увидит все изображения
p.s. а ты говорил, картинки нельзя вставить...
<!doctype html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js"></script>
<style type="text/css">
body {
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
}
img{
height: 100px;
}
a {
color: #36c;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.throbber {
position: absolute;
visibility: hidden;
background: #000;
opacity: .3;
filter: alpha(opacity=30);
-ms-filter: "alpha(opacity=30)";
-khtml-opacity: .30;
-moz-opacity: .30;
}
.throbber-gif {
background: url(http://upload.wikimedia.org/wikipedia/commons/d/d2/Spinning_wheel_throbber.gif) no-repeat center;
}
.disabled {
color: #999;
text-decoration: none;
}
</style>
<script type="text/javascript">
var prefix = 'http://javascript.ru/forum/attachment.php?';
function qs( v ){
return new QueryString(v);
}
var QueryString = new Class({
initialize: function( v ){
v = v || location.search;
this._assoc = typeOf(v) == 'string'
? v.substr(1).split('&')
.toAssoc(function( v ){
var kv = v.split('=');
return {
'k': decodeURIComponent(kv[0]),
'v': decodeURIComponent(kv[1])
};
})
: v;
},
val: function( n, v ){
if( arguments.length > 1 )
this._assoc[n] = v;
return this._assoc[n];
},
unset: function( n ){
delete this._assoc[n];
},
toAssoc: function(){
return this._assoc;
},
toString: function(){
return '?'+
this._assoc
.map(function( v, k ){
return encodeURIComponent(k)+'='+encodeURIComponent(this._assoc[k]);
})
.join('&');
}
});
Function.implement({
'of': function( o ){
var f = this;
return function(){
return f.apply(o, arguments);
};
}
});
Array.implement({
'toAssoc': function( f ){
var r = {};
for( var i=0; i<this.length; i++ ){
var kv = f(this[i], i, this);
r[kv['k']] = kv['v'];
}
return r;
}
});
Element.implement({
'setCoordinates': function( coords ){
this.setStyles({
'left': coords['left'],
'top': coords['top'],
'width': coords['width'],
'height': coords['height']
});
return this;
}
});
var Img = new Class({
initialize: function( images ){
this._images = images;
this._i = this._images.indexOf( qs().val('img') );
if( this._i == -1 )
this._i = 0;
this._throbber = new Element('div', {'class': 'throbber', 'html': '<div class="throbber-gif"></div>'})
.inject( document.body );
this._forward = $('forward');
this._backward = $('backward');
this._forward.addEvents({
'click': this._next.of(this).pass(true),
'mousedown': function(){ return false; }
});
this._backward.addEvents({
'click': this._next.of(this).pass(false),
'mousedown': function(){ return false; }
});
},
_next: function( next ){
if( ! this._disabled() ){
this._disabled( true );
this._load( newI.of(this)() );
}
return false;
function newI(){
var r = next ? this._i+1 : this._i-1;
r %= this._images.length;
if( r < 0 )
r = this._images.length-1;
return r;
}
},
_load: function( i ){
var img = $('img');
this._showThrobber( true );
img.onload = function(){
this._i = i;
this._disabled( false );
this._showThrobber( false );
}.of(this)
img.src = prefix+this._images[i];
},
_showThrobber: function( show ){
this._throbberGif = this._throbberGif || $$('.throbber-gif')[0];
if( show ){
var coords = $('img').getCoordinates();
this._throbber.setStyles({
'left': coords['left'],
'top': coords['top']
});
this._throbberGif.setStyles({
'width': coords['width'],
'height': coords['height']
});
}
this._throbber
.setStyles({'visibility': show ? 'visible' : ''});
},
_disabled: function( disabled ){
if( arguments.length ){
var f = disabled ? 'addClass' : 'removeClass';
this._forward[f]( 'disabled' );
this._backward[f]( 'disabled' );
}
return this._forward.hasClass('disabled');
}
});
</script>
</head>
<body>
<a id="backward" href="http://javascript.ru/forum/attachment.php?attachmentid=664&stc=1&d=1295611491">backward</a>
<a id="forward" href="http://javascript.ru/forum/attachment.php?attachmentid=663&stc=1&d=1295611491">forward</a>
<br>
<img id="img" src="http://javascript.ru/forum/attachment.php?attachmentid=662&stc=1&d=1295611491">
<script type="text/javascript">
var images = ['attachmentid=662&stc=1&d=1295614554', 'attachmentid=663&stc=1&d=1295614554', 'attachmentid=664&stc=1&d=1295614554'];
new Img( images );
</script>
</body>
</html>