This is probably going to seem like a stupid question and I've probably glossed over something and missed the answer but is it possible to have one link which will lead to multiple images or an image directory?
I am making a website for a restaurant and ideally I would like a textual link for the menus (each of which are comprised off 3+ images).
Initially I created a separate page for each menu with an image gallery in it and the link pointing to the respective page but due to the restrictions off needing a user input event to make the gallery full screen I decided against using this idea.
I am currently using I frames for the menus but they don't fit in as nice as I would like with the design off the website and I am running into issues with them going full screen on iOS mobile.
Related
How do I make collection images bigger on my website? I use Shopify eCommerce. Individual images are good. they appear big and resolution is decent as well. however in category pages images are a bit smaller.
I'm not really good at HTML. but I'm trying to figure it out for days now.
You can use element inspector in browser to find images and their classes on collection page. And when you will find out the needed classes, you can update css styles for it to make images bigger. If you provide us with a link to your store, I will give you more precise guideline.
I have been working hard on assembling photos into a travel blog. Currently I am reading about how to make full page image carousels. The specific problem I have is this: I want to have an image carousel of 100 pictures. At different points in the blog I want the user to be able to enter the same carousel at different images in the sequence. Currently I have to duplicate the code for the 100 images at each point in the blog. I am trying to figure out how to refer to the same html from different parts of the web page. Here is an example:
https://bwanaaa.github.io/flicktest/
The first image is a full bleed cover. The next two galleries are the same gallery but different starting points. I had to list all 10 images in the html TWICE to achieve this. You can imagine how verbose the html gets if i have 50 images with 10 entry points.
Here is a codepen to experiment with:
http://codepen.io/littleredbowtie/pen/yNdOMQ
Is there a way to have a 'subroutine' in html?
This can't be resolved through HTML alone. You'll have to implement further JS functionality, or find a different plugin.
Here is a plugin that is closer to what you're looking for:
https://github.com/stylehatch/photoset-grid
Demo:
http://stylehatch.github.io/photoset-grid/
it makes a grid of photos, then you also add the lightbox functionality, whatever photo they click on, it will go to that photo in the photoset, and also have navigation icons comparable to a carousel.
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.
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 .
First time overflowing the stack.
I'm making a website with several html pages that are identical except for the fact that they contain different images that are more or less identical in size - and thats how they are named, by the jpg that they feature.
The pictures look great with the website, but I have a 300 pixel header that pushes them downward > forcing you to scroll down to see the full image. This is built into the shared CSS for all these gallery pages.
I have simple text links below the images that are hard coded to point to the next image in the gallery. (I have a list of the 20 images im displaying). When someone clicks the image, it goes to that page and resets the scroll to the top, which makes the header push the image area down.
Can anyone tell me how to prevent the scroll reset behavior of the new link?
Without using something like jQuery, you could link the pages such that you have an anchor tag like <a name="gallery"></a> above the images on each page and when giving the link to the various pages, append a #gallery to the url such as Next Image. This is duplicated on each page however, and will not produce a robust webpage. You'll want to change things in the future and this will cause problems and further work, so I would consider a dynamic alternative.
Note this won't look as seamless as with jQuery and using AJAX to load in the images when needed. Or better yet, as most JS galleries work, load the images into the page invisible at first and then with JS have them show up on the link click. The benefit of this would be that you could generate the links in JS using the provided images. If the images are large enough that they may cause considerable lag on page load, consider making placeholder images of some sort. In any case, take a look at lightbox 2.
Also, I didn't get the feeling you were using any server side scripting to create this gallery. If the js solution doesn't suit you or you find the added benefit of generating part of the website automatically based on the content need at the time, take a look at using something like PHP, Python, Ruby, etc. If it's just a simple website you're after, a great solution might be Wordpress.
You could have one page and just replace the images?
http://www.quirksmode.org/dom/fir.html
Now of course you change the function to work on a "previous/next" button system, assuming you have a photo gallery of some sort.
Please post more details.
You want your link to look something like this:
<a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section</a>
and you want to give your image an id="tips" in this case.
Check out this fiddle to see an example. The only difference is that your href will have the rest of the url in there like the code posted above.
http://jsfiddle.net/QgzsL/