Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have a div structure that looks like this...

<div class="gallery_lightview">
    <div id="lg_image">
        <a href="http://www.website.com/?iframe=true&width=100%&height=100%" rel="prettyPhoto[iframes]" class="lightview_main" title="TITLE HERE">
            <img class="alignnone" src="HEADER.jpg" alt="" />
        </a>
        <a class="lightview" rel="prettyPhoto[pp_gal]" href="http://pathTophoto.jpg"> </a>
    </div>
</div>

This is done in the Wordpress Admin for the post and gets displayed when I use

<p><?php the_content(); ?></p>

What I want to do is remove the <a> tags that show up ONLY between div class "gallery_lightview" and leave the <img> tag. So once its all stripped out it would look like...

<div class="gallery_lightview">
    <div id="lg_image">
        <img class="alignnone" src="HEADER.jpg" alt="" />
    </div>
</div>

Basically making this a non clickable image. Is this possible? Its going on a Mobile site and I don't want this to be in the header. Really wanted it to be a self contained Javascript that sat above the "the_content" Wordpress call (which is where the "gallery_lightview" div code is.

I choose to not use a jQuery because, since its mobile it would add to the load. And literally the only thing the library would be doing was removing the <a> tag.

Any ideas?

I wanted the Javascript to live in the .php page template so I didn't have to go into every single post and add the Javascript as well. Is this possible?

ADDITION

I basically want to deactivate any <a> tag in "gallery_lightview" so that just the "img" tag is left and displayed

share|improve this question
    
Adding javascript does not really make a lot of sense, since there's nothing that has to happen in front of the user's eyes. Just don't put the links there. –  cbrandolino Jan 23 '11 at 2:37
    
Its already in the post. On the mobile side, I just need it to strip out those <a> tags –  Matt Jan 23 '11 at 2:39
    
Is this a WordPress centric question? I understand you're doing this inside WordPress, but it seems to me that this is more a general Javascript question than one specific to WordPress. I'd suggest adding something additional to the question to make this more specific to WordPress else you'll run the risk of having the question closed as off-topic(i considered voting to close myself but i'll hold my vote for now). –  t31os Jan 23 '11 at 10:42
    
Is this added via a shortcode in the content? Wouldn't it be possible to override the shortcode when you are displaying it in a mobile device? (Use @Jan in your reply so I get a notification) –  Jan Fabry Jan 24 '11 at 11:33
add comment

2 Answers

<script type="text/javascript">
function removeLink() {
    theAs = document.getElementById('lg_image').childNodes; // get all children of div#lg_image

    for( i = 0; i < theAs.length; i++ ) { // loop through the children
        if( theAs[i].nodeType != 3 ) { // if the child is not a whitespace,
            theImg = theAs[i].innerHTML; // it is the a which contains the img, so save its content
            break;
        }
    }

    document.getElementById('lg_image').innerHTML = theImg; // set the img as content of div#lg_imagei
}

function addEvent(obj, evType, fn) { 
    if (obj.addEventListener) { 
        obj.addEventListener(evType, fn, false); 
        return true; 
    } else if (obj.attachEvent) { 
        var r = obj.attachEvent("on"+evType, fn); 
        return r; 
    } else { 
        return false; 
    } 
}

addEvent(window, 'load', removeLink);
</script>
share|improve this answer
    
No dice, just tried it. Should this go before or after the_content call –  Matt Jan 23 '11 at 12:54
    
I put it before the_content call –  Matt Jan 23 '11 at 12:59
    
I modified the code so that the link removal runs after html is loaded. It is better to put it right before the closing </body> tag –  sorich87 Jan 23 '11 at 13:25
add comment

haven't tested, but try this:


var cnt = $(".lightview_main").contents()
$(".lightview_main").replaceWith(cnt);
$("a.lightview").remove();
share|improve this answer
    
So it would be.. <script type="text/javascript"> var cnt = $(".lightview_main").contents() $(".lightview_main").replaceWith(cnt); $("a.lightview").remove(); </script> ... –  Matt Jan 23 '11 at 3:59
    
No dice. Just tried it –  Matt Jan 23 '11 at 4:05
    
Basically I wanted to strip out or deactivate any <a> tag and leave the <img> tag –  Matt Jan 23 '11 at 4:09
    
The code provided is jQuery, you'd need to load jQuery in order for it to be any use. –  t31os Jan 23 '11 at 10:36
    
as t310s saide, you need to load jQuery for it to work. You can do that in your header.php with wp_enqueue_script('jquery'); Just be sure to place it above the wp_head(); call. –  Pippin Jan 23 '11 at 16:38
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.