Creating this gallery

Hi
Really enjoying the support from the community and have delved into the code side of things to expand my horizon and abilities with this software. So Im trying to incorporate this [Bootstrap Snippet 3D Scrolling Image Gallery using HTML CSS jQuery] into my project. I have inserted the html into the html widget and also created the css file and the JS is included in the header, however I’m having issues with the actual snippet working. I have included the file along with the export items and was wondering if anyone is available to tell me what Im doing wrong. Many thanks for any help

Regards JohnMI_construction.zip (2.8 MB)
MI_construction.bloc.zip (99.7 KB)

Just curious because I love learning. In order to this Bootstrap snippet 3D scrolling effect would we use the code editor?
In other words, would we copy the HTML then insert it into the open code editor and save it? Then do the same for the CSS? I’m pretty sure we don’t do this with the JS.
I think it has to be in its own folder or can we use the one that Blocs exports
Sorry, I’m not a coder so I’m learning these tweaks.

Hi @KBConcepts

Thanks for your response. So I think you are correct, the html you copy and paste into the html widget while you copy and save the css as a separate file. When you export the site it creates a parent folder ‘css’ in which you drop your earlier file into. In theory this should allow once the index.html file is open to see the 3D gallery to work, but it isn’t. Really scratching my head @Eldar is there anyone you know that might help ?

Very cool of you to get back to me. :slight_smile:

Hi again to anyone that might be able to help

Still having issues with this, struggling a bit here

The only gallery I can see in your file is the Hype created one on the home page. Have you incorporated the gallery in the file, or have you posted the project file without the gallery. Maybe you can explain a little more. The best option would be to incorporate the gallery into your project as you have attempted to thus far and then post that project file. This way, we can see where the gallery is supposed to be and see where the problem may lie. Be sure to include all the gallery assets with the project file.

Hey,

I will take a look at this this weekend!

Also, I recommend to follow the advice of @hendon52 It will be easier to help you if you do what he says.

Hi @hendon52 the 3d gallery was on the ‘renovations’ page. The images had to be locally linked (I only inked one). On the renovations page I inserted the related HTML code and then copied the CSS and saved that to my page settings code section. This has been something I have been trying with other snippets and all seems okay. I have however now decided against using the 3d gallery as it doesn’t seem to work particularly well on mobile. I will post on this tonight what I currently have and upload for you to look at if you want to. Again loving experimenting with what can be done and learning code has been a revelation

cheer again and watch this space

I think you are right to look for another gallery. Whilst there are many good snippets on the internet, many of them are not particularly well documented which means a lot of hit or miss in implementing them. With a number of these snippets, the head code includes weblinks to the css and js files which means the actual css or js files don’t need to be included in your local project. This isn’t always explained.

I found the best way to handle these snippets is to paste the HTML into a simple HTML editor and give it a shot in a web browser to see if it works. If it doesn’t I then create separate css and JS files in the same editor and edit the html to point to these files as if they were in the root of the site. Save the files out to a folder on the desktop and check in a browser again. If all is well, I know that the code can be pasted into Blocs with a high degree of certainty. If it still fails to work, then I usually just abandon the idea and look for something else.