top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

How to crate Popup gallery for user in Wordpress?

0 votes
405 views

I have a button in my wordpress website that popup a gallery, my problem is that the gallery is loading the image from the code, so when my clients need to upload a new image I need to add it for him in the code. How can I make it?
Here is the code:

<!DOCTYPE html>
<html>
<body>

<img class="alignnone size-full wp-image-133 aligncenter" style="border: 5px solid white; border-radius: 50%; background: white; box-shadow: 1px 1px 5px gray;" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" alt="" width="72" height="72" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"><strong>try</strong>
  </div>
</div>

<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">×</span>
  <div class="modal-content">

    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c2/F_icon.svg/2000px-F_icon.svg.png" alt="Nature and sunrise" style="width:100%">
    </div>

    <a class="prev" onclick="plusSlides(-1)">❮</a>
    <a class="next" onclick="plusSlides(1)">❯</a>

    <div class="caption-container">
      <p id="caption"></p>
    </div>

<script>
function openModal() {
  document.getElementById('myModal').style.display = "block";
}

function closeModal() {
  document.getElementById('myModal').style.display = "none";
}

var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>
</body>
</html>
posted Jun 1, 2017 by Sumanta Hazra

Share this question
Facebook Share Button Twitter Share Button LinkedIn Share Button

1 Answer

0 votes

Use this code it's going to work

<?php
function your_custom_gallery() {
    $attachments = get_posts( array(
        'post_type'      => 'attachment',
        'posts_per_page' => 4,
        'post_status'    => null,
        'post_mime_type' => 'image'
    ) );
    ?>
    <div id="imyModal" class="modal" style="direction: ltr!important;">
        <span class="close cursor" onclick="closeModal()">×</span>
        <div class="modal-content">
            <?php
            $i = 0;
            foreach ( $attachments as $attachment ) {
                $image_attributes = wp_get_attachment_image_src( $attachment->ID, 'original' );
                echo '<div class="mySlides">';
                echo '<div class="numbertext"> ' . $i . ' / 4</div>';
                echo '<img src="' . $image_attributes[0] . '" style="width:100%">';
                echo '</div>';
                $i ++;
            }
            ?>
            <a class="prev" onclick="plusSlides(-1)">❮</a>
            <a class="next" onclick="plusSlides(1)">❯</a>
        </div>
    </div>
    <?php
}
function add_script_to_head() {
    ?>
    <script>
        function openModal() {
            document.getElementById('imyModal').style.display = "block";
        }

        function closeModal() {
            document.getElementById('imyModal').style.display = "none";
        }

        var slideIndex = 1;
        showSlides(slideIndex);

        function plusSlides(n) {
            showSlides(slideIndex += n);
        }

        function currentSlide(n) {
            showSlides(slideIndex = n);
        }

        function showSlides(n) {
            var i;
            var slides = document.getElementsByClassName("mySlides");
            var dots = document.getElementsByClassName("demo");
            var captionText = document.getElementById("caption");
            if (n > slides.length) {
                slideIndex = 1
            }
            if (n < 1) {
                slideIndex = slides.length
            }
            for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active", "");
            }
            slides[slideIndex - 1].style.display = "block";
            dots[slideIndex - 1].className += " active";
            captionText.innerHTML = dots[slideIndex - 1].alt;
        }
    </script>
    <?php
}
add_action( 'wp_head', 'add_script_to_head' );
add_shortcode( 'custom_gallery', 'your_custom_gallery' );
answer Jun 8, 2017 by Saheb Pro
Similar Questions
+1 vote
How to find the current user in Wordpress ?

I am trying to get the current user in WordPress. My code is in below:

<?php
    include('/wp-admin/includes/user.php');
    $current_user = wp_get_current_user(); 
    echo 'Username: ' . $current_user->user_login;
?>

but I get the following error:

Fatal error: Call to undefined function wp_get_current_user() in /membri/mysite/wordpress/getUser.php on line 3

How can I resolve it?

0 votes
How to use shortcode by php to parse xml for getting element with same attribute in Wordpress?

I want to parse xml for getting element with same attribute and display it into my wordpress post using shortcode by php.
I create a xml file called emp_test.xml

<?xml version="1.0" encoding="utf-8"?>
<all_emp>
<emp_detail>
    <emp emp_name="john"><img>john_1.jpg</img></emp>
    <emp emp_name="john"><img>john_2.jpg</img></emp>
    <emp emp_name="john"><img>john_3.jpg</img></emp>
    <emp emp_name="marry"><img>marry_1.jpg</img></emp>
    <emp emp_name="marry"><img>marry_2.jpg</img></emp>
    <emp emp_name="david"><img>david_1.jpg</img></emp>
</emp_detail>
</all_emp>

I create shortcode in functions.php to get all img has attribute is john:

function create_shortcode_empimg() {
$url = 'https://.../emp_test.xml';
$xml = simplexml_load_file("$url") or die("Error: Cannot create object");
foreach ($xml->xpath("//*[@emp_name='john']/img") as $node)
{
    $img = (string) $node;
    return $img;
}
}
add_shortcode( 'empimg_shortcode', 'create_shortcode_empimg' );

I use this shortcode into my wordpress post.

But, the reult is comming like this:

john_1.jpg

How to get all img has attribute is john like?

john_1.jpg
john_2.jpg
john_3.jpg

Anyone's help is appreciated.

0 votes
How to create a shortcode for category title in Wordpress?

I want to create a shortcode for category title in wordpress to display the category name, and I found this code:

function categories_list_func( $atts ){
 $categories = get_the_category();

     if($categories) {
        foreach($categories as $category) {
            $output .= '<li class="cat-' . $category->cat_ID . '"><a href="'.get_category_link( $category->term_id ).'" title="' . esc_attr( sprintf( __( "Read more posts from : %s" ), $category->name ) ) . '">'.$category->cat_name.'</a></li>';
        }
        $second_output = trim($output);
      }
      $return_string = '<h4>'.__( "Categories :", "my_site").'</h4><div class="overflow"><ul class="post-categories">' . $second_output . '</ul></div>';

 return $return_string;

} // END Categories
add_shortcode( 'categories-list', 'categories_list_func' );

Can anybody help me how I create this shortcode?

...