Topic: Change image at click and images slide

ben2944
April 26, 2024 at 12:50 am

Hello,

Is it possible with GenerateBlock and GeneratePress to change picture when clicking on a button on the same page and to slide some images into a block ?

Edit : and is it possible to do the same animations like the text in the menu ? (like a blinking )
David
April 26, 2024 at 4:22 am

Hi there,

not currently. You would need a carousel or slider plugin for that,.
ben2944
April 26, 2024 at 6:08 am

Ok thanks. For the action to switch image with clicking on a button, do you advice a specific plugin ?

ANd for the blinking element in the menu when “focus”, is it possible with GP / GB ?
Ying
April 26, 2024 at 10:37 am
For the action to switch image with clicking on a button, do you advice a specific plugin ?

Not really, you might need to do some research.

Edit : and is it possible to do the same animations like the text in the menu ? (like a blinking )

Yes, try this:
```
@keyframes blink {
    0% {
        opacity: 1
    }

    50% {
        opacity: .2
    }

    to {
        opacity: 1
    }
}
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
   animation: blink 2s infinite
}
```
ben2944
April 28, 2024 at 5:09 am

Hi Ying

Thanks a lot, works perfectly 🙂
Ying
April 28, 2024 at 4:31 pm

Glad to hear that 🙂
ben2944
May 2, 2024 at 2:08 am

Hi Ying,

I re-open the ticket for this point :

For the action to switch image with clicking on a button, do you advice a specific plugin ?

So I found a plugin but I’v thinking about something else : is it possible with GP/GB to create a hotspot block ?
For example I would place an image and create some “fixed” block on, it and when hover those fixed block, a tooltip will appear (maybe with an opacity effect on hover) ?

Is it possible or should I better use a plugin ?
David
May 2, 2024 at 7:21 am

Whats the plugin ? So i have some kinda of reference to what its doing ?
ben2944
May 2, 2024 at 8:09 am

Hi David,
Thank you for your answer and sorry I was unclear. The plugin was for making a carousel (gutslider), this part is ok

But I was wondering if with only GP/GB, I could do an “hotspot” section ? Like a map where there are some points on it and when clicking on those points, a message appears.
Ying
May 2, 2024 at 9:31 am

You want to add the hotspots to the images inside the carousel?

It might be doable with static images using some CSS, but not sure if it’s going to work with the carousel.
ben2944
May 2, 2024 at 11:36 am

Hi Ying,

Sorry, I was unclear again … ^^;

No I just want add hotspot to an image but not inside a carousel. The carousel was my first idea to achieve what i wish but an hotspot block would be better

So you think I can do it ? For example : let’s say I place a GB’s block’s image which is a map. On this map I wish to “hotspot” 6 cities. And when I hover a point, a block appears and inside, I can add what I wish.

I don’t really succeed to do this with GB, but I’m not sure it’s doable 🙂

Ying

May 2, 2024 at 11:56 am

I built a simple example, try

1. paste the below code to your page editor:

<!-- wp:generateblocks/container {"uniqueId":"e3e2600d","bgImage":{"id":1989,"image":{"url":"http://clean.local/wp-content/uploads/2024/05/istockphoto-1370510829-1024x1024-1.jpg","height":550,"width":1024,"orientation":"landscape"}},"isDynamic":true,"blockVersion":4,"position":"relative","sizing":{"minHeight":"500px"}} -->
<!-- wp:generateblocks/container {"uniqueId":"0177501a","isDynamic":true,"blockVersion":4,"className":"location-1"} -->
<!-- wp:generateblocks/button {"uniqueId":"a55ad2c5","blockVersion":4,"display":"inline-flex","spacing":{"paddingTop":"15px","paddingRight":"20px","paddingBottom":"15px","paddingLeft":"20px"},"backgroundColor":"#0366d6","backgroundColorHover":"#222222","textColor":"#ffffff","textColorHover":"#ffffff"} -->
<span class="gb-button gb-button-a55ad2c5 gb-button-text">location 1</span>
<!-- /wp:generateblocks/button -->

<!-- wp:generateblocks/headline {"uniqueId":"952216ed","element":"p","blockVersion":3} -->
<p class="gb-headline gb-headline-952216ed gb-headline-text">location 1</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"8ff953c4","isDynamic":true,"blockVersion":4,"className":"location-2"} -->
<!-- wp:generateblocks/button {"uniqueId":"480c340a","blockVersion":4,"display":"inline-flex","spacing":{"paddingTop":"15px","paddingRight":"20px","paddingBottom":"15px","paddingLeft":"20px"},"backgroundColor":"#0366d6","backgroundColorHover":"#222222","textColor":"#ffffff","textColorHover":"#ffffff"} -->
<span class="gb-button gb-button-480c340a gb-button-text">location 2</span>
<!-- /wp:generateblocks/button -->

<!-- wp:generateblocks/headline {"uniqueId":"6c55f41d","element":"p","blockVersion":3} -->
<p class="gb-headline gb-headline-6c55f41d gb-headline-text">location 2</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/container {"uniqueId":"bd43306c","isDynamic":true,"blockVersion":4,"className":"location-3"} -->
<!-- wp:generateblocks/button {"uniqueId":"af54f84d","blockVersion":4,"display":"inline-flex","spacing":{"paddingTop":"15px","paddingRight":"20px","paddingBottom":"15px","paddingLeft":"20px"},"backgroundColor":"#0366d6","backgroundColorHover":"#222222","textColor":"#ffffff","textColorHover":"#ffffff"} -->
<span class="gb-button gb-button-af54f84d gb-button-text">location 3</span>
<!-- /wp:generateblocks/button -->

<!-- wp:generateblocks/headline {"uniqueId":"1d475916","element":"p","blockVersion":3} -->
<p class="gb-headline gb-headline-1d475916 gb-headline-text">location 3</p>
<!-- /wp:generateblocks/headline -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->

2. add this CSS:

:is(.location-1, .location-2, .location-3) .gb-headline {
    display: none;
}

:is(.location-1, .location-2, .location-3) .gb-button:hover + .gb-headline {
    display: block;
}
.location-1, .location-2, .location-3{
    position: absolute;
}

.location-1 {
    left: 10%;
    top: 10%;
}

.location-2 {
    left: 30%;
    top: 30%;
}

.location-3 {
    left: 50%;
    top: 50%;
}

3. you can modify the CSS and the blocks to achieve what you are looking for.

ben2944
May 2, 2024 at 11:03 pm

Thanks a lot ! Works perfectly ! 🙂
Ying
May 3, 2024 at 8:59 am

Glad to hear that 🙂
ben2944
May 5, 2024 at 12:21 am

Hi Ying,

I re-open this ticket for another question about the effefct in navigation header. Previously, you gave me the code for “blinking” text in the navigation menu. Works well thanks again 🙂

But some links in this menu are anchors for sections on the homepage. SO, when I’m on the homepage, all links in the menu that are anchors blinking

Is there a way to avoid this ?
Ying
May 5, 2024 at 9:35 am

Please open a new topic for unrelated questions, thanks!

Viewing 16 posts - 1 through 16 (of 16 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Change image at click and images slide