I am a back-end developer and I'd like to create a little website using angular and boostrap.
I would like to create a galerie, and I have been looking around to see how it's done. I found a correct example on the following link : https://blueimp.github.io/Bootstrap-Image-Gallery/
In that case, the images are taken from flickr api, which sends 2 different pictures (small and large). The small one is the thumbnail, and when you click on it, it opens the large one.
My question is the following one : let's say I have all my images of different sizes, and that I would like to have thumbnails of those (same size, but responsive !) to create my gallery, what would be the way to do that? With css only?
Create parent <div> with fix width then add img inside by applying width:100% on image and height:auto. Please try to implement the example you found and if you find any issues post with your code.
Related
i am currently doing a challange on frontend mentor but i have a problem with the background images i used to create the curved sections, if you go to the developer's page, and expand the screen to let's say 2000px, the curved section do not expand
A picture of what i am describing
The code to the github repository is https://github.com/Nadine-Green/Huddle-Landing-Page-With-Curved-Sections, i was thinking of using it as a direct image instead of it being a background, but i just wanted to hear from you all first.
I checked your GitHub repository and couldn't find the specific code referring to your attached screenshot containing curved background images.
Anyways refer to this it will help you take a better understanding of how to use background images properly on all screens (responsive).
If you are able to share the specific code snippet you are referring to with your question I would be able to help you further on.
I'm having trouble getting Revolution Slider (version 5.2.5.3) to work properly on my website and I'm looking for some help.
For reference the test page I'm using can be located here: http://www.capidale.co.uk/home-2
The problem I'm having is the background images on each slide are "zoomed" in. All images are 960x350 and I've set the grid settings also for 960x350. However, inspecting the code, the background images appear to being assigned values of 1653x549.
I've racked my brain but I just can't get it to work. I've tried using the images as "layers" and setting the background to transparent. But then I can't get the images to display at all.
Appreciate any help. Thank you.
i have looked at the code and it says the natural values for the
Best best is to resize the images so they are 960x350 this should fix the issue if the image is zoomed still on the styling of the image set max-width:960; and max-height:350;
to save you the trouble use this image and replace the existing img, if it works then this is due to the natural sizes of the image
:D
i have seen several websites which does this including weheartit.com,tumblr flipkart .
when we place cursor on images it shows several additional links like comment,share,like etc however when that image is clicked it takes to some other links.
here are few links which i am interested if anyone can guide for this type of css formatting it will be a great help.
place ur mouse on any of the offers like electronic offers etc you can see share image will come over images
http://www.flipkart.com/offers?otracker=hp_widget_banner_0_image
go to any image you will see nice css effects and details will appear once the cursor goes above images here
http://weheartit.com/?page=1
please give sample example with one image atleast
You may check this out. The concept is called mouse over/hover effects, You can search on Google and find many similiar examples.
Check the following example from css-tricks:
Slide-in Captions
You should find the code within the example sites you provided in your description. For the site http://www.flipkart.com/offers?otracker=hp_widget_banner_0_image , the name of the div that contains the share contents is sharebox.
The CSS file that contains the styling and CSS effects for sharebox is the following:
http://img6a.flixcart.com/www/prod/lego-da812168-nogz.css
Search that for sharebox and try to figure out how they do it.
I am using a wordpress version of Supersized. My issue is that I wish to have this nice resizable full-width image gallery but be able to place the content below. An example of how I wish it to perform here; http://www.pedinilondon.co.uk/ They are using the non-wordpress version so are easily able to break it out of the template.
Is it simply a case of CSS or div manipulation or am I running into a brick wall with this? Should I be using a different knd of slideshow to achieve what I want?
Thanks
What you want sounds like fluid images (responsive design), which there seems to be a plug-in for that. http://wordpress.org/extend/plugins/wp-fluid-images/faq/
I've just started using CSS spritesheets to significantly reduce the number of requests a user makes on our webserver (previously I had designed a page with 200 thumbnails, each linked separately, so that was 200 requests just for those and didn't know it was an issue until someone told me about it)
After going through w3schools I have figured out how to use it and have downloaded spritesheetpacker to help me make the spritesheet as well as give me the dimensions and offsets.
Now I have a CSS file that's extremely long, and am not looking forward to tagging 200 HTML elements manually. Is there a different way to deal with this situation? Here are some details:
I am familiar with javascript (not much JQuery though)
I have all of the dimensions and offsets for the images from the packer.
The page contains a table with a column for thumbnails, and another column with a link to the file associated with it, so people can quickly scroll through the page and pick what they want. You can also click on the thumbnail to see a full-size picture
I am currently displaying the image using the img tag and wrapping them with anchors, where the img class is just the picture filename (since it is also included with the output from the packer)
You can save a bit of CSS by grouping things together with similar dimensions and then just coding the background images.
<a class="buttonA Image5"></a>
.buttonA {
width:100px;
height:30px;
display:block;
}
.image5 {
background-image:url(...);
background-position:....
}
If you use display:block on your anchors, you can use a CSS background on it and eliminate the image tag completely.