Need help making a portfolio gallery - html

so im building my portfolio webpage and after fooling around with my gallery i decided that with my knowledge limited to html/css, i would't be able to make a great gallery yet. so i decided to take a look around the web to find something i liked,but i didn't find anything that fitted my needs except a picasa plugin..
i found this picasa gallery plugin, which looks really great, and is responsive, which for me is a must: http://galleria.io/themes/folio/
But before buying it i wanted to ask you if you knew a great way to make something like this so heres a list of need for my gallery.
Gallery needs:
- I want it to be simple tiles side by side, same size.
- I want them to be clickable to view bigger versions, like lightbox.
- Be responsive.
Any good suggestions ?

Have you looked at using http://masonry.desandro.com ? It has what you're looking for and it's free to use. Also the link you have just comes with a blank screen, they have JS error on their page.

Related

How can I add CSS code to pre built themes in Website builder

Website builder name: Dynadot not Wordspace SO I CANNOT MAKE A CHILD THEME
I want css code for my website P.S The website has prebuilt themes and we can basically customize text, change pictures, add products etc. The website also provides a CSS editor like square space does. I have been to so many websites to try to copy some code but not a success. I have no experience with it either. Here is some information that might be useful.Also, the first pictures has drag and drop options like i can drag VIDEO to a certain part Here is a example website: https://www.svpartners.com/ I don't want the image animation it already has i need some new ideas on how to customize it with CSS, Font for the website Open sans
The screenshot 1 shows how my website theme already looks also at the bottom left there is a code option and there is a screen shot #2 for it so it might be helpful. Again I have tried many sites but most ask for money and most are not helpful. ALSO a GIF so you can have a better view😁 please help me out thanks
THE GIF
I am new here, I don't know how this works! Just ignore the writing if it'd not good, Also comment if you need any more details

Code for Reddit style image Carousel that's on home page

Has anyone got any idea on how to implement this carousel into my website? I am using WordPress and I am not sure how to go about this. I was told to use 'foo gallery' to achieve the same look however, it doesn't really feel the same and also didn't work on my site (for some reason).
I have tried to code some of this but I am awful at coding and I am mainly just spending my time watching youtube help videos if I am being honest!
I'll explain my neeed for this and what I would like it to do and then, if you could help me that would be great!
So like on reddit, I would like to implement this feature on my home screen to show off some of the 'Hot topics of the day'. Preferably, some code could automatically update the images and text each day depending on the comments/views left on a page - so the top 4 most viewed pages would be automatically added to the front page with a custom image (which I have created). However, that seems quite hard. So just the layout/template of the images (like the photo provided) AND there is a way for me to manually change the images and names each day would suffice. I would also like to have 4 photos which also act as buttons with the curved boarders.(again, like the image I have attached)
Just so it's clear, I do not want these images to be able to move off like a slideshow, I just want them to stay in place and be able to change either manually or automatically.
Maybe this is called something other than a carousel and would be easy to do... i dont know! So if you do, please let me know.
Furthermore, I appreciate this is a place mainly for code to be posted however, I won't post my code as it is useless! If anyone wants to share any code or contact me privately then that would be very much appreciated.
Thank you

Full-width image with links

I need a full-width image with labeled sections to link to individual pages. Any suggestions how to make this happen? The web site is built on WordPress, so if a plug-in will accomplish this that will work too. Method needs to be responsive and not break apart as viewport is reduced.
For example, Section 1 needs to link to the Section 1 page, etc.
See image at
Well, if you want to have something like that and responsive, you should cut the image in as many pieces as items you need, create an element for each piece and set the image as background. There rest is mediaqueries, maybe you can do it with bootstrap.
Also, try to go to the design community, as this is more related to design than anything else, and I don't think a Wordpress plugin exists for this.

How to make simple HTML page more responsive?

So I've been tinkering with a REALLY simple web page (and this is why this is painful for me - it's a simple page) and I've been trying to make it responsive. I sort of had it looking right on a mobile screen, but the more I tweaked my code, the worse it got on other sizes.
So..I really hope that I'm not asking TOO much - but again the page is super simple, so this might be simple to answer..so I'll just jump in and ask a few questions :/
I want the page's big call to action image to disappear on a phone screen, and I'm trying to get the logo to center and the phone number to center right under it. I'm trying to get the bullet points images to center above the two lines of text..and the contact form to just fall in right below it (contact form was working just fine it seemed, so no big question there)
I'll link a live copy of the page as a reference - and a link to a page I've been mimicking in case it helps.
http://lab.blacksunresearch.com/ is my page
http://landing.trugreen.com/growth29 is the page im mimicking (sort of)
Again, I hope it doesnt sound like a TON of stuff, but the page is so simple, I'm probably only missing a few lines of code in my media queries
Thanks!
Edit: Moose, emoticon removed - also, I did ask a question - "How do I make this page more responsive?"
Open their CSS and look at parts with media-queries. There is what you want.
There are only 2 css which you should look through:
themeform.css
themeresponsive.css
You have to include some css to make it responsive ( Custom css , Jquery ,Jquery Mobile , Bootstrap etc) . Or you can simply put some Media Queries where you want your webpage to Act differently, ie responsive .

How to create a slider / carousel

I was searching for a way to create a sliding window/panel like the one below on jQuery mobile but I could not find any examples.
reference link
Appreciate if anyone can help me out. Thanks
The following code is what you are looking for:
http://codepen.io/redfrost/full/dbrgk
I think it is a good starting point.
I also invite you to see the following address ( 20 Free Responsive Jquery Carousel Slider Plugins ) :
http://designscrazed.com/free-responsive-jquery-carousel-slider-plugins/
Carousel sliders is now a must have feature in all business, portfolio or any website template. Along with fullscreen image sliders we can see that horizontal carousel image sliders works well with any website design and are implemented alongside. Sometimes slider needs to be one by third of a website page and that is where tiny carousel sliders come in with loads of transitions effects and even with responsive layout. eCommerce websites may be the best benefited from these sliders as they need to showcase many pics in an individual post or page. All code here is free to use and you may alter it according to your needs if you are already a developer.