Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,038

HOME > Client Script Forum > ต้องการซูมภาพในแกลลอรี่ สไลด์โชว์ครับ ช่วยแนะนำการเขียน jquery ด้วยครับ

[PHP] ต้องการซูมภาพในแกลลอรี่ สไลด์โชว์ครับ ช่วยแนะนำการเขียน jquery ด้วยครับ

เริ่มหัวข้อใหม่

Guest

คือผมจะใช้ แกลลอรี่ตัวนึง ซึ่งมันไม่มีการซูมภาพ ผมต้องการที่จะให้ภาพใหญ่สามารถซูมได้ด้วยครับ

ตัวนี้โคด html ครับ
Example.html
Code (PHP)

<!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=utf-8" />
<title>Elegant Photo Gallery</title>
<link href="flickrGallery-large.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery-ui-personalized-1.6rc2.min.js"></script>
<script type="text/javascript" src="jquery.flickr-1.0.js"></script>
<script type="text/javascript" src="jquery.flickrGallery-1.0.2.js"></script>
<script type="text/javascript" src="jquery.panzoom.js"></script>
<script type="text/javascript">
$().ready(function(){
    $('#Gallery').flickrGallery({
        galleryHeight: 450
 
    });
});
</script>
<style>
#largeImageWrap { background:url(ajax-loader.gif) center 65px no-repeat; }
</style>
</head>
<body>
<div id="Gallery">
    <ul id="thumbs_1" class="thumbs">
        <li><img src="images/image_11.jpg" title="Desert Moon" width="300" /></li>
        <li><img src="images/image_16.jpg" title="Cat + Tree" width="500" /></li>
        <li><img src="images/image_10.jpg" title="Matisyahu - Hasidic Rap Reggae Superstar" width="400" /></li>
        <li><img src="images/image_15.jpg" title="Weirdo" width="650" /></li>
        <li><img src="images/image_13.jpg" title="Astronomy Picture of the Day" width="600" /></li>
         
    </ul>
</div>
</body>
</html>

jquery.flickr-1.0.js
Code (JavaScript)

/*
 * jQuery Flickr - jQuery plug-in
 * Version 1.0, Released 2008.04.17
 *
 * Copyright (c) 2008 Daniel MacDonald (www.projectatomic.com)
 * Dual licensed GPL http://www.gnu.org/licenses/gpl.html 
 * and MIT http://www.opensource.org/licenses/mit-license.php
 */
(function($) {
$.fn.flickr = function(o){
var s = {
    api_key: null,              // [string]    required, see http://www.flickr.com/services/api/misc.api_keys.html
    type: null,                 // [string]    allowed values: 'photoset', 'search', default: 'flickr.photos.getRecent'
    photoset_id: null,          // [string]    required, for type=='photoset'  
    text: null,                     // [string]    for type=='search' free text search
    user_id: null,              // [string]    for type=='search' search by user id
    group_id: null,             // [string]    for type=='search' search by group id
    tags: null,                 // [string]    for type=='search' comma separated list
    tag_mode: 'any',            // [string]    for type=='search' allowed values: 'any' (OR), 'all' (AND)
    sort: 'relevance',    // [string]    for type=='search' allowed values: 'date-posted-asc', 'date-posted-desc', 'date-taken-asc', 'date-taken-desc', 'interestingness-desc', 'interestingness-asc', 'relevance'
    thumb_size: 's',            // [string]    allowed values: 's' (75x75), 't' (100x?), 'm' (240x?)
    size: null,                 // [string]    allowed values: 'm' (240x?), 'b' (1024x?), 'o' (original), default: (500x?)
    per_page: 100,              // [integer]   allowed values: max of 500
    page: 1,                      // [integer]   see paging notes
    attr: '',                   // [string]    optional, attributes applied to thumbnail <a> tag
    api_url: null,              // [string]    optional, custom url that returns flickr JSON or JSON-P 'photos' or 'photoset'
    params: '',                 // [string]    optional, custom arguments, see http://www.flickr.com/services/api/flickr.photos.search.html
    api_callback: '?',          // [string]    optional, custom callback in flickr JSON-P response
    callback: null              // [function]  optional, callback function applied to entire <ul>
 
    // PAGING NOTES: jQuery Flickr plug-in does not provide paging functionality, but does provide hooks for a custom paging routine
    // within the <ul> created by the plug-in, there are two hidden <input> tags, 
    // input:eq(0): current page, input:eq(1): total number of pages, input:eq(2): images per page, input:eq(3): total number of images
     
    // SEARCH NOTES: when setting type to 'search' at least one search parameter  must also be passed text, user_id, group_id, or tags
     
    // SIZE NOTES: photos must allow viewing original size for size 'o' to function, if not, default size is shown
  };
  if(o) $.extend(s, o);
  return this.each(function(){
    // create unordered list to contain flickr images
        var list = $('<ul>').appendTo(this);
    var url = $.flickr.format(s);
        $.getJSON(url, function(r){
      if (r.stat != "ok"){
        for (i in r){
            $('<li>').text(i+': '+ r[i]).appendTo(list);
        };
      } else {
        if (s.type == 'photoset') r.photos = r.photoset;
        // add hooks to access paging data
        list.append('<input type="hidden" value="'+r.photos.page+'" />');
        list.append('<input type="hidden" value="'+r.photos.pages+'" />');
        list.append('<input type="hidden" value="'+r.photos.perpage+'" />');
        list.append('<input type="hidden" value="'+r.photos.total+'" />');
        for (var i=0; i<r.photos.photo.length; i++){
          var photo = r.photos.photo[i];
          // format thumbnail url
          var t = 'http://farm'+photo['farm']+'.static.flickr.com/'+photo['server']+'/'+photo['id']+'_'+photo['secret']+'_'+s.thumb_size+'.jpg';
          //format image url
          var h = 'http://farm'+photo['farm']+'.static.flickr.com/'+photo['server']+'/'+photo['id']+'_';
          switch (s.size){
            case 'm':
              h += photo['secret'] + '_m.jpg';
              break;
            case 'b':
              h += photo['secret'] + '_b.jpg';
              break;
            case 'o':
              if (photo['originalsecret'] && photo['originalformat']) {
                h += photo['originalsecret'] + '_o.' + photo['originalformat'];
              } else {
                h += photo['secret'] + '_b.jpg';
              };
              break;
            default:
              h += photo['secret'] + '.jpg';
          };
          var flickrLink = 'http://www.flickr.com/photos/' + r.photoset.owner + '/' + photo['id'];
          //console.log(flickrLink);
          list.append('<li><a href="'+h+'" '+s.attr+' title="'+flickrLink+'"><img src="'+t+'" alt="'+photo['title']+'" /></a></li>');
        };
        if (s.callback) s.callback(list);
      };
        });
  });
};
// static function to format the flickr API url according to the plug-in settings 
$.flickr = {
    format: function(s){
        if (s.url) return s.url;
        var url = 'http://api.flickr.com/services/rest/?format=json&;jsoncallback='+s.api_callback+'&api_key='+s.api_key;
        switch (s.type){
            case 'photoset':
                url += '&method=flickr.photosets.getPhotos&photoset_id=' + s.photoset_id;
                break;
            case 'search':
                url += '&method=flickr.photos.search&sort=' + s.sort;
                if (s.user_id) url += '&user_id=' + s.user_id;
                if (s.group_id) url += '&group_id=' + s.group_id;
                if (s.tags) url += '&tags=' + s.tags;
                if (s.tag_mode) url += '&tag_mode=' + s.tag_mode;
                if (s.text) url += '&text=' + s.text;
                break;
            default:
                url += '&method=flickr.photos.getRecent';
        };
        if (s.size == 'o') url += '&extras=original_format';
        url += '&per_page=' + s.per_page + '&page=' + s.page + s.params;
        return url;
    }
};
})(jQuery);

jquery.flickrGallery-1.0.2.js
Code (JavaScript)

/*
 * jQuery FlickrGallery - jQuery plug-in
 * Version 1.0.1, Released 
 *
 * Copyright (c) 2008 Steven Dugas
 * This work is licensed under a Creative Commons Attribution 3.0 Unported License.
 */
(function($) {
$.fn.flickrGallery = function(options) {
 
  var defaults = {
        galleryHeight : 'auto',             // either [string] 'auto' or [integer]. If [integer] gallery will have a strict height to that number.
        userFlickr : 'false',               // [string], 'true' or 'false'. Determines if gallery is local or flickr based.
        useFlickrLargeSize: 'false',        // [string], 'true' or 'false'. Determines whether gallery is Large or Small.
        flickrAPIKey: '',                   // [string], required for Flickr gallery.
        photosetID: '',                     // [string], required for Flickr gallery.
        per_page: 30,                       // [integer], amount of thumbnails per 'page'.
        useHoverIntent: 'false',            // [string], 'true' or 'false'. Uses HoverIntent plugin for better Hovers.
        useLightBox: 'false'                // [string], 'true' or 'false. Uses jQuery Lightbox plugin for Small Images
  };
  var options = $.extend(defaults, options);
    //options.galleryHeight = 'auto';
  return this.each(function() {
    obj = $(this);
 
    // Massive function to create the Image Gallery and register all event handlers. Must be a function to recreate gallery on Next/Prev Page.
    function makeGallery(){
         
        // Create Variables
        var flickrLargeImg;
        var theCaption;
        var container;
        var stepCount;
        var count = 1;
        var totalImageCount = 0;
        var currentImageCount = 1;  
        thumbs = obj.find('ul');
        thumbs.addClass('galleryUL');
         
        // If useFlickr is true, create Flickr-only buttons.
        if ( options.useFlickr == 'true' ) {
            obj.prepend('<div class="largeImageWrap"><div class="largeImage_nextPage"></div><div class="largeImage_prevPage"></div><a href="" class="largeImage_flickrLink" target="_blank"><span>Flickr</span></a><div class="largeImage_prev"><span>Prev</span></div><div class="largeImage_next"><span>Next</span></div><div class="largeImage"></div><div class="caption"></div></div>');
        } else {
            obj.prepend('<div class="largeImageWrap"><div class="largeImage_prev"><span>Prev</span></div><div class="largeImage_next"><span>Next</span></div><div class="largeImage"></div><div class="caption"></div></div>');
        };
         
        var largeImageWrap = obj.find('.largeImageWrap');
        var nextPage = obj.find('.largeImage_nextPage');
        var prevPage = obj.find('.largeImage_prevPage');
        var nextImg = obj.find('.largeImage_next');
        var prevImg = obj.find('.largeImage_prev');
        var largeImageFlickrLink = obj.find('.largeImage_flickrLink');
        var largeImage = obj.find('.largeImage');
        var imgCaption = obj.find('.caption');
 
         
         
        // Determine if gallery is fixed or auto height. If Fixed, set height.
        if ( options.galleryHeight != 'auto' ) {
            var theHeight = parseFloat(options.galleryHeight);
            largeImageWrap.animate({ height: theHeight+'px' }, 600) ;
        }
         
        // If Flickr Gallery is on, disable links in Thumbnails.
        if ( options.useFlickr == 'true' ) {
            thumbs.children().click(function(){
                return false;
            });
        };
     
        // Add unique IDs to each thumbnail image
 
        thumbs.wrap('<div class="sliderGallery"></div>');       
        var sliderGallery = obj.find('.sliderGallery');
        sliderGallery.wrap('<div class="sliderGallery_Wrap"></div>');
        var sliderGalleryWrap = obj.find('.sliderGallery_Wrap');
        sliderGallery.append('<div class="slider"><div class="handle"></div></div>');
        var theSlider = obj.find('.slider');
        var theHandle = obj.find('.handle');
        count = 1;
        totalImageCount = 0;
        currentImageCount = 1;
        obj.find('.galleryUL img').each(function(){
            var IESRC = $(this).attr('src');
            $(this).attr('src',IESRC);
            $(this).attr('id','galleryThumb_'+count);
            count++;
            totalImageCount++;
        });
 
        // Function for clicking Next Page. This is a Flickr-only function.
        nextPage.click(function(){
            currentPage = parseFloat($(obj).find('input:eq(0)').val());
            totalPages = parseFloat($(obj).find('input:eq(1)').val());
            nextPage = currentPage + 1;
            if ( nextPage > totalPages ) {
                nextPage = 1;
            };
            $(theSlider, container).slider("destroy");
            sliderGalleryWrap.hide();
            $(obj).children().slideUp();
            obj.slideUp('slow',function(){
                obj.empty();
                obj.flickr({     
                    api_key: options.flickrAPIKey,     
                    type: 'photoset',
                    photoset_id: options.photosetID,
                    thumb_size: 'm',
                    per_page: options.per_page,
                    page: nextPage,
                    callback: function(){ 
                        makeGallery();
                    }
                }); 
                obj.slideDown();
            });
        });
         
        // Function for clicking Previous Page. This is a Flickr function.
        prevPage.click(function(){
            currentPage = parseFloat($(obj).find('input:eq(0)').val());
            totalPages = parseFloat($(obj).find('input:eq(1)').val());
            prevPage = currentPage - 1;
            if ( prevPage == 0 ) {
                prevPage = totalPages;
            };
            $(theSlider, container).slider("destroy");
            sliderGalleryWrap.hide();
            $(obj).children().slideUp();
            obj.slideUp('slow',function(){
                obj.empty();
                obj.flickr({     
                    api_key: options.flickrAPIKey,     
                    type: 'photoset',
                    photoset_id: options.photosetID,
                    thumb_size: 'm',
                    per_page: options.per_page,
                    page: prevPage,
                    callback: function(){ 
                        makeGallery();
                    }
                }); 
                obj.slideDown();
            });
        });
         
        // calcHeight function, used to process image changing on next, prev or click.
 
        function calcHeight() {             
            largeImage.fadeOut(function(){
                function doHeight(){
                    largeImage.fadeIn(function(){ 
                        var imgHeight = largeImage.find('img').height();
                        var captionHeight = imgCaption.height();
                        largeImage.find('img').css({
                            position: '',
                            visibility: 'visible',
                            display: 'none'
                        });
                        if ( options.galleryHeight == 'auto' ) {
                            largeImageWrap.animate({
                                height: imgHeight+captionHeight+'px'
                            }, function(){ largeImage.find('img').fadeIn(); imgCaption.fadeIn(); });
                        } else {
                            largeImage.find('img').fadeIn(); 
                            imgCaption.fadeIn();
                        };
                         
                    });
                    slideValue = currentImageCount-1;
                    slideValue = slideValue * stepCount;
                    $(theSlider, container).slider("moveTo",slideValue);
                };
                $(this).find('img').remove();
                imgCaption.empty();
                var i = new Image();
                if ( options.useFlickr == 'true' ) {
                     if ( options.useFlickrLargeSize == 'true') {
                        flickrLargeImg = thumbs.find('#galleryThumb_'+currentImageCount).parent().attr('href');
                        flickrLink = thumbs.find('#galleryThumb_'+currentImageCount).parent().attr('title')
                        theCaption = thumbs.find('#galleryThumb_'+currentImageCount).attr('alt');
                        i.onload = doHeight;
                        i.src = flickrLargeImg;
                        largeImage.append(i);
                     } else {
                        flickrLink = thumbs.find('#galleryThumb_'+currentImageCount).parent().attr('title');
                        theCaption = thumbs.find('#galleryThumb_'+currentImageCount).attr('alt');
                        i.onload = doHeight;
                        i.src = thumbs.find('#galleryThumb_'+currentImageCount).attr('src');
                        largeImage.append(i);
                        flickrLargeImg = thumbs.find('#galleryThumb_'+currentImageCount).parent().attr('href');
                        if ( options.useLightBox == 'true') {
                            largeImage.find('img').wrap('<a href="'+flickrLargeImg+'" title="'+theCaption+'"></a>');
                            largeImage.find('a').lightBox();
                        };
                     }
                    largeImageFlickrLink.attr('href',flickrLink);
                    largeImage.find('img').addClass(''+currentImageCount+'');
                } else { 
                    thumbs.find('#galleryThumb_'+currentImageCount).clone().css('opacity',1).appendTo(largeImage);
                    theCaption = thumbs.find('#galleryThumb_'+currentImageCount).attr('title');
                    doHeight();
                };  
                imgCaption.append(theCaption).hide();
                largeImage.find('img').css({
                    position: 'absolute',
                    visibility: 'hidden',
                    display: 'block'
                }).addClass(''+currentImageCount+'').attr('title',theCaption);
            }); 
        };
         
 
 
        // Create the slider
        obj.find('div.sliderGallery').each(function(){
            container = $(this);
            var ul = thumbs;
            var itemsWidth = ul.innerWidth() - container.outerWidth();  
            var totalCount = totalImageCount;
            totalCount = parseFloat(totalCount-1);
            stepCount = itemsWidth/totalCount;
            var division = itemsWidth / totalCount;
            var theValue = 0;
            $(theSlider, container).slider({
                min: 0,
                max: itemsWidth,
                handle: theHandle,
                steps:totalCount,
                stop: function (event, ui) {
                    ul.animate({'left' : ui.value * -1}, 500);
                    theValue = ui.value;
                },
                slide: function (event, ui) {
                    ul.css('left', ui.value * -1);
                }
            });
            obj.find('.galleryUL img').click(function(){
                var clickThumb = $(this);
                var startCount = 0;
                var theCaption = $(this).attr('title');
                currentImageCount = $(this).attr('id');
                currentImageCount = parseFloat(currentImageCount.split("_",2)[1]);
                calcHeight();
            });
        });
        // End of SlideBar
     
 
        //  Fade in the first image with caption 
        function startHeight() {    
            imgCaption.append(theCaption).hide();
            largeImage.find('img').css({
                position: '',
                visibility: 'visible',
                display: 'none'
            });
            largeImage.find('img').addClass(''+currentImageCount+'').attr('title',theCaption);
            largeImage.show(function(){ 
                imgHeight = largeImage.find('img').height();
                captionHeight = imgCaption.height();
                if ( options.galleryHeight == 'auto' ) {
                    largeImageWrap.animate({
                        height: imgHeight+captionHeight+'px'
                    },'slow','swing', 
                    function(){     
                        largeImage.css({ visibility: 'visible' });
                        imgCaption.fadeIn();
                        largeImage.find('img').fadeIn(300, function(){ 
                            sliderGallery.hide().wrapInner('<div id="sliderGalleryInnerWrap"></div>');
                            var sliderGalleryInnerWrap = obj.find('#sliderGalleryInnerWrap');
                            sliderGalleryInnerWrap.hide();
                            sliderGalleryWrap.show();
                            sliderGallery.slideDown('slow', function(){ 
                            sliderGalleryInnerWrap.fadeIn();
                            });
                        }); 
                    });
                } else {
                    largeImage.css({ visibility: 'visible' });
                    largeImage.find('img').fadeIn('slow', function(){ 
                            sliderGallery.hide().wrapInner('<div id="sliderGalleryInnerWrap"></div>');
                            var sliderGalleryInnerWrap = obj.find('#sliderGalleryInnerWrap');
                            sliderGalleryInnerWrap.hide();
                            sliderGalleryWrap.show();
                            sliderGallery.slideDown('slow', function(){ 
                                sliderGalleryInnerWrap.fadeIn('slow');
                            });
                        });  
                    imgCaption.fadeIn('slow');
                };
            });
        };
        sliderGalleryWrap.hide();
        largeImage.hide().css({visibility: 'hidden'});
        var i = new Image();
        if ( options.useFlickr == 'true' ) {
             if ( options.useFlickrLargeSize == 'true') {
                flickrLargeImg = thumbs.find('#galleryThumb_'+currentImageCount).parent().attr('href');
                flickrLink = thumbs.find('#galleryThumb_'+currentImageCount).parent().attr('title')
                theCaption = thumbs.find('#galleryThumb_'+currentImageCount).attr('alt');
                i.onload = startHeight;
                i.src = flickrLargeImg;
                largeImage.append(i);
             } else {
                flickrLargeImg = thumbs.find('#galleryThumb_'+currentImageCount).parent().attr('href');
                flickrLink = thumbs.find('#galleryThumb_'+currentImageCount).parent().attr('title')
                thumbs.find('#galleryThumb_'+currentImageCount).clone().appendTo(largeImage);
                theCaption = thumbs.find('#galleryThumb_'+currentImageCount).attr('alt');
                if ( options.useLightBox == 'true') {
                    largeImage.find('img').wrap('<a href="'+flickrLargeImg+'" title="'+theCaption+'"></a>');
                    largeImage.find('a').lightBox();
                }
                startHeight();
             }
            largeImageFlickrLink.attr('href',flickrLink);
            largeImage.find('img').addClass(''+currentImageCount+'');
        } else { 
            thumbs.find('#galleryThumb_'+currentImageCount).clone().appendTo(largeImage);
            theCaption = thumbs.find('#galleryThumb_'+currentImageCount).attr('title');
            startHeight();
        };                          
        // Function to fadeIn or fadeOut Next/Prev buttons on hover.
        if ( options.useHoverIntent == 'false' ) {
            largeImageWrap.hover(function(){
                prevImg.fadeIn();
                nextImg.fadeIn();
                largeImageFlickrLink.fadeIn();
                nextPage.fadeIn();
                prevPage.fadeIn();
            },function(){
                obj.find('.largeImage_prev').fadeOut();
                obj.find('.largeImage_next').fadeOut();
                obj.find('.largeImage_flickrLink').fadeOut();
                obj.find('.largeImage_prevPage').fadeOut();
                obj.find('.largeImage_nextPage').fadeOut();
            });
            $(thumbs).children().find('img').hover(function(){
                $(this).animate({ opacity: 1 }, 300);
            },function(){
                $(this).animate({ opacity: .7 }, 300);      
            });
        } else {
            function hoverOn() {
                prevImg.fadeIn();
                nextImg.fadeIn();
                largeImageFlickrLink.fadeIn();
                nextPage.fadeIn();
                prevPage.fadeIn();  
            };
            function hoverOff() {
                obj.find('.largeImage_prev').fadeOut();
                obj.find('.largeImage_next').fadeOut();
                obj.find('.largeImage_flickrLink').fadeOut();
                obj.find('.largeImage_prevPage').fadeOut();
                obj.find('.largeImage_nextPage').fadeOut();
            };
            var config = {    
                 sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)    
                 interval: 50, // number = milliseconds for onMouseOver polling interval    
                 over: hoverOn, // function = onMouseOver callback (REQUIRED)    
                 timeout: 200, // number = milliseconds delay before onMouseOut    
                 out: hoverOff // function = onMouseOut callback (REQUIRED)    
            };
            largeImageWrap.hoverIntent(config);
            function thumbHoverOn() {
                $(this).animate({ opacity: 1 }, 300);
            };
            function thumbHoverOff() {
                $(this).animate({ opacity: .7 }, 300);
            };
            var config2 = {    
                 sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)    
                 interval: 25, // number = milliseconds for onMouseOver polling interval    
                 over: thumbHoverOn, // function = onMouseOver callback (REQUIRED)    
                 timeout: 50, // number = milliseconds delay before onMouseOut    
                 out: thumbHoverOff // function = onMouseOut callback (REQUIRED)    
            };
            $(thumbs).children().find('img').hoverIntent(config2);
        };
        // Change the opacity when hovering over thumbnails 
        // Function for Previous button onclick
        prevImg.click(function(){
            var theSRC = largeImage.find('img').attr('src');
            currentImageCount = largeImage.find('img').attr('class');
            var newSRC = "";
            var newImage = "";
            var fixIE = "";
            var prevImageCount = currentImageCount - 1;
            if ( prevImageCount < 1 ) {
                currentImageCount = totalImageCount;
            } else {
             currentImageCount = prevImageCount;    
            };
            newSRC = thumbs.find('#galleryThumb_'+currentImageCount).attr('src');
            newImage = thumbs.find('#galleryThumb_'+currentImageCount).clone().css('opacity',1).addClass(''+currentImageCount+'');
            calcHeight();
        });
         
        // Function for Next button onclick
        nextImg.click(function(){
            var theSRC = largeImage.find('img').attr('src');
            currentImageCount = largeImage.find('img').attr('class');
            currentImageCount = parseFloat(currentImageCount);
            var newSRC = "";
            var theCaption = "";
            var newImage = "";
            var nextImageCount = currentImageCount + 1;
            if ( nextImageCount > totalImageCount ) {
                currentImageCount = 1;
            } else {
                currentImageCount = nextImageCount; 
            };
            newSRC = thumbs.find('#galleryThumb_'+currentImageCount).attr('src');
            newImage = thumbs.find('#galleryThumb_'+currentImageCount).clone().css('opacity',1).addClass(''+currentImageCount+'');
            calcHeight();
        });
    };
     
    // Finally, if useFlickr is true, download images and create UL structure before creating Gallery. Else, just create Gallery.
    if ( options.useFlickr == 'true' ) {
        obj.flickr({     
            api_key: options.flickrAPIKey,     
            type: 'photoset',
            photoset_id: options.photosetID,
            thumb_size: 'm',
            per_page: options.per_page,
            page: 1,
            callback: function(){ 
                makeGallery();
            }
        }); 
    }else {
    makeGallery();  
    };
  });
 };
})(jQuery);

แล้วก็ตัว pan zoom ที่หามาครับ
Code (JavaScript)

/**
 * Pan/Zoom - it's just a quick hack, so don't expect too much
 * @author Andrew Hedges, andrew@hedges.name
 * @created 2009-12-27 12:27:09
 * @license MIT
 * @usage $.panzoom();
 * @requires jQuery (tested with versions 1.3.2 and 1.4.0)
 */
 
;
(function ($) {
    var css, titles;
     
    // CSS to apply to elements on init
    css = {
        a   : {
            'position' : 'relative',
            'overflow' : 'hidden',
            'display'  : 'inline-block',
            'width'    : undefined,
            'height'   : undefined
        },
        img : {
            'position' : 'absolute',
            'top'      : '0px',
            'left'     : '0px'
        }
    };
     
    // title text to display onhover
    titles = {
        small : 'Click to zoom in.',
        large : 'Click to zoom out.'
    };
     
    /**
     * Convert an x/y for one size to the x/y for another size
     * @private
     * @param array size1 [width, height]
     * @param array size2 [width, height]
     * @param array xy    [x, y]
     * @return array [x, y]
     */
    function proportions_(size1, size2, xy) {
        return [Math.round(xy[0] / (size1[0] / size2[0])), Math.round(xy[1] / (size1[1] / size2[1]))];
    }
     
    /**
     * Is the image in its "large" state?
     * @private
     * @param jQuery object a Anchor element
     * @param jQuery object img Image element
     * @return boolean
     */
    function isLarge_(a, img) {
        return (img.width() > a.width());
    }
     
    /**
     * Get the x and y of the click within the element
     * @private
     * @param jQuery object el Clicked element
     * @param object evt Event object
     * @return array [x, y]
     */
    function getPoint_(el, evt) {
        var offset;
        offset = $(el).offset();
        return [evt.pageX - offset.left, evt.pageY - offset.top];
    }
     
    /**
     * Get the pixel coordinates of the image based on the current mouse event
     * @private
     * @param jQuery object a Anchor element
     * @param jQuery object img Image element
     * @param Event object evt
     * @return void
     */
    function getCoords_(a, img, evt) {
        var pt, xy, top, left;
         
        pt = getPoint_(a, evt);
        xy = proportions_(img.dimensions.small, img.dimensions.large, pt);
         
        top  = (0 - (xy[1] - pt[1])) + 'px';
        left = (0 - (xy[0] - pt[0])) + 'px';
         
        return [left, top];
    }
     
    /**
     * Apply CSS, if not already applied
     * @private
     * @param jQuery object a   Anchor element
     * @param jQuery object img Image element
     * @return void
     */
    function applyCSS_(a, img) {
        // only apply the CSS if it hasn't already been applied
        if (true !== img.applied_) {
            css.a.width  = img.dimensions.small[0] + 'px';
            css.a.height = img.dimensions.small[1] + 'px';
             
            a.css(css.a);
            img.css(css.img);
             
            // store the fact that the styles have been applied
            img.applied_ = true;
        }
    }
     
    /**
     * Pan
     * @private
     * @param Event object evt
     * @return void
     */
    function move_(evt) {
        var a, img, coords;
         
        // get element references
        a   = evt.data.a;
        img = evt.data.img;
         
        // get new position
        coords = getCoords_(a, img, evt);
         
        // change position
        img.css({
            top  : coords[1],
            left : coords[0]
        });
         
        // disable browser's built-in behavior
        evt.preventDefault();
    }
     
    /**
     * Scale image to the larger size
     * @private
     * @param jQuery object a   Anchor element
     * @param jQuery object img Image element
     * @param Event object evt
     * @return void
     */
    function scaleUp_(a, img, evt) {
        var coords;
         
        coords   = getCoords_(a, img, evt);
         
        img.animate({
            top    : coords[1],
            left   : coords[0],
            width  : img.dimensions.large[0],
            height : img.dimensions.large[1]
        }, 'fast', function () {
            a
                .bind('mousemove', {a : a, img : img}, move_) // enable panning
                .attr('title', titles.large)
            ;
        });
         
        // swap source while it's enlargenating
        img.attr('src', img.srcs.large);
    }
     
    /**
     * Scale image back to original size
     * @private
     * @param jQuery object a   Anchor element
     * @param jQuery object img Image element
     * @return void
     */
    function scaleDown_(a, img) {
        img.animate({
            top    : '0px',
            left   : '0px',
            width  : img.dimensions.small[0],
            height : img.dimensions.small[1]
        }, 'fast', function () {
            a
                .unbind('mousemove', move_) // disable panning
                .attr('title', titles.small)
            ;
             
            // swap source after it's done scaling down
            img.attr('src', img.srcs.small);
        });
    }
     
    /**
     * Initialize
     * @public
     * @param string selector CSS selector for the container for the image(s) (optional, defaults to ".panzoom a")
     * @return void
     */
    function panzoom(selector) {
        selector = selector || '.panzoom a';
         
        // act on each anchor element
        $.each($(selector), function (i, val) {
            var a, img, lrg;
             
            a   = $(this);
            img = $('img', a);
             
            // preload large image
            lrg = new Image();
             
            // enable click event once large image has loaded
            lrg.onload = function (evt) {
                img.srcs = {
                    small : img.attr('src'),
                    large : this.src
                };
                 
                img.dimensions = {
                    small : [img.width(), img.height()],
                    large : [lrg.width, lrg.height]
                };
                 
                a
                    .click(function (evt) {
                        applyCSS_(a, img);
                         
                        if (isLarge_(a, img)) {
                            scaleDown_(a, img);
                        }
                        else {
                            scaleUp_(a, img, evt);
                        }
                         
                        evt.preventDefault();
                    })
                    .attr('title', titles.small)
                ;
            };
             
            // start loading large image
            lrg.src = a[0].href;
        });
    }
     
    // expose public method
    $.extend({
        panzoom : panzoom
    });
})(jQuery);

อันนี้เดโม่ตัวแพนซูมครับ
http://dynamicdrive.com/dynamicindex4/imagepanner.htm
อันนี้ตัวสไลด์โชว์ครับ
http://www.userfriendlythinking.com/Blog/BlogDetail.asp?p1=7013&p2=101&p7=3001

Tag : jQuery

Date : 2012-01-26 22:09:27

By : kids

View : 1921

Reply : 1

No. 1

TC Admin

โพสกระทู้ ( 74,059 )
บทความ ( 838 )

code เยอะน่ะครับ ลองดูตัวนี้ครับ

Go to : ikikkok Banner Slide jQuery Plug-In 0.1 Beta

Date : 2012-01-27 10:57:49

By : webmaster

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : ต้องการซูมภาพในแกลลอรี่ สไลด์โชว์ครับ ช่วยแนะนำการเขียน jquery ด้วยครับ

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Registered : 109,038

document.write("<font color=996600>[PHP]</font>"); [PHP] ต้องการซูมภาพในแกลลอรี่ สไลด์โชว์ครับ ช่วยแนะนำการเขียน jquery ด้วยครับ

No. 1

ค้นหาข้อมูล

อัพโหลดแทรกรูปภาพ

Notice

[PHP] ต้องการซูมภาพในแกลลอรี่ สไลด์โชว์ครับ ช่วยแนะนำการเขียน jquery ด้วยครับ