i cant write english so, one question ,i hope understand you
why code javascript ,no repeat, in post ,every post. i will affect every post image butt not work all post ,only first post working.not other post of course, attachment file image and code index.php my site
<!DOCTYPE html> <html> <head> <title>hello world </title> <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>"> <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/responsive.css"> </head> <body> <header> <!--prog menu home--> <nav> <div id="myNav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> <div class="overlay-content"> <?php wp_nav_menu( array( 'menu' => 'menu 1', 'items_wrap' => '%3$s' , 'container' => '' , 'theme_location' => 'navb-header' ) ); ?> </div> </div> <li class="fa fa-bars fa-2x" onclick="openNav()"></li> <a href="/" class="active">WallTure.Com<i class="fa fa-home fa-2x"></i></a> </nav> <!--end prog menu home--> <!--prog menu category--> <section> <div class="chip"> <a onclick="document.getElementById('id01').style.display='block'" ><i id="search" ></i> Search</a> </div> <div class="chip"> <a onclick="document.getElementById('id02').style.display='block'" ><i id="box"></i> Category</a> </div> </section> <!--start body search--> <div id="id01" class="modal"> <div class="modal-content-search animate"> <div class="imgcontainer"> <span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">×</span> Search The In Site </div> <div class="container"> <?php get_search_form(); ?> </div> <div class="container" style="background-color:#f1f1f1"> <button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn button">Cancel</button> </div> </div> </div> <!--end body search--> <!--start body category--> <div id="id02" class="modal"> <form class="modal-content animate"> <div class="imgcontainer"> <span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">×</span> Choose Category Wallpaper </div> <div class="container"> <?php wp_list_categories(array( 'title_li'=>'', 'orderby' => 'name', 'include' => array( 5,6,8,9,10,7,12,11 ) )); ?> </div> <div class="container" style="background-color:#f1f1f1"> <button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn button">Cancel</button> </div> </form> </div> <!--end body category--> <!--end prog menu category--> </header> <section><!--start post body--> <?php if(have_posts()) : ?> <?php while(have_posts()) : the_post(); ?> <?php $thumb_id = get_post_thumbnail_id(); $thumb_url = wp_get_attachment_image_src($thumb_id,'large'); ?> <div class="bodypost"> <div class="post-img" > <div class="ourdownload"> <a href="javascript:void(0)" class="closedownload" onclick="closedownload()">×</a> <div class="download-content"> <li><?php the_time('d-m-y') ?> | <?php the_time('m-h') ?></li> <li> org size : 20*20</li> <li> other size : 20*20</li> </div> </div> <i class="fa fa-download fa-2x post-img-download" onClick="opendownload()" ></i> <div class="ourinformation"> <a href="javascript:void(0)" class="closeinformation" onclick="closeinformation()">×</a> <div class="information-content"> <li>our size : 20*20</li> <li> org size : 20*20</li> <li> other size : 20*20</li> </div> </div> <i class="fa fa-exclamation-circle fa-2x post-img-note" onClick="openinformation()"></i> <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>" rel="nofollow"><?php the_post_thumbnail('large'); ?></a> </div> <div class="name-post"><a href="<?php the_permalink(); ?>" title="<?php echo get_the_title(); ?>" rel="nofollow"> <?php the_title(); ?> </a></div> <div class="name-category"><?php the_category(', ') ?></div> </div> <?php echo ' <script> function openNav() { document.getElementById("myNav").style.width = "100%"; } function closeNav() { document.getElementById("myNav").style.width = "0%"; } function opendownload(){ var x=document.getElementsByClassName("ourdownload"); x[0].style.width="100%"; } function closedownload(){var x=document.getElementsByClassName("ourdownload"); x[0].style.width="0%";} function openinformation(){var z=document.getElementsByClassName("ourinformation"); z[0].style.width = "100%";} function closeinformation(){var z=document.getElementsByClassName("ourinformation"); z[0].style.width = "0%";} </script> ' ?> <?php endwhile; ?> <?php endif; ?> </section><!--end post body--> <div class="number-body"> <div class="numall"> Total Wall : <?php //Count Published Posts Mandegarweb.com echo $wpdb->get_var("SELECT COUNT(ID) FROM $wpdb->posts WHERE post_type = 'post' AND post_status = 'publish'"); ?></div> <div class="pagination"> <?php if (function_exists('mw_pagination')) mw_pagination(); ?> </div> </div> <footer>Wallture.com & Wallture.ir beging 2015,2016,2017 continue ...</footer> سس <script> // Get the modal var modal = document.getElementById('id02'); var modal2 = document.getElementById('id01'); // When the user clicks anywhere outside of the modal, close it window.onclick = function(event) { if (event.target == modal) { modal.style.display = "none"; }if (event.target == modal2){ modal2.style.display = "none"; } } </script> </body> </html> 
wp_head()function call just before the ending</head>tag.