Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • March 22, 2015 at 1:41 pm #415955
    radoslavmitov

    Hello,

    Is there a way to make a gallery in which there is a thick overlay on the picture with a label and when you click on it the picture is opened?
    Something like this:

    https://www.dentcof.net/clinical-case/giuliano-implant-dentar

    Kind regards,
    Radoslav Mitov

    March 23, 2015 at 5:01 pm #416467
    Yigit

    Hi radoslavmitov!

    Please add following code to Functions.php file in Appearance > Editor

    function add_custom_image(){
?>
<script>
 function changeImage() {

        if (document.getElementById("imgChange")) 
        {
            document.getElementById("imgChange").src = "http://kriesi.at/wp-content/themes/kriesi/images/logo.png";
        }
    }
</script>
<?php
}
add_action('wp_footer', 'add_custom_image');

    and add your image as following 

    <img alt="" src="http://kriesi.at/wp-content/themes/kriesi/images/enfold.jpg" id="imgChange" onclick="changeImage()"  />

    using Code Block element

    Best regards,
    Yigit

    March 24, 2015 at 2:45 pm #417070
    radoslavmitov

    Hello,

    Works perfectly but I wanted to do it the opposite way. So I have a lot of pages where I want to hide a lot of pictures. So can I do it this way: I have one default warning picture on the Functions.php file that shows firstly when you open the page and after that I set different picture for each page that opens in the Code Block element when you click on the default one?

    Kind regards,
    Radoslav Mitov

    March 25, 2015 at 10:53 am #417659
    Ismael

    Hi!

    Not sure if I follow you correctly. Can you please provide a screenshot or a link to a page with this feature?

    Regards,
    Ismael

    March 25, 2015 at 12:06 pm #417694
    radoslavmitov

    Hello,

    So you can see here ( https://www.dentcof.net/clinical-case/giuliano-implant-dentar ) that there is one picture that opens first when you open the page – black one with some text on it. When you click on it opens the other picture.

    So when I have a lot of pages where I want when you open the page firstly to open this same black picture with text and when you click on it to open another photo.

    So this way we have one common black picture with text for a lot of pages, but when you click on each one a different photo is opening. With your solution it is the opposite. I set with the code block element specific picture for each page which opens first and when I click on it opens the picture which is set in the Functions.php file. I want to do it the opposite way.

    I hope you understand me now.

    Kind regards,
    Radoslav Mitov

    March 27, 2015 at 1:31 am #418975
    Josue

    Hi Radoslav!

    Try with the following instead:

    function add_custom_image(){
?>
<script>
 function changeImage($this, image) {
   $this.setAttribute("src", image);
 }
</script>
<?php
}
add_action('wp_footer', 'add_custom_image');

    The img structure would be like this:

    <img src="https://placekitten.com/g/200/300" onClick="changeImage(this, 'http://kriesi.at/wp-content/themes/kriesi/images/logo.png')" />

    You can see it working here:
    http://jsbin.com/fovovihije/edit?html,js,output

    Best regards,
    Josue

    March 27, 2015 at 12:30 pm #419225
    radoslavmitov

    Hello,

    Can you tell me in this code

    function add_custom_image(){
?>
<script>
 function changeImage($this, image) {
   $this.setAttribute("src", image);
 }
</script>
<?php
}
add_action('wp_footer', 'add_custom_image');

    Where I should place the URL of the image?

    Kind regards,
    Radoslav Mitov

    March 27, 2015 at 12:40 pm #419231
    radoslavmitov

    Hello,

    I figured it out. Thank you so much. Works fine now.

    Kind regards,
    Radoslav Mitov

    March 27, 2015 at 12:54 pm #419234
    radoslavmitov

    Hello,

    Just final question. Can I activate lightbox on the second image?

    Kind regards,
    Radoslav Mitov

    March 27, 2015 at 6:13 pm #419519
    Josue

    Hm, i don’t think that would be possible because lightbox activation happens before the image switch would occur.

    Best regards,
    Josue

    March 28, 2015 at 11:27 am #419822
    radoslavmitov
    This reply has been marked as private.
    March 28, 2015 at 7:12 pm #419881
    Josue

    Hi,

    Can you post the link to that page?

    Regards,
    Josue

    March 29, 2015 at 10:35 pm #420119
    radoslavmitov

    Hello,

    This is the link to the page: http://m3dent.com/total-restoration-3

    Kind regards,
    Radoslav Mitov

    March 30, 2015 at 5:49 pm #420647
    Yigit

    Hey!

    Please change your code to following one

    .page-id-3245 #av-masonry-1 a, .page-id-3245 #av-masonry-2 a, .page-id-3234 #av-masonry-1 a, .page-id-3234 #av-masonry-2 a, .page-id-3261 #av-masonry-2 a, .page-id-3253 #av-masonry-1 a, .page-id-3683 #av-masonry-1 a, .page-id-3683 #av-masonry-2 a, .page-id-3694 #av-masonry-1 a, .page-id-3694 #av-masonry-2 a {
  left: 25%!important;
}

    To center it perfectly, you can place empty 1/4 column elements on both sides and place masonry element inside 1/2 column element

    Cheers!
    Yigit

    April 4, 2015 at 10:34 am #423416
    radoslavmitov

    Hello,

    Everything is fine now.

    Thank you for the support.

    Kind regards,
    Radoslav Mitov

    • This reply was modified 9 years, 8 months ago by radoslavmitov.
  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • The topic ‘Support request’ is closed to new replies.