put images in split by pages - html

I have 100 images to put on my website in one div. I want to put 20 images and give page numbers in the down, so that if user clicks on '2' it takes to next 20 images. How is this possible. I have tried searching, but could not find any answer

Depends really how your page serves these images. If you have a static HTML page then your only option would be to use JavaScript/jQuery.
If info about your images is serves from a database behind your web application then you can use pagination and routing. For instance you could have an url http://mydomain.com/images and this would select the first 20 images from your database then bellow you gallery you can have a set of links Previous and Next and when you click on Next it takes you to the url http://mydomain.com/images/20 still the gallery page only /20 appended to it to use as an offset for your SQL Query.
Tho seems what you really need is just a simply jQuery image gallery something like this:
http://www.tn3gallery.com/?refCode=fe8775
http://galleria.io/
http://spaceforaname.com/galleryview/#
http://tympanus.net/codrops/2010/06/24/multimedia-gallery/

Related

How to make a Bootstrap page?

I must make a webpage using Bootstrap.
These are the requirements:
1 page in bootstrap. We have attached a handmade sketch. The page will have a list. In each list, there will be a title, 8 text fields in the group of 2 divided into 4 parts.
For example, FirstName: Oracle(2 fields), LastName: Maven (2 fields), and so on, an image slider, which can have minimum 1 and maximum 3 images in it. We can view the image on a big scale and zoom in zoom out the image. Below the slider will be Approve and Reject button which will be visible ONLY at the last Image. The right side of the section will contain 11 Input fields along with the labels. all are optional. Below the 11 fields will be a submit button. This will repeat like a list.
This is the sketch:
I don't understand how to do the lists.
I would be very grateful if you could help me.
If you didn't use Bootstrap and don't know how it's function better download some tool for making bootstrap sites or if you are familiar download a template.
Take a look on Pingendo, it's a drag and drop desktop application (you also have web) and just pick which element you want and drop it on the page...

Display results of a google image search

I want to know if it's possible to display the first n images of a google image search (with a pre-defined search keyword) on my page.
For instance, I have this link
https://www.google.com/search?tbm=isch&q=red+apple
I want to display the first 5 result on my website on page load.
I would like to solve this without a server, on client side when the visitor visits the page.
Is this possible?

Displaying image content types as grids in drupal 7?

I am currently using the Views and Display Suite modules to create a page that works as an image gallery. You click on the menu button to take you to a page (the view) that has multiple links to nodes (individual galleries).
When you click these nodes, they take you into the separate page and show all images uploaded using the "event" content type that I made.
The event content type has one field (type: image) that uses a multiupload widget, allowing for multiple file uploads.
However, the images on the node are displayed within divs, so they all have their own rows basically. I would like to know if it was possible to put them all into grids, and if so; how? I tried using display suite, but I only have that one field to work with.
If you want to get a fully customized page and arrange the fields just like you want, use the theme suggestions.
For a node of type "event", as you said, it would be node--event.tpl.php. You can duplicate the code inside the base template node.tpl.php of your parent theme (or if you don't have one, of Bartik for example) to have a good starting material.
Just rearrange the div, the tags, the variables as your convenience, add some custom CSS to make your grid, and you should be done!
I hope it helps.

Different size photos using mysql and repeat statement

Is it possible to have a homepage which shows 12 different sized photos using 1 repeat statement (while, do, etc)
The database holds the photo name (name.jpg) and the hard coded path to the image folder are held in the main coding of the page.
When the images are uploaded, they are all the same size, but want to show them at different width and height sizes on the homepage.
Yes, it it possible, either by separate array were width/height stored for each photo, or you can go with random

Do AJAX calls make DOM heavier in size?

I have a 3 column structure for my site.
Links are shown at Left hand side layout.
User clicks a link, and I trigger an AJAX call to load middle column of layout. I load a complete template file in the middle column.
My question -
When user clicks another link, I make another AJAX call to load middle column.
After each sub sequent ajax call, does my DOM gets heavier in size, as I am loading different htmls in middle column, without refreshing whole page ?
No. If you are replacing the data with new data then the old data is discarded.
Well, yes your DOM as you say is technically bigger and you are dynamically injecting HTML. However, this should not be an issue, and certainly not on the client. Size is only of concern if you are downloading the whole page.