Image with text + link as hover effect, link opening in new tab
Permalink Browser Info Environment
Hi,
Currently working on a new project @ http://designandpublishinggroup.be/...
On slide 2 i have 4 images. I want to be able to show some text (from a content block?) when hovering over an image. See the attached image to see how it should look when hovering over 'Publicaties'. You see there is also a green button that links to an external site in a new tab.
Is there something build in that can help me?
Thanks in advance.
Currently working on a new project @ http://designandpublishinggroup.be/...
On slide 2 i have 4 images. I want to be able to show some text (from a content block?) when hovering over an image. See the attached image to see how it should look when hovering over 'Publicaties'. You see there is also a green button that links to an external site in a new tab.
Is there something build in that can help me?
Thanks in advance.
| Type: | Pre-Sale |
|---|---|
| Status: | In Progress |
Hi Jordif,
First of all, thank you for your response.
I used option number 1 as a temporary solution.
However, i am in need of the same thing for a new project. And this time it can't be done with images.
How would i go about recreating this:http://wiender.com/ (check the hover effects on the images)? So the text has to be editable + a link. Also Including the slide animation.
Kind regards
Grafoman
First of all, thank you for your response.
I used option number 1 as a temporary solution.
However, i am in need of the same thing for a new project. And this time it can't be done with images.
How would i go about recreating this:http://wiender.com/ (check the hover effects on the images)? So the text has to be editable + a link. Also Including the slide animation.
Kind regards
Grafoman
Hi!
Maybe you could achieve this using a Custom Template for the image block. (Images can have a title and a description, and the image block allows you to insert a link).
If I understand it correctly, when you hover over the image, you need the title and description to slide in from the bottom. And when you click on the image, it will open a link to another page?
Jordi
Maybe you could achieve this using a Custom Template for the image block. (Images can have a title and a description, and the image block allows you to insert a link).
If I understand it correctly, when you hover over the image, you need the title and description to slide in from the bottom. And when you click on the image, it will open a link to another page?
Jordi
Hi Jordi,
Yes, when you hover over the image, there is a title and a 'category'. When you click on the image, a page opens in a lightbox. I would also like to implement the slide effect.
Let me show you with 2 images, before and after hover. (see attachments)
Furthermore. The page in the lightbox has to be a page linked from the sitemap.
This is a difficult one for sure..
Yes, when you hover over the image, there is a title and a 'category'. When you click on the image, a page opens in a lightbox. I would also like to implement the slide effect.
Let me show you with 2 images, before and after hover. (see attachments)
Furthermore. The page in the lightbox has to be a page linked from the sitemap.
This is a difficult one for sure..
Hi!
Yes, I see.
Then I'd go with the "Custom Template" idea.
I've attached a ZIP file to help you get started. You simply need to unzip it under /application/blocks.
Next add an Image block to your page. Enter the title in the "Alt. text" box and the category in the "Title" box. You can also enter your link in the same dialog (using the "Anohter page" option).
Finally, assign the "Slide In" custom template to the image block.
You'll also need to customize the css (there is a view.css in the custom template folder).
Hope this helps you get started!
Jordi
Yes, I see.
Then I'd go with the "Custom Template" idea.
I've attached a ZIP file to help you get started. You simply need to unzip it under /application/blocks.
Next add an Image block to your page. Enter the title in the "Alt. text" box and the category in the "Title" box. You can also enter your link in the same dialog (using the "Anohter page" option).
Finally, assign the "Slide In" custom template to the image block.
You'll also need to customize the css (there is a view.css in the custom template folder).
Hope this helps you get started!
Jordi
Hi Jordi,
Thanks for the help!
I tested the block and i have 1 issue: the hover image of the image block is ignored? Can this easily be fixed?
I too have found a solution and wanted to share:
Beneath the image block i added a content block and gave it a custom class: 'info'.
I added the following script to the header of the site:
I use this to select the column id and i add a class 'infoopen' to the div with the 'info' class.
It works, but maybe your solution is cleaner :).
How would i go about opening the page link in a lightbox?
Thanks in advance!
Thanks for the help!
I tested the block and i have 1 issue: the hover image of the image block is ignored? Can this easily be fixed?
I too have found a solution and wanted to share:
Beneath the image block i added a content block and gave it a custom class: 'info'.
I added the following script to the header of the site:
$(document).ready(function () { $(".layoutoverzicht .ccm-layout-column").hover(function() { myID = $(this).attr("id"); nummer = myID.slice(-2); kolom = "#ccm-layout-column-" + nummer tekst = kolom + " .info" $(tekst).toggleClass("infoopen"); }); });
I use this to select the column id and i add a class 'infoopen' to the div with the 'info' class.
It works, but maybe your solution is cleaner :).
How would i go about opening the page link in a lightbox?
Thanks in advance!
Hi,
First, thanks for sharing your code!
As for the custom template I attached, the hover image should work. The link should also open in a lightbox. Here is a demo page using the custom template:
http://longstoryshort.15robots.com/slide-hover-effect...
Maybe there is some custom code interfering with the custom template? Can you try it in a new page with no custom code and see if it works?
Regards,
Jordi
First, thanks for sharing your code!
As for the custom template I attached, the hover image should work. The link should also open in a lightbox. Here is a demo page using the custom template:
http://longstoryshort.15robots.com/slide-hover-effect...
Maybe there is some custom code interfering with the custom template? Can you try it in a new page with no custom code and see if it works?
Regards,
Jordi
Ow, nice. Didn't notice the lightbox part already worked!
It's totally working now. Although the lightbox itself is very small. Is it possible to make the height of the lightbox depend on it's contents (so without a scrollbar within the lightbox)? Like we did forhttp://www.temps-de-relax.be/ (click the buttons for beauty, healthcare, ...)
Thank you!
It's totally working now. Although the lightbox itself is very small. Is it possible to make the height of the lightbox depend on it's contents (so without a scrollbar within the lightbox)? Like we did forhttp://www.temps-de-relax.be/ (click the buttons for beauty, healthcare, ...)
Thank you!
Hi!
in that other website, you were using Content blocks, so the content was part of the same page. When creating a popup from an inline element (an element that's already in the page), Magnific Popup can adjust the height of the popup to the content.
In this case, the popup uses an iframe to load an external page, so Magnific Popup can not detect the height of the content. But if you know the approximate height of the external pages you're going to load, you can change the height of the popup like this:
Jordi
in that other website, you were using Content blocks, so the content was part of the same page. When creating a popup from an inline element (an element that's already in the page), Magnific Popup can adjust the height of the popup to the content.
In this case, the popup uses an iframe to load an external page, so Magnific Popup can not detect the height of the content. But if you know the approximate height of the external pages you're going to load, you can change the height of the popup like this:
.mfp-iframe-holder .mfp-content { height: 1000px; }
Jordi
Is there no way to make the height lightbox dynamicly change to its content? Because the heights of those pages will be different every time.
Hi,
there is a thread on stackoverflow on this specific issue, with several solutions, but I haven't tested them myself:
http://stackoverflow.com/questions/23656996/magnific-popup-iframe-a...
What type of content will those pages have? Are they pages from the same site?
Another approach would be loading the pages via ajax, instead of using an iframe. (Magnific Popup supports different types of content:http://dimsemenov.com/plugins/magnific-popup/documentation.html#con... )
Finally, you could also try setting the height of the iframe to 90% or 100% of the browser window:
I think this way the popup looks better.
Regards,
Jordi
there is a thread on stackoverflow on this specific issue, with several solutions, but I haven't tested them myself:
http://stackoverflow.com/questions/23656996/magnific-popup-iframe-a...
What type of content will those pages have? Are they pages from the same site?
Another approach would be loading the pages via ajax, instead of using an iframe. (Magnific Popup supports different types of content:http://dimsemenov.com/plugins/magnific-popup/documentation.html#con... )
Finally, you could also try setting the height of the iframe to 90% or 100% of the browser window:
.mfp-iframe-holder .mfp-content { height: 100%; }
I think this way the popup looks better.
Regards,
Jordi
Since this is a portfolio site, the main content is gonna be images, text and sometimes the youtubeplayer for a project.
All pages exist within the site.
All pages exist within the site.
Ok, then maybe you could try using ajax.
Will you create the other pages in concrete5? If so, I'd suggest using the Elemental theme, with the Blank page template, to keep the page content clean and unstyled. (When using ajax, it's best to load simple HTML to avoid issues). You don't need to worry about the default styles of the Elemental theme. Once the info is loaded via ajax, the styles of the main page will be used (in other words, only the content is loaded, not the styles).
Once you create a test page for one of your portfolio projects, we can tweak the Custom Template a little to load the project info via ajax.
If you want to give it a try, could you send me a link to one of the portfolio items once it's ready? This way I'll do some testing and adjust the custom template to use ajax.
Jordi
Will you create the other pages in concrete5? If so, I'd suggest using the Elemental theme, with the Blank page template, to keep the page content clean and unstyled. (When using ajax, it's best to load simple HTML to avoid issues). You don't need to worry about the default styles of the Elemental theme. Once the info is loaded via ajax, the styles of the main page will be used (in other words, only the content is loaded, not the styles).
Once you create a test page for one of your portfolio projects, we can tweak the Custom Template a little to load the project info via ajax.
If you want to give it a try, could you send me a link to one of the portfolio items once it's ready? This way I'll do some testing and adjust the custom template to use ajax.
Jordi
Hi,
I just made a simple page (still in the long story short theme though)http://grafomantestsite.com/index.php/test...
On the homepage:http://grafomantestsite.com/index.php...
The projectpage is loaded in a lightbox when you click the projects.
I just made a simple page (still in the long story short theme though)http://grafomantestsite.com/index.php/test...
On the homepage:http://grafomantestsite.com/index.php...
The projectpage is loaded in a lightbox when you click the projects.
Hi,
the homepage looks very nice, we're almost there :)
Would you mind creating a simple page using the Elemental theme + blank template (with just a few images or text)? It will be much easier to make the ajax work, since that template is very simple and clean (no unnecessary markup or scripts).
The styles should be automatically applied, since the content will be loaded inside the homepage.
Jordi
the homepage looks very nice, we're almost there :)
Would you mind creating a simple page using the Elemental theme + blank template (with just a few images or text)? It will be much easier to make the ajax work, since that template is very simple and clean (no unnecessary markup or scripts).
The styles should be automatically applied, since the content will be loaded inside the homepage.
Jordi
I made one with some images here :http://grafomantestsite.com/index.php/elemental...
Great!
I've attached a new zip file with some changes to load the content via ajax and also some additional styles in the css file.
If you want to give it a try, let me know if it works!
(By the way, this should work only with the elemental page)
Jordi
I've attached a new zip file with some changes to load the content via ajax and also some additional styles in the css file.
If you want to give it a try, let me know if it works!
(By the way, this should work only with the elemental page)
Jordi
Jesus man, you're like a Concrete5 God.
It works like a charm! i'm gonna do some tweaking, but this is exactly what i'm looking for and it's very handy for future projects. You should make this an addon or a theme feature!
Thank you so much.
It works like a charm! i'm gonna do some tweaking, but this is exactly what i'm looking for and it's very handy for future projects. You should make this an addon or a theme feature!
Thank you so much.
Hehehe! Glad it worked :)
I was thinking of making and add-on with hover effects for some blocks (image, feature, content...), so maybe i'll include this one too.
Jordi
I was thinking of making and add-on with hover effects for some blocks (image, feature, content...), so maybe i'll include this one too.
Jordi
A small problem: i usedhttps://www.concrete5.org/marketplace/addons/html5-audio-player-basi... to play audio files. However when i open them in a lightbox, it gives an error (it says to download the flash plugin).. When i use it outside the lightbox it works. Is that a limitation for the ajax lightbox?
You can see it here:http://grafomantestsite.com/ (click on the animated gif).
This is the page, here it works:http://grafomantestsite.com/index.php/krefel...
EDIT: I deleted the addon and use a html block instead (less userfriendly, but it works)
EDIT EDIT: Question n. 2 : When a lightbox opens, everything in the background dissapears: the logo (combora) the layout images, ... I haven't found any fix yet. Is it possible to fix this?
You can see it here:http://grafomantestsite.com/ (click on the animated gif).
This is the page, here it works:http://grafomantestsite.com/index.php/krefel...
EDIT: I deleted the addon and use a html block instead (less userfriendly, but it works)
<audio controls src= "/application/files/2214/5518/9129/Krefel_Keukens.mp3" ></audio>
EDIT EDIT: Question n. 2 : When a lightbox opens, everything in the background dissapears: the logo (combora) the layout images, ... I haven't found any fix yet. Is it possible to fix this?
Yes, this is because of how the Ajax type works. When you use the Iframe type, the whole page (with scripts and styles) is loaded. With Ajax, only the contents (no scripts and no styles) are loaded.
To fix this, you could try adding an instance of the HTML5 audio player into your homepage (you can hide it with CSS). This way, any scripts and styles required by the add-on will be loaded in the main page. Hopefully this way the add-on will work.
If this does not work, you can alway use the iframe type for these cases.
Jordi
To fix this, you could try adding an instance of the HTML5 audio player into your homepage (you can hide it with CSS). This way, any scripts and styles required by the add-on will be loaded in the main page. Hopefully this way the add-on will work.
If this does not work, you can alway use the iframe type for these cases.
Jordi
Sorry, hadn't seen the edits!
As for background elements disappearing, I think that's because you've added and HTML blog with some styles and scripts at the beginning of your porftolio projects. Could you try removing that and see if it works?
If you need to add styles and scripts, you should add them to the homepage, or use the iframe type instead.
Jordi
As for background elements disappearing, I think that's because you've added and HTML blog with some styles and scripts at the beginning of your porftolio projects. Could you try removing that and see if it works?
If you need to add styles and scripts, you should add them to the homepage, or use the iframe type instead.
Jordi
Ok, everything works! Thanks!
Hey Jordif,
I have another rather annoying issue with the lightbox. There seems to be a significant image quality loss when you open the site and lightboxes in safari.
I already made a post about this on the forums, but their solution does not seem to work.
Posted on forum:https://www.concrete5.org/index.php?cID=802093...
I added 2 screenshots.
You have any idea? Other than that everythings works fine
I have another rather annoying issue with the lightbox. There seems to be a significant image quality loss when you open the site and lightboxes in safari.
I already made a post about this on the forums, but their solution does not seem to work.
Posted on forum:https://www.concrete5.org/index.php?cID=802093...
I added 2 screenshots.
You have any idea? Other than that everythings works fine
Hi,
jpg is not the best image format for text. It's normal the text looks a little blurry when using jpg compression. When the image loads inside the lightbox, it needs to be resized, which makes it even worse (specially in some browers).
So you could try one of the following:
1. Exporting the image at the same exact size of the lightbox (750px width)
2. Using png instead of jpg (for images that only contain text)
3. Pasting the text directly into the page (instead of using an image)
Hope this helps!
Jordi
jpg is not the best image format for text. It's normal the text looks a little blurry when using jpg compression. When the image loads inside the lightbox, it needs to be resized, which makes it even worse (specially in some browers).
So you could try one of the following:
1. Exporting the image at the same exact size of the lightbox (750px width)
2. Using png instead of jpg (for images that only contain text)
3. Pasting the text directly into the page (instead of using an image)
Hope this helps!
Jordi
Hi Jordi,
Thanks for the quick answer.
So i used photoshop to rework the image (it's coming from a pdf btw)
Saved it for web as jpg, max quality, 750px width.
Still the quality difference is rather big. See Screenshots.
Thanks for the quick answer.
So i used photoshop to rework the image (it's coming from a pdf btw)
Saved it for web as jpg, max quality, 750px width.
Still the quality difference is rather big. See Screenshots.
Then I'd try exporting to PNG.
JPG is not very good with text (and this is small, thin grey text on grey background, not the easiest type of image to compress :)
JPG is not very good with text (and this is small, thin grey text on grey background, not the easiest type of image to compress :)
I tried that as well, same result. It's really weird. Only safari makes the picture super blurry..
Unfortunately I don't have a mac with safari to test this. Does this only happen when you view the image in the lightbox? If you access the page directly, the image looks fine?
If you switch from ajax to iframe, does it make any difference?
Last thing: maybe this has to do with the retina display, could you try exporting the image at twice the resolution (1500 width)
Sorry not to be of more help!
If you switch from ajax to iframe, does it make any difference?
Last thing: maybe this has to do with the retina display, could you try exporting the image at twice the resolution (1500 width)
Sorry not to be of more help!
Okay, so i have tested this some more.
It seems to be a problem with ajax.
When i change the block back to working with an iframe, the image looks normal.
I added screenshots for comparison.
Also when i go tohttp://grafomantestsite.com/krefel... the image looks perfect in safari.
It seems to be a problem with ajax.
When i change the block back to working with an iframe, the image looks normal.
I added screenshots for comparison.
Also when i go tohttp://grafomantestsite.com/krefel... the image looks perfect in safari.
Something else I've noticed: you have the following CSS rule at the top of the page:
.mfp-content .container img{
width: 800px;
}
Can you try removing that (or changing it to 750px)
Not sure it has something to do with the issue, but who knows
.mfp-content .container img{
width: 800px;
}
Can you try removing that (or changing it to 750px)
Not sure it has something to do with the issue, but who knows
Ok, we are getting closer! :)
So i removed the code. But now, only in safari, the image is smaller (width) but seems of good quality. I added an image with width 1500px, but no difference.
When i change the width of the image to 750px or 100% in code, it gets blurry again. It's like it's scaling, but in a bad way.
EDIT: Okay, so i managed to solve this mystery. I removed the code, and added a max dimension of 750px to the image block. That seems to fix it. Don't know how.. but it does look good now!
So i removed the code. But now, only in safari, the image is smaller (width) but seems of good quality. I added an image with width 1500px, but no difference.
When i change the width of the image to 750px or 100% in code, it gets blurry again. It's like it's scaling, but in a bad way.
EDIT: Okay, so i managed to solve this mystery. I removed the code, and added a max dimension of 750px to the image block. That seems to fix it. Don't know how.. but it does look good now!
Glad it's working now! I hate unsolved mysteries :)
there are several ways to achieve this:
1. The easiest one is using Image blocks: when you add an Image block, you can provide two images ("image" and "image hover"). "Image hover" will show when you hover over the image. So you could export the hovering state (with the text and the button) as an image.
more info:http://www.concrete5.org/documentation/using-concrete5-7/in-page-ed...
2. Another option would be to use the Page List block. That block allows you to use a Custom Template called "Thumbail Grid", that will display a list of pages as a grid of thumbnails with a hover effect.
That's how the portfolio in the "Elemental" theme was created:
https://demos6.softaculous.com/Concrete5/index.php/portfolio...
By the way, will the images link to a new page within the site or to an external page?
In both cases, you can add them to the sitemap (Go to Dashboard -> Sitemap, and you should be able to add both a new page or an external link). Then, for every new page or external link, you can add a thumbnail, title and description.
Finally, if you go back to the homepage, you should be able to display a Page List with the "Thumbnail Grid" template.
More info:http://www.concrete5.org/documentation/using-concrete5-7/in-page-ed...
(If you want to use this option, probably you'll need to make some CSS adjustments, or even create a new custom template base ond the built-in "Thumbail Grid", I can help you with that if you want).
3. Finally, if you feel you need something completely customized, you can use HTML blocks to add your custom code.
Hope this helps,
Jordi