Jump to content

anutti

Newbie
 View Profile  See their activity

  • Posts

    22

  • Joined

  • Last visited

anutti's Achievements

Explorer

Explorer (1/14)

0

Reputation

  1. anutti
    вобщем нужно просто строку с mp4 писать второй а не первой как в примере.... Наверное наитупейшее решение, но у меня работает )
  2. anutti
    Добрый день! Подскажите, как сделать чтобы .mp4 проигрывался только в эксплорере, а в остальных браузерах webm? <video id="myVideo" width="320" height="176" controls> <source src="mov_bbb.mp4" type="video/mp4"> <source src="mov_bbb.webm" type="video/webm"> Your browser does not support HTML5 video.</video>Спасибо.
  3. anutti
    Что-то не получилось... видимо у меня руки кривые ( Я сделала как вверху, только пару моментов поправила, вроди работает но по коду конечно ужасно у меня выглядит . Все равно, Вам спасибо большое за помощь )
  4. anutti
    Спасибо за помощь, еще один вопрос, у меня на страничке 3 видео, а эта кнопка срабатывает только на первом, хотя я ID по разному называю Не знаю как сделать красивее код (пример для 2-х)... когда одно работает прекрасно а когда 3 только у последнего <video muted id="myVideo1" width="320" height="176" controls> <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4"> <source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video.</video><br><button id="play1">Play</button><video muted id="myVideo2" width="320" height="176" controls> <source src="http://www.w3schools.com/tags/mov_bbb.mp4" type="video/mp4"> <source src="http://www.w3schools.com/tags/mov_bbb.ogg" type="video/ogg"> Your browser does not support HTML5 video.</video><br><button id="play2">Play</button>_______<script>var video = document.getElementById('myVideo1');var playbutton = document.getElementById("play1");playbutton.addEventListener("click", function (e) { // Toggle between play and pause based on the paused property if (video.paused) { video.play(); } else { video.pause(); }}, false);video.addEventListener("play", function () { playbutton.innerHTML = "Pause";}, false);video.addEventListener("pause", function () { playbutton.innerHTML = "Play";}, false);</script><script>var video = document.getElementById('myVideo2');var playbutton = document.getElementById("play2");playbutton.addEventListener("click", function (e) { // Toggle between play and pause based on the paused property if (video.paused) { video.play(); } else { video.pause(); }}, false);video.addEventListener("play", function () { playbutton.innerHTML = "Pause";}, false);video.addEventListener("pause", function () { playbutton.innerHTML = "Play";}, false);</script>
  5. anutti
    Да спасибо большое! Все получилось )
  6. anutti
    не совсем поняла где это применить... <!DOCTYPE html> <html> <body> <button onclick="RunVideo()" id="playpause" type="button">Play</button><br><video muted id="myVideo" width="320" height="176" controls> <source src="http://www.w3schools.com/tags/mov_bbb.mp4"type="video/mp4"> <source src="http://www.w3schools.com/tags/mov_bbb.ogg"type="video/ogg"> Your browser does not support HTML5 video.</video><script>var controls = { video: $("#myVideo"), playpause: $("#playpause") };function RunVideo() { var video = controls.video[0]; controls.playpause.click(function(){ if (video.paused) { video.play(); $(this).text("Pause"); } else { video.pause(); $(this).text("Play"); } $(this).toggleClass("paused"); });};</script> </body> </html> не работает (((
  7. anutti
    Добрый день! Подскажите как сделать запуск видео по отдельной кнопке ? Как и в этом примере (он для запуска и остановки звука) http://jsfiddle.net/248yc2jx/, мне нужно то же самое но для видео. Спасибо.
  8. anutti
    Спасибо большое ! )
  9. anutti
    Добрый день! Как в этом примере http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_av_prop_muted сделать чтобы было не 2 кнопки а одна и текст на ней менялся, то есть когда звук работает отображалось Mute sound, а когда звук отключен Enable sound Спасибо. и как сделать чтобы изначально было без звука
  10. anutti
    Спасибо большое )
  11. anutti
    и еще, можно ли сделать чтобы информация и картинки в раскрывашках подгружались по их открытию, а не сразу со всей страницей ?
  12. anutti
    Добрый день, при нажатии на ссылку открывается некий блок, таких ссылок с блоками может быть несколько, как сделать чтобы при нажатии на любую другую закрытую ссылку предыдущий раскрытый блок сворачивался, а выбранный раскрывался? Вот пример http://jsfiddle.net/driver/PD3gk/light/ Спасибо.
  13. anutti
    да, текст сообщения почему-то не отображается ( вот еще раз ссылка текст дублирую... Скрипт рассчитывает высоту открываемого окошка в зависимости от высоты окна браузера, а мне нужно чтобы высота окошка равнялась высоте содержимого, у меня содержимое это картинка... Помогите, я уже по разному пыталась, ни чего не выходит. сам скрипт такой: /** debouncedresize: special jQuery event that happens once after a window resize** latest version and complete README available on Github:* https://github.com/louisremi/jquery-smartresize/blob/master/jquery.debouncedresize.js** Copyright 2011 @louis_remi* Licensed under the MIT license.*/var $event = $.event,$special,resizeTimeout;$special = $event.special.debouncedresize = { setup: function() { $( this ).on( "resize", $special.handler ); }, teardown: function() { $( this ).off( "resize", $special.handler ); }, handler: function( event, execAsap ) { // Save the context var context = this, args = arguments, dispatch = function() { // set correct event type event.type = "debouncedresize"; $event.dispatch.apply( context, args ); }; if ( resizeTimeout ) { clearTimeout( resizeTimeout ); } execAsap ? dispatch() : resizeTimeout = setTimeout( dispatch, $special.threshold ); }, threshold: 250};// ======================= imagesLoaded Plugin ===============================// https://github.com/desandro/imagesloaded// $('#my-container').imagesLoaded(myFunction)// execute a callback when all images have loaded.// needed because .load() doesn't work on cached images// callback function gets image collection as argument// this is the container// original: MIT license. Paul Irish. 2010.// contributors: Oren Solomianik, David DeSandro, Yiannis Chatzikonstantinou// blank image data-uri bypasses webkit log warning (thx doug jones)var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';$.fn.imagesLoaded = function( callback ) { var $this = this, deferred = $.isFunction($.Deferred) ? $.Deferred() : 0, hasNotify = $.isFunction(deferred.notify), $images = $this.find('img').add( $this.filter('img') ), loaded = [], proper = [], broken = []; // Register deferred callbacks if ($.isPlainObject(callback)) { $.each(callback, function (key, value) { if (key === 'callback') { callback = value; } else if (deferred) { deferred[key](value); } }); } function doneLoading() { var $proper = $(proper), $broken = $(broken); if ( deferred ) { if ( broken.length ) { deferred.reject( $images, $proper, $broken ); } else { deferred.resolve( $images ); } } if ( $.isFunction( callback ) ) { callback.call( $this, $images, $proper, $broken ); } } function imgLoaded( img, isBroken ) { // don't proceed if BLANK image, or image is already loaded if ( img.src === BLANK || $.inArray( img, loaded ) !== -1 ) { return; } // store element in loaded images array loaded.push( img ); // keep track of broken and properly loaded images if ( isBroken ) { broken.push( img ); } else { proper.push( img ); } // cache image and its state for future calls $.data( img, 'imagesLoaded', { isBroken: isBroken, src: img.src } ); // trigger deferred progress method if present if ( hasNotify ) { deferred.notifyWith( $(img), [ isBroken, $images, $(proper), $(broken) ] ); } // call doneLoading and clean listeners if all images are loaded if ( $images.length === loaded.length ){ setTimeout( doneLoading ); $images.unbind( '.imagesLoaded' ); } } // if no images, trigger immediately if ( !$images.length ) { doneLoading(); } else { $images.bind( 'load.imagesLoaded error.imagesLoaded', function( event ){ // trigger imgLoaded imgLoaded( event.target, event.type === 'error' ); }).each( function( i, el ) { var src = el.src; // find out if this image has been already checked for status // if it was, and src has not changed, call imgLoaded on it var cached = $.data( el, 'imagesLoaded' ); if ( cached && cached.src === src ) { imgLoaded( el, cached.isBroken ); return; } // if complete is true and browser supports natural sizes, try // to check for image status manually if ( el.complete && el.naturalWidth !== undefined ) { imgLoaded( el, el.naturalWidth === 0 || el.naturalHeight === 0 ); return; } // cached images don't fire load sometimes, so we reset src, but only when // dealing with IE, or image is complete (loaded) and failed manual check // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f if ( el.readyState || el.complete ) { el.src = BLANK; el.src = src; } }); } return deferred ? deferred.promise( $this ) : $this;};var Grid = (function() { // list of items var $grid = $( '#og-grid' ), // the items $items = $grid.children( 'li' ), // current expanded item's index current = -1, // position (top) of the expanded item // used to know if the preview will expand in a different row previewPos = -1, // extra amount of pixels to scroll the window scrollExtra = 0, // extra margin when expanded (between preview overlay and the next items) marginExpanded = -68, $window = $( window ), winsize, $body = $( 'html, body' ), // transitionend events transEndEventNames = { 'WebkitTransition' : 'webkitTransitionEnd', 'MozTransition' : 'transitionend', 'OTransition' : 'oTransitionEnd', 'msTransition' : 'MSTransitionEnd', 'transition' : 'transitionend' }, transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ], // support for csstransitions support = Modernizr.csstransitions, // default settings settings = { minHeight : 500, maxHeight : 840, speed : 350, easing : 'ease' }; function init( config ) { // the settings.. settings = $.extend( true, {}, settings, config ); // preload all images $grid.imagesLoaded( function() { // save item´s size and offset saveItemInfo( true ); // get window´s size getWinSize(); // initialize some events initEvents(); } ); } // add more items to the grid. // the new items need to appended to the grid. // after that call Grid.addItems(theItems); function addItems( $newitems ) { $items = $items.add( $newitems ); $newitems.each( function() { var $item = $( this ); $item.data( { offsetTop : $item.offset().top, height : $item.height() } ); } ); initItemsEvents( $newitems ); } // saves the item´s offset top and height (if saveheight is true) function saveItemInfo( saveheight ) { $items.each( function() { var $item = $( this ); $item.data( 'offsetTop', $item.offset().top ); if( saveheight ) { $item.data( 'height', $item.height() ); } } ); } function initEvents() { // when clicking an item, show the preview with the item´s info and large image. // close the item if already expanded. // also close if clicking on the item´s cross initItemsEvents( $items ); // on window resize get the window´s size again // reset some values.. $window.on( 'debouncedresize', function() { scrollExtra = 0; previewPos = -1; // save item´s offset saveItemInfo(); getWinSize(); var preview = $.data( this, 'preview' ); if( typeof preview != 'undefined' ) { hidePreview(); } } ); } function initItemsEvents( $items ) { $items.on( 'click', 'span.og-close', function() { hidePreview(); return false; } ).children( 'a' ).on( 'click', function(e) { var $item = $( this ).parent(); // check if item already opened current === $item.index() ? hidePreview() : showPreview( $item ); return false; } ); } function getWinSize() { winsize = { width : $window.width(), height : $window.height() }; } function showPreview( $item ) { var preview = $.data( this, 'preview' ), // item´s offset top position = $item.data( 'offsetTop' ); scrollExtra = 0; // if a preview exists and previewPos is different (different row) from item´s top then close it if( typeof preview != 'undefined' ) { // not in the same row if( previewPos !== position ) { // if position > previewPos then we need to take te current preview´s height in consideration when scrolling the window if( position > previewPos ) { scrollExtra = preview.height; } hidePreview(); } // same row else { preview.update( $item ); return false; } } // update previewPos previewPos = position; // initialize new preview for the clicked item preview = $.data( this, 'preview', new Preview( $item ) ); // expand preview overlay preview.open(); } function hidePreview() { current = -1; var preview = $.data( this, 'preview' ); preview.close(); $.removeData( this, 'preview' ); } // the preview obj / overlay function Preview( $item ) { this.$item = $item; this.expandedIdx = this.$item.index(); this.create(); this.update(); } Preview.prototype = { create : function() { // create Preview structure: this.$title = $( '<h3></h3>' ); this.$description = $( '<p></p>' ); this.$href = $( '' ); this.$details = $( '<div class="og-details"></div>' ).append( this.$title, this.$description, this.$href ); this.$loading = $( '<div class="og-loading"></div>' ); this.$fullimage = $( '<div class="og-fullimg"></div>' ).append( this.$loading ); this.$closePreview = $( '<span class="og-close"></span>' ); this.$previewInner = $( '<div class="og-expander-inner"></div>' ).append( this.$closePreview, this.$fullimage, this.$details ); this.$previewEl = $( '<div class="og-expander"></div>' ).append( this.$previewInner ); // append preview element to the item this.$item.append( this.getEl() ); // set the transitions for the preview and the item if( support ) { this.setTransition(); } }, update : function( $item ) { if( $item ) { this.$item = $item; } // if already expanded remove class "og-expanded" from current item and add it to new item if( current !== -1 ) { var $currentItem = $items.eq( current ); $currentItem.removeClass( 'og-expanded' ); this.$item.addClass( 'og-expanded' ); // position the preview correctly this.positionPreview(); } // update current value current = this.$item.index(); // update preview´s content var $itemEl = this.$item.children( 'a' ), eldata = { href : $itemEl.attr( 'href' ), largesrc : $itemEl.data( 'largesrc' ), title : $itemEl.data( 'title' ), description : $itemEl.data( 'description' ) }; this.$title.html( eldata.title ); this.$description.html( eldata.description ); this.$href.attr( 'href', eldata.href ); var self = this; // remove the current image in the preview if( typeof self.$largeImg != 'undefined' ) { self.$largeImg.remove(); } // preload large image and add it to the preview // for smaller screens we don´t display the large image (the media query will hide the fullimage wrapper) if( self.$fullimage.is( ':visible' ) ) { this.$loading.show(); $( '<img/>' ).load( function() { var $img = $( this ); if( $img.attr( 'src' ) === self.$item.children('a').data( 'largesrc' ) ) { self.$loading.hide(); self.$fullimage.find( 'img' ).remove(); self.$largeImg = $img.fadeIn( 350 ); self.$fullimage.append( self.$largeImg ); } } ).attr( 'src', eldata.largesrc ); } }, open : function() { setTimeout( $.proxy( function() { // set the height for the preview and the item this.setHeights(); // scroll to position the preview in the right place this.positionPreview(); }, this ), 25 ); }, close : function() { var self = this, onEndFn = function() { if( support ) { $( this ).off( transEndEventName ); } self.$item.removeClass( 'og-expanded' ); self.$previewEl.remove(); }; setTimeout( $.proxy( function() { if( typeof this.$largeImg !== 'undefined' ) { this.$largeImg.fadeOut( 'fast' ); } this.$previewEl.css( 'height', 0 ); // the current expanded item (might be different from this.$item) var $expandedItem = $items.eq( this.expandedIdx ); $expandedItem.css( 'height', $expandedItem.data( 'height' ) ).on( transEndEventName, onEndFn ); if( !support ) { onEndFn.call(); } }, this ), 25 ); return false; }, calcHeight : function() { var heightPreview = winsize.height - this.$item.data( 'height' ) - marginExpanded, itemHeight = winsize.height; if( heightPreview < settings.minHeight ) { heightPreview = settings.minHeight; itemHeight = settings.minHeight + this.$item.data( 'height' ) + marginExpanded; } if( heightPreview > settings.maxHeight ) { heightPreview = settings.maxHeight; itemHeight = settings.maxHeight; } this.height = heightPreview; this.itemHeight = itemHeight; }, setHeights : function() { var self = this, onEndFn = function() { if( support ) { self.$item.off( transEndEventName ); } self.$item.addClass( 'og-expanded' ); }; this.calcHeight(); this.$previewEl.css( 'height', this.height ); this.$item.css( 'height', this.itemHeight ).on( transEndEventName, onEndFn ); if( !support ) { onEndFn.call(); } }, positionPreview : function() { // scroll page // case 1 : preview height + item height fits in window´s height // case 2 : preview height + item height does not fit in window´s height and preview height is smaller than window´s height // case 3 : preview height + item height does not fit in window´s height and preview height is bigger than window´s height var position = this.$item.data( 'offsetTop' ), previewOffsetT = this.$previewEl.offset().top - scrollExtra, scrollVal = this.height + this.$item.data( 'height' ) + marginExpanded <= winsize.height ? position : this.height < winsize.height ? previewOffsetT - ( winsize.height - this.height ) : previewOffsetT; $body.animate( { scrollTop : scrollVal }, settings.speed ); }, setTransition : function() { this.$previewEl.css( 'transition', 'height ' + settings.speed + 'ms ' + settings.easing ); this.$item.css( 'transition', 'height ' + settings.speed + 'ms ' + settings.easing ); }, getEl : function() { return this.$previewEl; } } return { init : init, addItems : addItems };})();сам html <ul id="og-grid" class="og-grid"><li>...</li><li> <a data-largesrc="" data-title=" " data-description=" "> <img src="images/exp/but.jpg" alt="img01"/> <!--это маленькая картинка на которую нажимают--> </a> <div class="info"> <img src="images/img001.png" class="pic" alt="img01"/> <!--высота открываемого окна должна равняться высоте этой картинки--> </div> </li><li>...</li> Спасибо всем кто откликнется.
  14. anutti
    Добрый день! Помогите исправить скрипт, Вот пример работы скрипта http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/ Скрипт рассчитывает высоту открываемого окошка в зависимости от высоты окна браузера, а мне нужно чтобы высота окошка равнялась высоте содержимого, у меня содержимое это картинка... Помогите, я уже по разному пыталась, ни чего не выходит. сам скрипт такой: /** debouncedresize: special jQuery event that happens once after a window resize** latest version and complete README available on Github:* https://github.com/louisremi/jquery-smartresize/blob/master/jquery.debouncedresize.js** Copyright 2011 @louis_remi* Licensed under the MIT license.*/var $event = $.event,$special,resizeTimeout;$special = $event.special.debouncedresize = { setup: function() { $( this ).on( "resize", $special.handler ); }, teardown: function() { $( this ).off( "resize", $special.handler ); }, handler: function( event, execAsap ) { // Save the context var context = this, args = arguments, dispatch = function() { // set correct event type event.type = "debouncedresize"; $event.dispatch.apply( context, args ); }; if ( resizeTimeout ) { clearTimeout( resizeTimeout ); } execAsap ? dispatch() : resizeTimeout = setTimeout( dispatch, $special.threshold ); }, threshold: 250};// ======================= imagesLoaded Plugin ===============================// https://github.com/desandro/imagesloaded// $('#my-container').imagesLoaded(myFunction)// execute a callback when all images have loaded.// needed because .load() doesn't work on cached images// callback function gets image collection as argument// this is the container// original: MIT license. Paul Irish. 2010.// contributors: Oren Solomianik, David DeSandro, Yiannis Chatzikonstantinou// blank image data-uri bypasses webkit log warning (thx doug jones)var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';$.fn.imagesLoaded = function( callback ) { var $this = this, deferred = $.isFunction($.Deferred) ? $.Deferred() : 0, hasNotify = $.isFunction(deferred.notify), $images = $this.find('img').add( $this.filter('img') ), loaded = [], proper = [], broken = []; // Register deferred callbacks if ($.isPlainObject(callback)) { $.each(callback, function (key, value) { if (key === 'callback') { callback = value; } else if (deferred) { deferred[key](value); } }); } function doneLoading() { var $proper = $(proper), $broken = $(broken); if ( deferred ) { if ( broken.length ) { deferred.reject( $images, $proper, $broken ); } else { deferred.resolve( $images ); } } if ( $.isFunction( callback ) ) { callback.call( $this, $images, $proper, $broken ); } } function imgLoaded( img, isBroken ) { // don't proceed if BLANK image, or image is already loaded if ( img.src === BLANK || $.inArray( img, loaded ) !== -1 ) { return; } // store element in loaded images array loaded.push( img ); // keep track of broken and properly loaded images if ( isBroken ) { broken.push( img ); } else { proper.push( img ); } // cache image and its state for future calls $.data( img, 'imagesLoaded', { isBroken: isBroken, src: img.src } ); // trigger deferred progress method if present if ( hasNotify ) { deferred.notifyWith( $(img), [ isBroken, $images, $(proper), $(broken) ] ); } // call doneLoading and clean listeners if all images are loaded if ( $images.length === loaded.length ){ setTimeout( doneLoading ); $images.unbind( '.imagesLoaded' ); } } // if no images, trigger immediately if ( !$images.length ) { doneLoading(); } else { $images.bind( 'load.imagesLoaded error.imagesLoaded', function( event ){ // trigger imgLoaded imgLoaded( event.target, event.type === 'error' ); }).each( function( i, el ) { var src = el.src; // find out if this image has been already checked for status // if it was, and src has not changed, call imgLoaded on it var cached = $.data( el, 'imagesLoaded' ); if ( cached && cached.src === src ) { imgLoaded( el, cached.isBroken ); return; } // if complete is true and browser supports natural sizes, try // to check for image status manually if ( el.complete && el.naturalWidth !== undefined ) { imgLoaded( el, el.naturalWidth === 0 || el.naturalHeight === 0 ); return; } // cached images don't fire load sometimes, so we reset src, but only when // dealing with IE, or image is complete (loaded) and failed manual check // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f if ( el.readyState || el.complete ) { el.src = BLANK; el.src = src; } }); } return deferred ? deferred.promise( $this ) : $this;};var Grid = (function() { // list of items var $grid = $( '#og-grid' ), // the items $items = $grid.children( 'li' ), // current expanded item's index current = -1, // position (top) of the expanded item // used to know if the preview will expand in a different row previewPos = -1, // extra amount of pixels to scroll the window scrollExtra = 0, // extra margin when expanded (between preview overlay and the next items) marginExpanded = -68, $window = $( window ), winsize, $body = $( 'html, body' ), // transitionend events transEndEventNames = { 'WebkitTransition' : 'webkitTransitionEnd', 'MozTransition' : 'transitionend', 'OTransition' : 'oTransitionEnd', 'msTransition' : 'MSTransitionEnd', 'transition' : 'transitionend' }, transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ], // support for csstransitions support = Modernizr.csstransitions, // default settings settings = { minHeight : 500, maxHeight : 840, speed : 350, easing : 'ease' }; function init( config ) { // the settings.. settings = $.extend( true, {}, settings, config ); // preload all images $grid.imagesLoaded( function() { // save item´s size and offset saveItemInfo( true ); // get window´s size getWinSize(); // initialize some events initEvents(); } ); } // add more items to the grid. // the new items need to appended to the grid. // after that call Grid.addItems(theItems); function addItems( $newitems ) { $items = $items.add( $newitems ); $newitems.each( function() { var $item = $( this ); $item.data( { offsetTop : $item.offset().top, height : $item.height() } ); } ); initItemsEvents( $newitems ); } // saves the item´s offset top and height (if saveheight is true) function saveItemInfo( saveheight ) { $items.each( function() { var $item = $( this ); $item.data( 'offsetTop', $item.offset().top ); if( saveheight ) { $item.data( 'height', $item.height() ); } } ); } function initEvents() { // when clicking an item, show the preview with the item´s info and large image. // close the item if already expanded. // also close if clicking on the item´s cross initItemsEvents( $items ); // on window resize get the window´s size again // reset some values.. $window.on( 'debouncedresize', function() { scrollExtra = 0; previewPos = -1; // save item´s offset saveItemInfo(); getWinSize(); var preview = $.data( this, 'preview' ); if( typeof preview != 'undefined' ) { hidePreview(); } } ); } function initItemsEvents( $items ) { $items.on( 'click', 'span.og-close', function() { hidePreview(); return false; } ).children( 'a' ).on( 'click', function(e) { var $item = $( this ).parent(); // check if item already opened current === $item.index() ? hidePreview() : showPreview( $item ); return false; } ); } function getWinSize() { winsize = { width : $window.width(), height : $window.height() }; } function showPreview( $item ) { var preview = $.data( this, 'preview' ), // item´s offset top position = $item.data( 'offsetTop' ); scrollExtra = 0; // if a preview exists and previewPos is different (different row) from item´s top then close it if( typeof preview != 'undefined' ) { // not in the same row if( previewPos !== position ) { // if position > previewPos then we need to take te current preview´s height in consideration when scrolling the window if( position > previewPos ) { scrollExtra = preview.height; } hidePreview(); } // same row else { preview.update( $item ); return false; } } // update previewPos previewPos = position; // initialize new preview for the clicked item preview = $.data( this, 'preview', new Preview( $item ) ); // expand preview overlay preview.open(); } function hidePreview() { current = -1; var preview = $.data( this, 'preview' ); preview.close(); $.removeData( this, 'preview' ); } // the preview obj / overlay function Preview( $item ) { this.$item = $item; this.expandedIdx = this.$item.index(); this.create(); this.update(); } Preview.prototype = { create : function() { // create Preview structure: this.$title = $( '<h3></h3>' ); this.$description = $( '<p></p>' ); this.$href = $( '' ); this.$details = $( '<div class="og-details"></div>' ).append( this.$title, this.$description, this.$href ); this.$loading = $( '<div class="og-loading"></div>' ); this.$fullimage = $( '<div class="og-fullimg"></div>' ).append( this.$loading ); this.$closePreview = $( '<span class="og-close"></span>' ); this.$previewInner = $( '<div class="og-expander-inner"></div>' ).append( this.$closePreview, this.$fullimage, this.$details ); this.$previewEl = $( '<div class="og-expander"></div>' ).append( this.$previewInner ); // append preview element to the item this.$item.append( this.getEl() ); // set the transitions for the preview and the item if( support ) { this.setTransition(); } }, update : function( $item ) { if( $item ) { this.$item = $item; } // if already expanded remove class "og-expanded" from current item and add it to new item if( current !== -1 ) { var $currentItem = $items.eq( current ); $currentItem.removeClass( 'og-expanded' ); this.$item.addClass( 'og-expanded' ); // position the preview correctly this.positionPreview(); } // update current value current = this.$item.index(); // update preview´s content var $itemEl = this.$item.children( 'a' ), eldata = { href : $itemEl.attr( 'href' ), largesrc : $itemEl.data( 'largesrc' ), title : $itemEl.data( 'title' ), description : $itemEl.data( 'description' ) }; this.$title.html( eldata.title ); this.$description.html( eldata.description ); this.$href.attr( 'href', eldata.href ); var self = this; // remove the current image in the preview if( typeof self.$largeImg != 'undefined' ) { self.$largeImg.remove(); } // preload large image and add it to the preview // for smaller screens we don´t display the large image (the media query will hide the fullimage wrapper) if( self.$fullimage.is( ':visible' ) ) { this.$loading.show(); $( '<img/>' ).load( function() { var $img = $( this ); if( $img.attr( 'src' ) === self.$item.children('a').data( 'largesrc' ) ) { self.$loading.hide(); self.$fullimage.find( 'img' ).remove(); self.$largeImg = $img.fadeIn( 350 ); self.$fullimage.append( self.$largeImg ); } } ).attr( 'src', eldata.largesrc ); } }, open : function() { setTimeout( $.proxy( function() { // set the height for the preview and the item this.setHeights(); // scroll to position the preview in the right place this.positionPreview(); }, this ), 25 ); }, close : function() { var self = this, onEndFn = function() { if( support ) { $( this ).off( transEndEventName ); } self.$item.removeClass( 'og-expanded' ); self.$previewEl.remove(); }; setTimeout( $.proxy( function() { if( typeof this.$largeImg !== 'undefined' ) { this.$largeImg.fadeOut( 'fast' ); } this.$previewEl.css( 'height', 0 ); // the current expanded item (might be different from this.$item) var $expandedItem = $items.eq( this.expandedIdx ); $expandedItem.css( 'height', $expandedItem.data( 'height' ) ).on( transEndEventName, onEndFn ); if( !support ) { onEndFn.call(); } }, this ), 25 ); return false; }, calcHeight : function() { var heightPreview = winsize.height - this.$item.data( 'height' ) - marginExpanded, itemHeight = winsize.height; if( heightPreview < settings.minHeight ) { heightPreview = settings.minHeight; itemHeight = settings.minHeight + this.$item.data( 'height' ) + marginExpanded; } if( heightPreview > settings.maxHeight ) { heightPreview = settings.maxHeight; itemHeight = settings.maxHeight; } this.height = heightPreview; this.itemHeight = itemHeight; }, setHeights : function() { var self = this, onEndFn = function() { if( support ) { self.$item.off( transEndEventName ); } self.$item.addClass( 'og-expanded' ); }; this.calcHeight(); this.$previewEl.css( 'height', this.height ); this.$item.css( 'height', this.itemHeight ).on( transEndEventName, onEndFn ); if( !support ) { onEndFn.call(); } }, positionPreview : function() { // scroll page // case 1 : preview height + item height fits in window´s height // case 2 : preview height + item height does not fit in window´s height and preview height is smaller than window´s height // case 3 : preview height + item height does not fit in window´s height and preview height is bigger than window´s height var position = this.$item.data( 'offsetTop' ), previewOffsetT = this.$previewEl.offset().top - scrollExtra, scrollVal = this.height + this.$item.data( 'height' ) + marginExpanded <= winsize.height ? position : this.height < winsize.height ? previewOffsetT - ( winsize.height - this.height ) : previewOffsetT; $body.animate( { scrollTop : scrollVal }, settings.speed ); }, setTransition : function() { this.$previewEl.css( 'transition', 'height ' + settings.speed + 'ms ' + settings.easing ); this.$item.css( 'transition', 'height ' + settings.speed + 'ms ' + settings.easing ); }, getEl : function() { return this.$previewEl; } } return { init : init, addItems : addItems };})();сам html <ul id="og-grid" class="og-grid"><li>...</li><li> <a data-largesrc="" data-title=" " data-description=" "> <img src="images/exp/but.jpg" alt="img01"/> <!--это маленькая картинка на которую нажимают--> </a> <div class="info"> <img src="images/img001.png" class="pic" alt="img01"/> <!--высота открываемого окна должна равняться высоте этой картинки--> </div> </li><li>...</li>по сути вот эти данные data-largesrc="" data-title=" " data-description=" " мне не нужны, их можно убрать.... но это не принципиально. Спасибо всем кто откликнется.
  15. anutti
    Решение найдено, спасибо всем за внимание )
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept