Hide DIV if no image displayed

Question

I am using a slider in a page to display uploaded images. What I would like to do is hide the div if there is no image uploaded. Is there a command in PHP I could use to hide this div?

Here is my slider code

<div id="flex-slider" class="flexslider-main flexslider">
    <ul class="slides">
        <li>
            <img src="[types field="travel-tips-image" url="true" width="770" height="400"][/types]" alt="[wpv-post-title]" >
            <div id="credit">Photo by: [wpv-post-author]. </div>
        </li>
    </ul>
</div>

where

[types field="travel-tips-image" url="true" width="770" height="400"][/types]

is the shortcode from my wordpress plugin. So basically all I want to do is to not display that main div id="flex-slider" if there is no image.

I am thinking the best way to do this would be PHP but since I am a newbie I have no idea how to do it and a web search did not return much I could apply. Could anyone suggest some code to use? The site runs on wordpress. Thanks

Thanks for the reponsis. Of course my biggest problem is that I never actually wrote any JavaScript/JQuery. After your replies and comments I did some research and thought I would adapt a script I found. Here it is:

'$(function(){ 
// Hide div when no image 
if ($("div#flex-slider:not(img)").length) { 
$("#flex-slider").hide(); }) });'

This did not work though. To be honest I am not even sure where to place this or if the code is complete but this is pretty similar to what I need to do. Can anyone guide from here?

When shortcode provides no image source - does src becomes "" ? — Yuriy Galanter, May 10 '13 at 21:24
You can do this with jQuery, just do if($('div').length == "") { $(this).hide();} — Cam, May 10 '13 at 21:24

score 0 · Answer 1 · edited May 23 '17 at 11:49

0

Doing this in JavaScript would be a lot easier: Check this post for methods to understand if an image isnt loaded correctly: Check if an image is loaded (no errors) in JavaScript

And if you detect that an image isnt loaded properly, just set the css visibility property of the div to hidden;

edited May 23 '17 at 11:49

Community

1
1

answered May 10 '13 at 21:23

Ozan Tabak

662
3
9

Thanks. I have no idea how to work with JQuery/Javascript to be honest. After your post I researched it a little and tried to adapt a script as follows: – Marcel May 11 '13 at 05:47
'$(function(){ // Hide div when no image if ($("div#flex-slider:not(img)").length) { $("#flex-slider").hide(); }) });' but that is not working. Any suggestions? – Marcel May 11 '13 at 05:47

Hide DIV if no image displayed

1 Answers1