Responsive Carousel / Gallery with a live website

[KBConcepts]

Is this possible adding a Responsive Carousel or Gallery with a working website?
Each of the places where an image/video would be would be like it’s own browser.

I think some of Blocs / Web Designer like @Pealco, @PeteSharp, @Flashman, @Eldar @Whittfield … etc. maybe helpful with this question.

[PeteSharp]

Hey @KBConcepts,

Do you mean adding one to an existing website?

Then the answer is yes. Even easier if the website uses Bootstrap already.

[KBConcepts]

Thanks for reply @PeteSharp

You know when you have a gallery and you can insert images/pictures or videos. I want to know if live/working website in the same areas.

[PeteSharp]

@KBConcepts,

So instead of an image or video, you want an embedded website(s) in the gallery?

[KBConcepts]

Yes, Gallery of websites, as if each area is a browser.

[PeteSharp]

Well you could with iframe’s I guess. It would probably load terribly slow if you had a lot of them.

Someone else may have a solution.

[nelo]

I guess you want to do something like this?

Aqui

[KBConcepts]

@nelo you rock! These are Word Press themes with Plug-ins. They are really cool though.
Have you used it?

Here is what I came up with playing with CodePen. Not to mention it’s free. I have not yet brought it into Blocs though.
What do you expert think of this?

---

HTML - (Why is the code not being revealed in the Forum?)

GalliesAlley.com

CSS
.iframe-container {
overflow: hidden;
padding-top: 100%;
position: relative;
}

.iframe-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

// Demo styles
body {
background: url(‘http://GalliesAlley.com/img/.jpg’);
font-family: ‘Lora’, serif;
font-size: 16px;
line-height: 1.3;
margin: 1rem 0;
text-align: center;
}

h1,
p {
margin-bottom: 2rem;
}

h1 {
font-family: ‘Poppins’, sans-serif;
font-size: 1.7rem;
}

a {
color: #31c1ef;
text-decoration: none;
}

.wrapper {
background-color: transparent;
border-radius: 1rem;
margin: 0 auto;
max-width: 100%;
padding: 0rem;
width: 100%;
}

CSS
.iframe-container {
overflow: hidden;
padding-top: 100%;
position: relative;
}

.iframe-container iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

[nelo]

use a zoom image for a site, I have an idea how to do it, with images let me try it and if it works I will send you the example.

[PeteSharp]

Interesting idea. I haven’t seen it before.

[Pealco]

Hello @KBConcepts,

Regarding what you send and I see that you like what @nelo show you, so I could create what you need, and for that there are the instructions:

So first step: Use chrome browser and install the following extension: https://chrome.google.com/webstore/detail/full-page-screen-capture/fdpohaocaechififmbbbbbknoalclacl

Open the website you want to copy:

After you press the camera icon it will appear the capture animation of the page:

Then you have a nice picture of the website

And just press the button “Download to PNG”

Second step:

1. Add a page with all the images you will use and just keep it there with nothing except the images and don’t make any changes as this page is just to have the files, or you will have to add the images manually to img folder, but probably one time you will forget and the page not work.

2. Now in the page that you want to appear the website “iframe”, add a “code widget” and add the following code: (turn off preview before paste this code)

<div class="preview-item hover1"> <a href="website1.html"><img src="img/website1.jpg" width="1600" height="13058" alt="" class=""> </a>
<h3>WEBSITE 1</h3>
</div>

Change the ref= to the website url
Change the omg src= to the name of the jpg you have relate to this page
Change the h3 title for what you want or delete the entire h3

3. Go to the definitions of that page and in the code editor add the following one:

<style> 

.preview-item{
display: inline-block;
    margin: 30px 30px 0;
    vertical-align: top;
    width: 237px;
}

.preview-item a{
   border: 5px solid #444444;
    display: block;
    height: 300px;
    margin-bottom: 20px;
    overflow: hidden;
    width: 237px;
		-webkit-transition: all .3s ease-out;
	-moz-transition: all .3s ease-out;
	-ms-transition: all .3s ease-out;
	-o-transition: all .3s ease-out;
	transition: all .3s ease-out;
}


.preview-item:hover a{
	border-color:#ffc908 ;
}


.hover1:hover  img {
	margin-top:-1560px;
	
}

.preview-item img{
	width:100%;
	height:auto;
	position:relative;
		-webkit-transition: all 4.3s ease-out;
	-moz-transition: all 4.3s ease-out;
	-ms-transition: all 4.3s ease-out;
	-o-transition: all 4.3s ease-out;
	transition: all 4.3s ease-out
}

.preview-item h3{
	border-bottom: 1px solid #444444;
    color: #fff;
    font-family: "oswaldbook";
    font-size: 16px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    position: relative;
    text-transform: uppercase;
}
</style>

There you have an example working for you test:
LINK

[KBConcepts]

Wow @Pealco you went through a lot of work to make this happen.
I’m going to work on it as soon as I can. Thank you, friend

[Pealco]

Sorry now with the link…

[KBConcepts]

Brilliant!