WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Replace first image in post with gallery click (3 posts)

  1. nielsi
    Member
    Posted 3 years ago #

    I'm looking for a way to make a click in a default gallery not open the image file but replace the first image in the post with that file.

    Imagine a post that starts with an image and below that, say, 3 or 4 thumbnails from a gallery. All done with out-of-the-box WP/twentyeleven features. The idea is that if you click one of those thumbnails the first image in the post gets replaced with the enlarged version of the thumb you clicked (obviously the original first image needs to be among those thumbnails as well to be able to click back to that one after changes). This needs to work in seperate post pages but also in post showcases like the homepage or category pages.

    Now, I've been thinking I could alter the media.php and post-template.php to add rel attributes to gallery thumbnails and first post images to give them a postid reference, so that at a click of a thumbnail a javascript could replace the src of the correct related first image.

    But I'd rather stay clear of the WP core. Does anyone have suggestions on how to realize this? Are there plugins that do this that I haven't found? Could I use a filter? This is my second day on using WP so maybe I'm overlooking something obvious. But any help would be appreciated!

    FYI: I'd like to use this method to slim down the scroll length and increase load time of pages while still giving visitors the ability to quickly view several images of a post in a larger size. Without having to use self-themed or flashy galleries in every post.

  2. nielsi
    Member
    Posted 3 years ago #

    Maybe a clever (cross browser?) javascript could detect the parent-<article> tag of a clicked thumbnail and from there get the first <img> tag within that <article> tag to replace its src attribute with the href target of the thumbnail?

    Although I foresee problems with the set width and height attributes of the <img> tag...

  3. nielsi
    Member
    Posted 3 years ago #

    to whom it may concern. I wrote this javascript, quick and dirty but it works for now. If a gallery item gets clicked, the first image in the post gets replaced by the clicked image. Works in single posts and overviews. Tested in IE, FF and Safari.

    <script type="text/javascript">
    	window.onclick = hrefEvent;
    
    	function hrefEvent(e){
    		var targ;
    		if (!e) var e = window.event;
    		if (e.target) targ = e.target;
    		else if (e.srcElement) targ = e.srcElement;
    		if (targ.nodeType == 3) // defeat Safari bug
    		targ = targ.parentNode;
    
    		if (targ.parentNode.parentNode.className == 'gallery-icon') {
    			var article = targ.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
    			if (article.tagName == 'ARTICLE') {
    
    				article.getElementsByTagName("IMG")[0].src = targ.parentNode.href;
    				article.getElementsByTagName("IMG")[0].alt = targ.parentNode.alt;
    				return false; /* needed to avoid the href execution */
    			}
    
    		}
    
    	}
    </script>

Topic Closed

This topic has been closed to new replies.

About this Topic