实现的效果如:http://www.biuuu.com/p1244.html在 火狐狸运行 没错 在IE7 里就提示js 运行错误
错误图如下:
<script type="text/javascript" language="javascript"> $(function() {
var galleries = $('.ad-gallery').adGallery(); // 运行到这句提示Microsoft JScript runtime error:
Object doesn't support this property or method
$('#switch-effect').change(
function() {
galleries[0].settings.effect = $(this).val();
return false;
}
);
$('#toggle-slideshow').click(
function() {
galleries[0].slideshow.toggle();
return false;
}
);
});
</script>前台代码:
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript" language="javascript"> $(function() {
var galleries = $('.ad-gallery').adGallery();
$('#switch-effect').change(
function() {
galleries[0].settings.effect = $(this).val();
return false;
}
);
$('#toggle-slideshow').click(
function() {
galleries[0].slideshow.toggle();
return false;
}
);
});
</script>
<div id="container">
<div id="gallery" class="ad-gallery">
<span><h3>博客相册</h3></span>
<div class="ad-image-wrapper">
</div>
<div class="ad-controls">
</div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
<asp:DataList ID="DataList1" runat="server" RepeatColumns="9999">
<ItemTemplate>
<li>
<a href='handler/Handler.ashx?Size=L&PhotoID=<%# Eval("PhotoID") %>'>
<img src='handler/Handler.ashx?Size=S&PhotoID=<%# Eval("PhotoID") %>'style="border:0px solid white;width:100px; height:80px;" alt='缩略图,照片编号 <%# Eval("PhotoID") %>' title='<%# Eval("Caption") %>' longdesc="" /></a>
</li>
</ItemTemplate>
</asp:DataList>
</ul>
</div>
</div><br />
<p>Examples of how you can alter the behaviour on the fly;
Effect: <select id="switch-effect">
<option value="slide-hori">Slide horizontal</option>
<option value="slide-vert">Slide vertical</option>
<option value="resize">Shrink/grow</option>
<option value="fade">Fade</option>
<option value="">None</option>
</select> |
<a href="#" id="toggle-slideshow">Toggle slideshow</a>
</p>
</div>
</div>
</asp:Content>调用的js文件代码:
字符有限,js 代码看我的下面的回复
错误图如下:
<script type="text/javascript" language="javascript"> $(function() {
var galleries = $('.ad-gallery').adGallery(); // 运行到这句提示Microsoft JScript runtime error:
Object doesn't support this property or method
$('#switch-effect').change(
function() {
galleries[0].settings.effect = $(this).val();
return false;
}
);
$('#toggle-slideshow').click(
function() {
galleries[0].slideshow.toggle();
return false;
}
);
});
</script>前台代码:
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript" language="javascript"> $(function() {
var galleries = $('.ad-gallery').adGallery();
$('#switch-effect').change(
function() {
galleries[0].settings.effect = $(this).val();
return false;
}
);
$('#toggle-slideshow').click(
function() {
galleries[0].slideshow.toggle();
return false;
}
);
});
</script>
<div id="container">
<div id="gallery" class="ad-gallery">
<span><h3>博客相册</h3></span>
<div class="ad-image-wrapper">
</div>
<div class="ad-controls">
</div>
<div class="ad-nav">
<div class="ad-thumbs">
<ul class="ad-thumb-list">
<asp:DataList ID="DataList1" runat="server" RepeatColumns="9999">
<ItemTemplate>
<li>
<a href='handler/Handler.ashx?Size=L&PhotoID=<%# Eval("PhotoID") %>'>
<img src='handler/Handler.ashx?Size=S&PhotoID=<%# Eval("PhotoID") %>'style="border:0px solid white;width:100px; height:80px;" alt='缩略图,照片编号 <%# Eval("PhotoID") %>' title='<%# Eval("Caption") %>' longdesc="" /></a>
</li>
</ItemTemplate>
</asp:DataList>
</ul>
</div>
</div><br />
<p>Examples of how you can alter the behaviour on the fly;
Effect: <select id="switch-effect">
<option value="slide-hori">Slide horizontal</option>
<option value="slide-vert">Slide vertical</option>
<option value="resize">Shrink/grow</option>
<option value="fade">Fade</option>
<option value="">None</option>
</select> |
<a href="#" id="toggle-slideshow">Toggle slideshow</a>
</p>
</div>
</div>
</asp:Content>调用的js文件代码:
字符有限,js 代码看我的下面的回复
* Copyright (c) 2009 Anders Ekdahl (http://coffeescripter.com/)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
* Download by http://www.codefans.net
* Version: 1.2.2
*
* Demo and documentation: http://coffeescripter.com/code/ad-gallery/
*/
(function($) {
$.fn.adGallery = function(options) {
var defaults = { loader_image: 'loader.gif',
start_at_index: 0,
thumb_opacity: 0.7,
animate_first_image: false,
animation_speed: 400,
width: false,
height: false,
display_next_and_prev: true,
display_back_and_forward: true,
scroll_jump: 0, // If 0, it jumps the width of the container
slideshow: {
enable: true,
autostart: false,
speed: 5000,
start_label: 'Start',
stop_label: 'Stop',
stop_on_scroll: true,
countdown_prefix: '(',
countdown_sufix: ')',
onStart: false,
onStop: false
},
effect: 'slide-hori', // or 'slide-vert', 'fade', or 'resize', 'none'
enable_keyboard_move: true,
cycle: true,
callbacks: {
init: false,
afterImageVisible: false,
beforeImageVisible: false
}
};
var settings = $.extend(false, defaults, options);
if(options && options.slideshow) {
settings.slideshow = $.extend(false, defaults.slideshow, options.slideshow);
};
if(!settings.slideshow.enable) {
settings.slideshow.autostart = false;
};
var galleries = [];
$(this).each(function() {
var gallery = new AdGallery(this, settings);
galleries[galleries.length] = gallery;
});
// Sorry, breaking the jQuery chain because the gallery instances
// are returned so you can fiddle with them
return galleries;
}; function VerticalSlideAnimation(img_container, direction, desc) {
var current_top = parseInt(img_container.css('top'), 10);
if(direction == 'left') {
var old_image_top = '-'+ this.image_wrapper_height +'px';
img_container.css('top', this.image_wrapper_height +'px');
} else {
var old_image_top = this.image_wrapper_height +'px';
img_container.css('top', '-'+ this.image_wrapper_height +'px');
};
if(desc) {
desc.css('bottom', '-'+ desc[0].offsetHeight +'px');
desc.animate({bottom: 0}, this.settings.animation_speed * 2);
};
return {old_image: {top: old_image_top},
new_image: {top: current_top}};
};
var current_left = parseInt(img_container.css('left'), 10);
if(direction == 'left') {
var old_image_left = '-'+ this.image_wrapper_width +'px';
img_container.css('left',this.image_wrapper_width +'px');
} else {
var old_image_left = this.image_wrapper_width +'px';
img_container.css('left','-'+ this.image_wrapper_width +'px');
};
if(desc) {
desc.css('bottom', '-'+ desc[0].offsetHeight +'px');
desc.animate({bottom: 0}, this.settings.animation_speed * 2);
};
return {old_image: {left: old_image_left},
new_image: {left: current_left}};
}; function ResizeAnimation(img_container, direction, desc) {
var image_width = img_container.width();
var image_height = img_container.height();
var current_left = parseInt(img_container.css('left'), 10);
var current_top = parseInt(img_container.css('top'), 10);
img_container.css({width: 0, height: 0, top: this.image_wrapper_height / 2, left: this.image_wrapper_width / 2});
return {old_image: {width: 0,
height: 0,
top: this.image_wrapper_height / 2,
left: this.image_wrapper_width / 2},
new_image: {width: image_width,
height: image_height,
top: current_top,
left: current_left}};
}; function FadeAnimation(img_container, direction, desc) {
img_container.css('opacity', 0);
return {old_image: {opacity: 0},
new_image: {opacity: 1}};
}; // Sort of a hack, will clean this up... eventually
function NoneAnimation(img_container, direction, desc) {
img_container.css('opacity', 0);
return {old_image: {opacity: 0},
new_image: {opacity: 1},
speed: 0};
}; function AdGallery(wrapper, settings) {
this.init(wrapper, settings);
};
AdGallery.prototype = {
// Elements
wrapper: false,
image_wrapper: false,
gallery_info: false,
nav: false,
loader: false,
preloads: false,
thumbs_wrapper: false,
scroll_back: false,
scroll_forward: false,
next_link: false,
prev_link: false, slideshow: false,
image_wrapper_width: 0,
image_wrapper_height: 0,
current_index: 0,
current_image: false,
nav_display_width: 0,
settings: false,
images: false,
in_transition: false,
animations: false,
init: function(wrapper, settings) {
var context = this;
this.wrapper = $(wrapper);
this.settings = settings;
this.setupElements();
this.setupAnimations();
if(this.settings.width) {
this.image_wrapper_width = this.settings.width;
this.image_wrapper.width(this.settings.width);
this.wrapper.width(this.settings.width);
} else {
this.image_wrapper_width = this.image_wrapper.width();
};
if(this.settings.height) {
this.image_wrapper_height = this.settings.height;
this.image_wrapper.height(this.settings.height);
} else {
this.image_wrapper_height = this.image_wrapper.height();
};
this.nav_display_width = this.nav.width();
this.current_index = 0;
this.current_image = false;
this.in_transition = false;
this.findImages();
if(this.settings.display_next_and_prev) {
this.initNextAndPrev();
};
// The slideshow needs a callback to trigger the next image to be shown
// but we don't want to give it access to the whole gallery instance
var nextimage_callback = function(callback) {
return context.nextImage(callback);
};
this.slideshow = new AdGallerySlideshow(nextimage_callback, this.settings.slideshow);
this.controls.append(this.slideshow.create());
if(this.settings.slideshow.enable) {
this.slideshow.enable();
} else {
this.slideshow.disable();
};
if(this.settings.display_back_and_forward) {
this.initBackAndForward();
};
if(this.settings.enable_keyboard_move) {
this.initKeyEvents();
};
var start_at = this.settings.start_at_index;
if(window.location.hash && window.location.hash.indexOf('#ad-image') === 0) {
start_at = window.location.hash.replace(/[^0-9]+/g, '');
// Check if it's a number
if((start_at * 1) != start_at) {
start_at = this.settings.start_at_index;
};
}; this.loading(true);
this.showImage(start_at,
function() {
// We don't want to start the slideshow before the image has been
// displayed
if(context.settings.slideshow.autostart) {
context.preloadImage(start_at + 1);
context.slideshow.start();
};
}
);
this.fireCallback(this.settings.callbacks.init);
},
setupAnimations: function() {
this.animations = {
'slide-vert': VerticalSlideAnimation,
'slide-hori': HorizontalSlideAnimation,
'resize': ResizeAnimation,
'fade': FadeAnimation,
'none': NoneAnimation
};
},
setupElements: function() {
this.controls = this.wrapper.find('.ad-controls');
this.gallery_info = $('<p class="ad-info"></p>');
this.controls.append(this.gallery_info);
this.image_wrapper = this.wrapper.find('.ad-image-wrapper');
this.image_wrapper.empty();
this.nav = this.wrapper.find('.ad-nav');
this.thumbs_wrapper = this.nav.find('.ad-thumbs');
this.preloads = $('<div class="ad-preloads"></div>');
this.loader = $('<img class="ad-loader" src="'+ this.settings.loader_image +'">');
this.image_wrapper.append(this.loader);
this.loader.hide();
$(document.body).append(this.preloads);
},
loading: function(bool) {
if(bool) {
this.loader.show();
} else {
this.loader.hide();
};
},
addAnimation: function(name, fn) {
if($.isFunction(fn)) {
this.animations[name] = fn;
};
},
findImages: function() {
var context = this;
this.images = [];
var thumb_wrapper_width = 0;
var thumbs_loaded = 0;
var thumbs = this.thumbs_wrapper.find('a');
var thumb_count = thumbs.length;
if(this.settings.thumb_opacity < 1) {
thumbs.find('img').css('opacity', this.settings.thumb_opacity);
};
thumbs.each(
function(i) {
var link = $(this);
var image_src = link.attr('href');
var thumb = link.find('img');
// Check if the thumb has already loaded
if(!context.isImageLoaded(thumb[0])) {
thumb.load(
function() {
thumb_wrapper_width += this.parentNode.parentNode.offsetWidth;
thumbs_loaded++;
}
);
} else{
thumb_wrapper_width += thumb[0].parentNode.parentNode.offsetWidth;
thumbs_loaded++;
};
link.addClass('ad-thumb'+ i);
link.click(
function() {
context.showImage(i);
context.slideshow.stop();
return false;
}
).hover(
function() {
if(!$(this).is('.ad-active') && context.settings.thumb_opacity < 1) {
$(this).find('img').fadeTo(300, 1);
};
context.preloadImage(i);
},
function() {
if(!$(this).is('.ad-active') && context.settings.thumb_opacity < 1) {
$(this).find('img').fadeTo(300, context.settings.thumb_opacity);
};
}
);
var desc = false;
if(thumb.data('ad-desc')) {
desc = thumb.data('ad-desc');
} else if(thumb.attr('longdesc') && thumb.attr('longdesc').length) {
desc = thumb.attr('longdesc');
};
var title = false;
if(thumb.data('ad-title')) {
title = thumb.data('ad-title');
} else if(thumb.attr('title') && thumb.attr('title').length) {
title = thumb.attr('title');
};
context.images[i] = { thumb: thumb.attr('src'), image: image_src, error: false,
preloaded: false, desc: desc, title: title, size: false };
}
);