WordPress.org

Ready to get started?Download WordPress

Forums

[Plugin: Arconix Portfolio Gallery] Adding Large Image View (2 posts)

  1. NRetherford
    Member
    Posted 1 year ago #

    (Sorry, I'm not sure if this is the right forum.) I've installed John Gardner's "Arconix Portfolio Gallery" plugin on my site to give it Quicksand functionality, and it works great. Right now, clicking on a thumbnail opens the image on its own in a new window.

    I'm trying to change it so that, when the thumbnail is clicked, a larger version of the image (and its related description) appears in a div at the top of the page. I'm not very familiar with javascript, but I was thinking I could integrate the image gallery code from Jeremy Keith's "Dom Scripting". However, I'm not sure where to put the code, or how to call the relevant wordpress/plugin elements.

    Here's the script I'm trying to add:

    window.onload = function() {
    	showPic();
    	prepareGallery();
    }
    
    function showPic(whichpic) {
    	if (!document.getElementById("placeholder")) return true;
    	var source = whichpic.getAttribute("href");
    	var placeholder = document.getElementById("placeholder");
    	placeholder.setAttribute("src",source);
    	if (!document.getElementById("description")) return false;
    	var text = whichPic.get_the_content() ?
    	whichPic.get_the_content() : "";
    	var description = document.getElementById("description");
    	description.firstChild.nodeValue = text;
    	return false;
    }
    
    function prepareGallery() {
    	if (!document.getElementsByTagName) return false;
    	if (!document.getElementByClassName) return false;
    	if (!document.getElementByClassName("arconix-portfolio-grid")) return false;
    	var gallery = document.getElementByClassName("arconix-portfolio-grid");
    	var links = gallery.getElementsByTagName("a");
    	for ( var i=0; i < links.length; i++) {
    		links[i].onclick = function() {
    			return showPic(this);
    		}
    	}
    }

    And the markup on the page itself:

    <div id="placeholder-wrap"><img id="placeholder" src="/wp-content/uploads/placeholder_temp.gif" alt="my image gallery" />
    <p id="description">Choose an image.</p></div>
    
    [portfolio thumb="thumbnail" heading="Filter"]

    The portfolio shortcode is for the arconix gallery. Finally, here is what the page looks like.

    Thank you! Any help is appreciated. (And thank you John, for the great plugin!)

  2. bcworkz
    Member
    Posted 1 year ago #

    You can keep javascript on a separate file. You link it into WP pages by using wp_enqueue_script() which must be in turn called from the action 'wp_enqueue_scripts'. This PHP code can be added to your theme's functions.php file, but you should consider creating a child theme to shield you changes from theme updates.

Topic Closed

This topic has been closed to new replies.

About this Topic