Ajax request

bozoemo
(@bozoemo)

9 years, 2 months ago
Hi,
First off, great plugin.

I am trying to launch the shortcode in ajax, only when the user gets to the bottom of the page (where the gallery is echoed in the template file, grabs image dynamically), the only issue is that the shortcode is rendered, but every height is set to 0 and therefore nothings shows up (but the html is all there when you check view source).

Maybe a conflicting AJAX call?

Here is my SCRIPT:
```
$.ajax({
 type : 'POST',
 url : frontendajax.ajaxurl,
 data : { 'action': 'galbottom' },
 success: function(data) {
   $('.single-post .galleryBottom').append(data);
 }
});
```
HEre is my function:
```
add_action( 'wp_ajax_galbottom', 'galbottom_callback' );
add_action( 'wp_ajax_nopriv_galbottom', 'galbottom_callback' );
function galbottom_callback() {
  echo do_shortcode('[gallery size="medium_large" link="file"]');
  die;
}
```
OR Do you think of any lazy load function to render only when needed.
- This topic was modified 9 years, 2 months ago by bozoemo.

Viewing 6 replies - 1 through 6 (of 6 total)

Thread Starter

(@bozoemo)

any news. ?

When I disable the plugin, the gallery shortcode is rendered. Really a bummer. Probably a callback function, but can’t figure out where and how.

Thanks to help

Thread Starter

bozoemo

(@bozoemo)

9 years, 2 months ago

Really, no one can help on this one? I can’t get my head over this one. Why is the plugin rendering everything as 0px of height?

Thread Starter

bozoemo

(@bozoemo)

9 years, 2 months ago

I’ve tried to call
$('.single-post .galleryBottom .dgwt-jg-gallery').justifiedGallery();

but it does not return the proper layout. I see the pics, but not justified script is run…

Thread Starter

bozoemo

(@bozoemo)

9 years, 2 months ago

Ok I am really close to it. I have managed to get the display out, but only the lightbox is not functionning now. Here is what I got so far.

setTimeout(function(){
  $('.single-post .galleryBottom .dgwt-jg-gallery').justifiedGallery({
    captions: false,
    margins: 10,
    rowHeight: 300,
    maxRowHeight:400,
    is_lightbox: 'yes',
    lastRow: 'justify'
  });
}, 50);

And I have this error in the console.
Resource interpreted as Document but transferred with MIME type image/jpeg:

This reply was modified 9 years, 2 months ago by bozoemo.
This reply was modified 9 years, 2 months ago by bozoemo.
This reply was modified 9 years, 2 months ago by bozoemo.

Thread Starter

bozoemo

(@bozoemo)

9 years, 2 months ago

Even tried
`$(‘.single-post .galleryBottom .dgwt-jg-gallery’).trigger(‘jg.complete’);’

after the gallery is loaded, but still no mouseover effect neither photoswipe action.

A little help at this point would be quite welcome.

Thread Starter

bozoemo

(@bozoemo)

9 years, 2 months ago

Nevermind, found the solution. I had to include the script, after the gallery was build:

 var $gallery = $( '.dgwt-jg-gallery' ),
		            					$item = $( '.dgwt-jg-item' );
										 $gallery.photoswipe();
										 $item.children( 'img' ).each( function () {
										   if ( typeof $( this ).attr( 'srcset' ) !== 'undefined' ) {
												$( this ).attr( 'data-jg-srcset', $( this ).attr( 'srcset' ) );
												$( this ).removeAttr( 'srcset' );
											}										} );										$gallery.on( 'jg.complete', function ( e ) {										$item.each( function ( ) {													$( this ).on( 'mouseenter mouseleave', function ( e ) {
														var $this = $( this ),
															width = $this.width( ),
															height = $this.height( );
														var x = ( e.pageX - $this.offset( ).left - ( width / 2 ) ) * ( width > height ? ( height / width ) : 1 ),
															y = ( e.pageY - $this.offset( ).top - ( height / 2 ) ) * ( height > width ? ( width / height ) : 1 );
														// top = 0, right = 1, bottom = 2, left = 3
														var dir_num = Math.round( ( ( ( Math.atan2( y, x ) * ( 180 / Math.PI ) ) + 180 ) / 90 ) + 3 ) % 4,
															directions = [ 'top', 'right', 'bottom', 'left' ];
														// If mouse enter
														if ( e.type === 'mouseenter' ) {
															// Remove all hover out classes
															$this.removeClass( function ( index, css ) {
																return ( css.match( /(^|\s)hover-out-\S+/g ) || [ ] ).join( ' ' );
															} );
															// Add in direction class
															$this.addClass( 'hover-in-' + directions[dir_num] );
														}
					
														// If mouse leave
														if ( e.type === 'mouseleave' ) {
															// Remove all hover in classes
															$this.removeClass( function ( index, css ) {
																return ( css.match( /(^|\s)hover-in-\S+/g ) || [ ] ).join( ' ' );
															} );
															// Add out direction class
															$this.addClass( 'hover-out-' + directions[dir_num] );
														}
													} );
												} );
					
											} ); // END .on method

Thanks anyway for the non-support

This reply was modified 9 years, 2 months ago by bozoemo.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Ajax request’ is closed to new replies.

Tags