Переместить из div в div
Здравствуйте, не могу точно сформулировать вопрос, поэтому опишу суть задачи, которую хочу решить.
Есть <div class="rg-image-wrapper"> <div class="rg-image-nav"> <a href="#" class="rg-image-nav-prev">Previous Image</a> <a href="#" class="rg-image-nav-next">Next Image</a> </div> <div class="rg-image"><img src="images/1.jpg"></div> <div class="rg-loading" style="display: none;"> </div> </div> Мне необходимо <div class="rg-image-nav"> <a href="#" class="rg-image-nav-prev">Previous Image</a> <a href="#" class="rg-image-nav-next">Next Image</a> </div>переместить так, чтобы получилось следующие <div class="rg-image-wrapper"> <div class="rg-image"> <div class="rg-image-nav"> <a href="#" class="rg-image-nav-prev">Previous Image</a> <a href="#" class="rg-image-nav-next">Next Image</a> </div> <img src="images/1.jpg"></div> <div class="rg-loading" style="display: none;"> </div> </div> Это все выводиться через код js, в нем я еще ничего не понимаю, поэтому загоню весь код. Пробовал по разному сформулировать все не то. $(function() { // ======================= imagesLoaded Plugin =============================== // [url]https://github.com/desandro/imagesloaded[/url] // $('#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 $.fn.imagesLoaded = function( callback ) { var $images = this.find('img'), len = $images.length, _this = this, blank = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='; function triggerCallback() { callback.call( _this, $images ); } function imgLoaded() { if ( --len <= 0 && this.src !== blank ){ setTimeout( triggerCallback ); $images.unbind( 'load error', imgLoaded ); } } if ( !len ) { triggerCallback(); } $images.bind( 'load error', imgLoaded ).each( function() { // cached images don't fire load sometimes, so we reset src. if (this.complete || this.complete === undefined){ var src = this.src; // webkit hack from [url]http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f[/url] // data uri bypasses webkit log warning (thx doug jones) this.src = blank; this.src = src; } }); return this; }; // gallery container var $rgGallery = $('#rg-gallery'), // carousel container $esCarousel = $rgGallery.find('div.es-carousel-wrapper'), // the carousel items $items = $esCarousel.find('ul > li'), // total number of items itemsCount = $items.length; Gallery = (function() { // index of the current item var current = 0, // mode : carousel || fullview mode = 'carousel', // control if one image is being loaded anim = false, init = function() { // (not necessary) preloading the images here... $items.add('<img src="images/ajax-loader.gif"/><img src="images/black.png"/>').imagesLoaded( function() { // add options _addViewModes(); // add large image wrapper _addImageWrapper(); // show first image _showImage( $items.eq( current ) ); }); // initialize the carousel _initCarousel(); }, _initCarousel = function() { // we are using the elastislide plugin: // [url]http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/[/url] $esCarousel.show().elastislide({ imageW : 65, onClick : function( $item ) { if( anim ) return false; anim = true; // on click show image _showImage($item); // change current current = $item.index(); } }); // set elastislide's current to current $esCarousel.elastislide( 'setCurrent', current ); }, _addViewModes = function() { // top right buttons: hide / show carousel var $viewfull = $('<a href="#" class="rg-view-full"></a>'), $viewthumbs = $('<a href="#" class="rg-view-thumbs rg-view-selected"></a>'); $rgGallery.prepend( $('<div class="rg-view"/>').append( $viewfull ).append( $viewthumbs ) ); $viewfull.bind('click.rgGallery', function( event ) { $esCarousel.elastislide( 'destroy' ).hide(); $viewfull.addClass('rg-view-selected'); $viewthumbs.removeClass('rg-view-selected'); mode = 'fullview'; return false; }); $viewthumbs.bind('click.rgGallery', function( event ) { _initCarousel(); $viewthumbs.addClass('rg-view-selected'); $viewfull.removeClass('rg-view-selected'); mode = 'carousel'; return false; }); }, _addImageWrapper= function() { // adds the structure for the large image and the navigation buttons (if total items > 1) // also initializes the navigation events $('#img-wrapper-tmpl').tmpl( {itemsCount : itemsCount} ).appendTo( $rgGallery ); if( itemsCount > 1 ) { // addNavigation var $navPrev = $rgGallery.find('a.rg-image-nav-prev'), $navNext = $rgGallery.find('a.rg-image-nav-next'), $imgWrapper = $rgGallery.find('div.rg-image'); $navPrev.bind('click.rgGallery', function( event ) { _navigate( 'left' ); return false; }); $navNext.bind('click.rgGallery', function( event ) { _navigate( 'right' ); return false; }); // add touchwipe events on the large image wrapper $imgWrapper.touchwipe({ wipeLeft : function() { _navigate( 'right' ); }, wipeRight : function() { _navigate( 'left' ); }, preventDefaultEvents: false }); $(document).bind('keyup.rgGallery', function( event ) { if (event.keyCode == 39) _navigate( 'right' ); else if (event.keyCode == 37) _navigate( 'left' ); }); } }, _navigate = function( dir ) { // navigate through the large images if( anim ) return false; anim = true; if( dir === 'right' ) { if( current + 1 >= itemsCount ) current = 0; else ++current; } else if( dir === 'left' ) { if( current - 1 < 0 ) current = itemsCount - 1; else --current; } _showImage( $items.eq( current ) ); }, _showImage = function( $item ) { // shows the large image that is associated to the $item var $loader = $rgGallery.find('div.rg-loading').show(); $items.removeClass('selected'); $item.addClass('selected'); var $thumb = $item.find('img'), largesrc = $thumb.data('large'), title = $thumb.data('description'); $('<img/>').load( function() { $rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>'); if( title ) $rgGallery.find('div.rg-caption').show().children('p').empty().text( title ); $loader.hide(); if( mode === 'carousel' ) { $esCarousel.elastislide( 'reload' ); $esCarousel.elastislide( 'setCurrent', current ); } anim = false; }).attr( 'src', largesrc ); }; return { init : init }; })(); Gallery.init(); }); |
Цитата:
<!DOCTYPE html> <html> <head> <script src='http://code.jquery.com/jquery-latest.js'></script> <!-- <link rel='stylesheet type=text/css href=tmp.css' /> --> <style type='text/css'> * { margin: 10px; } .rg-image { border: 1px solid; } .rg-image-nav { border: 1px solid red; } </style> <script type='text/javascript'> $(function (){ $('button').click(function (){ $('.rg-image').prepend($('.rg-image-nav')); }); }); </script> </head> <body> <div class="rg-image-wrapper"> <div class="rg-image-nav"> <a href="#" class="rg-image-nav-prev">Previous Image</a> <a href="#" class="rg-image-nav-next">Next Image</a> </div> <div class="rg-image"> <img src="http://javascript.ru/forum/images/smilies/smile.gif"> </div> <div class="rg-loading" style="display: none;"> </div> </div> <button>Go</button> </body> </html> |
Спасибо за ответ, но суть в том, что надо просто в js, что то подредактировать, чтобы вывод блоков был не
<div class="rg-image-wrapper"> <div class="rg-image-nav"> <a href="#" class="rg-image-nav-prev">Previous Image</a> <a href="#" class="rg-image-nav-next">Next Image</a> </div> <div class="rg-image"><img src="images/1.jpg"></div> <div class="rg-loading" style="display: none;"> </div> </div> а такой <div class="rg-image-wrapper"> <div class="rg-image"> <div class="rg-image-nav"> <a href="#" class="rg-image-nav-prev">Previous Image</a> <a href="#" class="rg-image-nav-next">Next Image</a> </div> <img src="images/1.jpg"></div> <div class="rg-loading" style="display: none;"> </div> </div> Если это трудно, то напишите пожалуйста об этом буду думать как сделать по другому! |
Всем спасибо, кто прочитал, задачу решил с помощью правки css и присвоение позиций.
|
Часовой пояс GMT +3, время: 00:16. |