I’ve researched during this morning, but couldn’t fix the problem, so, if anyone could help, thanks a lot!

I want to replace the atribute src of an image inside wordpress with jquery by clicking on a button, however I can’t.

the image to change SRC

<label for="id1">
<img src="<?php bloginfo( 'template_url' ) ?>/img/main-image.png" />
</label>

the buttons to click

<ul>
<li class="bt-color">
<img src="<?php bloginfo( 'template_url' ) ?>/img/blue.png" alt="blue">
</li>
<li class="bt-color">
<img src="<?php bloginfo( 'template_url' ) ?>/img/purple.png" alt="purple">
</li>
<li class="bt-color">
<img src="<?php bloginfo( 'template_url' ) ?>/img/pink.png" alt="pink">
</li>
</ul>

the code on jquery

/* offline code */   
$('.bt-color').click(function() {
    var alt = ($(this).children().attr('alt'));
    if ( alt === 'blue' ){
        $("label[for='id1']").children().attr('src', 'img/main-image-blue.png' );
    } else if ( alt === 'purple' ){
        $("label[for='id1']").children().attr('src', 'img/main-image-purple.png' );
    }
});

/* online with wordpress, my failed trial */   
jQuery('.bt-color').click(function() {
    var alt = (jQuery(this).children().attr('alt'));
    if ( alt === 'blue' ){
        jQuery("label[for='id1']").children().attr('src', '<?php bloginfo( 'template_url' ) ?>/img/main-image-blue.png' );
    } else if ( alt === 'purple' ){
        jQuery("label[for='id1']").children().attr('src', '<?php bloginfo( 'template_url' ) ?>/img/main-image-purple.png' );
    }
});

offline doing with html for tests works perfectly, however not on wordpress. Am I doing something wrong?

Thanks a lot!

https://plugins.trac.www.ads-software.com/browser/gallery-custom-links/trunk/mgcl_linker.php#L13

All values to be used for attributes must be escaped, e.g.

$potentialLinkNode->{'title'} = esc_attr( $title );
[...]
$potentialLinkNode->attr(  'title', esc_attr( $title )  );
[...]
[...] no-lightbox" title="' . esc_attr( $title ) . '" [...]

And for ensuring that the title contains the pure text, use <code>wp_strip_all_tags</code> on the title, e.g.
<pre><code>

$title = wp_strip_all_tags( get_the_title( $mediaId ) );

`
Newlines are in title attribute value should be allowed and supported now, hence the second argument for wp_strip_all_tags to also strip the newlines staid the default (false)-

The snippet below can be used as a replacement for the current JS in this plugin. It now uses the latest standard and work on all inputs including textareas.

jQuery(document).ready(function($){
$(“.disabled input”).prop(‘disabled’,true);
$(“.readonly input”).prop(“readonly”, true);
$(“.disabled textarea”).prop(‘disabled’,true);
$(“.readonly textarea”).prop(“readonly”, true);
});

Love the plugin, this is exactly what I needed!

I’m going to have a page with dozens of document galleries on top of one another, and I have all of them set to display 8 columns. Is there any way to change this column attribute to 4 columns for all galleries when the screen reaches a certain size?

My only idea for this right now is to duplicate every gallery on the page, put them below, change the columns to 4 for all of them, and then use a CSS addition like “@media only screen and (max-device-width: 480px)” and custom classes to hide the bottom (4 column) half on desktop/tablet and hide the top (8 column) half on mobile.

I know this would work, but I’m concerned that with the large number of galleries I’m putting on one page, making the user load all of them twice would make the page load slower. Is there any way to do this automatically?

Thanks a lot,
Collin
Empire Safe Company

1.0.9: Allow opting out of lazy load with “data-no-lazyload” attribute (Thanx wheresrhys)

Can you provide an example of this?

When I tried adding this attribute to an img tag, the img still lazy loads. There’s a conflict with this plugin and MagicZoom Plus and I need to disable lazy loading on one page.

<img src="https://local.marcusashley2016.com/wp-content/uploads/2013/05/Winter_homestead_30x46-1-500x324.jpg" class="img-responsive no-lazy wp-post-image" alt="Winter Homestead" data-no-lazyload="1" srcset="https://local.marcusashley2016.com/wp-content/uploads/2013/05/Winter_homestead_30x46-1-500x324.jpg 500w, https://local.marcusashley2016.com/wp-content/uploads/2013/05/Winter_homestead_30x46-1-525x340.jpg 525w, https://local.marcusashley2016.com/wp-content/uploads/2013/05/Winter_homestead_30x46-1-220x142.jpg 220w, https://local.marcusashley2016.com/wp-content/uploads/2013/05/Winter_homestead_30x46-1-260x168.jpg 260w, https://local.marcusashley2016.com/wp-content/uploads/2013/05/Winter_homestead_30x46-1-225x145.jpg 225w, https://local.marcusashley2016.com/wp-content/uploads/2013/05/Winter_homestead_30x46-1-e1415565187671.jpg 1000w" sizes="(max-width: 500px) 100vw, 500px" style="max-width: 500px; max-height: 325px;">

Any ideas?

Thanks!

Ist this possible? And how?

My setup is I’ve enabled users to post topics frontend (just like this form) but with the “img” quicktag enabled. So, users can insert an image link within the post.

My ultimate goal is to add a link to each image and the href linking to the images src.

So eg. my current output for images is <img src="link-to-image.jpg">

But what I’d like to achieve is <a href="link-to-image.jpg"><img src="link-to-image.jpg"></a>

My only luck so far was by using the regex code found here: https://www.ads-software.com/support/topic/add-code-before-each-image?replies=6

I’ve tried many different ways including functions like: image_send_to_editor, get_image_tag, $replacement, $pattern but nothing so far has made any changes to the image markup like it has with the regex code above.

I’ve updated this section of the code to add a span before image linking to the post thumbnail attachment, but how can i achieve to link each image to its full src within the post using this regex code:

// If we get any hits then put the code before and after the img tags
if ( $mh_matches ) {;
        for ( $mh_count = 0; $mh_count < count( $mh_matches[0] ); $mh_count++ )
                {
                // Old img tag
                $mh_old = $mh_matches[0][$mh_count];

                // Get the img URL, it's needed for the button code
                $mh_img_url = $mh_matches[1][$mh_count];

                // Put together the pinterest code to place before the img tag
                $mh_pinterest_code = '<span class="test"><a href="' . ( wp_get_attachment_url( get_post_thumbnail_id() ) ) . '">';

                // Replace before the img tag in the new string
                $mh_new = preg_replace( '/^/' , $mh_pinterest_code , $mh_old );
                // After the img tag
                $mh_new = preg_replace( '/$/' , '</a></span>' , $mh_new );

                // make the substitution
                $content = str_replace( $mh_old, $mh_new , $content );
                }
        }
return $content;
}

Full code here: https://pastebin.com/PJ9S4zWe

Thanks

Here’s the method I’m currently using by editing wp-includes/media.php:

function gallery_shortcode($attr) {
	global $post, $wp_locale;

	static $instance = 0;
	$instance++;

        //KRG: Added for Arkmagia Gallery Shortcode.
	// Allow plugins/themes to override the default gallery attributes.
	$attr = apply_filters('post_gallery_attr', '', $attr);

	// Allow plugins/themes to override the default gallery template.
	$output = apply_filters('post_gallery', '', $attr);
	if ( $output != '' )
		return $output;
...

I then have a plugin to set the default params:

add_filter('post_gallery_attr', 'arkmagia_gallery_shortcode');

function arkmagia_gallery_shortcode($attr) {
	if ( !isset( $attr['link'] ) ) {
		$attr['link'] = 'file';
	}

	return $attr;
}

Though there is also another problem in that if I wanted any instances to link to actual attachment pages, there is no explicit ‘link’ attribute value for that…

Any thoughts? Thanks for reading!