Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I have a webpage with 8 thumbnail images on it:
Each thumbnail as shown is a different kitchen. I want to be able to click on each thumbnail and enter a gallery of 4 closeups of that kitchen. I could obviously create 8 different web pages with their individual galleries on it, but in this modern era of web programming im sure there is a more efficient way of just creating one page whos content is dependent on which thumbnail was clicked?
My issue is im new to JavaScript and so cant think of how to implement this, and I know that variables cant be passed from one html page to another as its just a markup language! Maybe the whole thing could be programmed in this one webpage with a 'pop-up' window (not one of those annoying pop up windows but more one of those cool looking transparent 'overlay' pop-ups!) as this would easily be able to know which image was clicked. Any ideas out there??
There are a number of "Lightbox" type javascript/jquery applications you can try or any number of photo galleries.
Here are a few that I've used in the past:
http://lokeshdhakar.com/projects/lightbox2/
http://fancybox.net/
http://leandrovieira.com/projects/jquery/lightbox/
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 5 days ago.
Improve this question
Good morning,
I want to create gallery for multiple pictures (basically two photos before and after procedure next to each other). My plan was to create it as sliding gallery, where you click and other two pictures will slide on the site, but my client wants pop-up gallery. He wants me to display all pictures as pairs in big separate window which will pop up after clicking on button.
Any tips will be much appreciated, maybe “popup” just is not the term I need.
Thank you!
I tried multiple solutions from internet, but all were for text or forms and when I put pictures there, it did not show them on the web.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
Thank you in advance for your help!
For a project I'm building a page for an animal shelter. On a page I have a list of available animals generated from JSONP data, with a picture and basic data.
I would like to create something so that if the user clicks on the animals picture, it shows the full info for the animal, and all the available pictures.
I'm not sure what the best way to do this would be? A modal? A new html page? We're only using front end (html, CSS, javascript).
you can use bootsrap modal as it fits perfectly to your needs and you can customize it the way you want :
https://v4-alpha.getbootstrap.com/components/modal/
Bootstrap modal is best to show full details.Because users dont want to load pages all the time.
For Bootstrap modal go to this link
https://www.w3schools.com/bootstrap/bootstrap_modal.asp
When you want to display with comments of that blog use new html page.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I want to create a webpage with several small tiles that enlarge when clicked (And show more/different content, but that's not a part of this question).
This is what I have now: http://puu.sh/nX929.png
When I click on the first tile, it looks exactly like I want it to: http://puu.sh/nX9l9.png
But when I click the second tile it looks like this: http://puu.sh/nX95G.png (gap on the left)
That's not what I want, I want to other (small) tiles to float around it. To fill the empty space.
The source code (+ live example) can be found here (but I wouldn't mind doing it in a completely different way): https://www.crescendosassenheim.nl/Hugo/Training/
I don't even know what to Google, because I have absolutely no idea what kind of technique I can use to achieve what I want. Any suggestions?
http://masonry.desandro.com/methods.html Take a look at this I am sure this will help you, what you want is even displayed at the bottom of the page i am linking.
Download masonry in your computer link to it and follow the little guide in their website.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm looking to create a web page that incorporates an image of a house - with various parts of the house responsive to mouse clicks. The house would be the single primary element on the page.
Given that I will probably employ an illustrator to make an image, should I:
try and make it 'box-like' so that I can do it in HTML5/CSS3
use SVG to get as close to the design as possible
use an imagemap and Javascript for detecting the clicks on the image
if it was a chart-type infographic, I would use a charting JS library but it's more of a custom image.
Links to informative URLs or example pages would be greatly welcomed.
I'd suggest using SVG.
In this way you don't compromise on the quality of the image yet you retain an easy way to 'assign' certain parts of the image to have event handlers attached to them.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
To start off, here's a picture of the website project:
http://i.imgur.com/FbdUmpp.png
The top image is one of the cycling images in the website banner. I'd like to make my website a bit more polished. When the user navigates to a new webpage, the banner animation will restart. I was wondering how I could stop this from happening.
How can I keep the banner from restarting when a user switches a
webpage?
What's the exact name of what I'm trying to accomplish? (I can't seem to find any information about this subject.)
My knowledge is limited to HTML, CSS, a little bit of PHP and JavaScript. I don't mind learning a new language in order to achieve this.
Thanks in advance!
Well the animation restart is due to the content being reloaded when you land on the new page. There is no way around that specifically. However you can change the content on the screen without actually navigating away. Look into AJAX to accomplish this. Have an AJAX call get the new data that you want to view and place it on the current screen in place of the old data. This way you will still get the new information and the animation of the banner will continue without stops or restarting.