I want to make a javascript image gallery
(with 6 thumbnails in a row and as many rows as fit the page.
clicking the thumbnails will bring up a popup box with images and a video)
At the bottom of the page there is a numbered pagination.
However, I would like to make it so that on a mobile platform (android/iphone)
the user can paginate by swiping the pages to go forward or backward.
How do I adjust the pagination for a mobile platform?
Should I use a specific crossplatform tool like sencha to make this gallery?
Have you thought about using JQuery Mobile ?
http://jquerymobile.com/
Related
Just discovered this code and implementation of lightbox2 and added the needed code to some of my webpages.
Looks very good o desktop and also on tablet but I don't like the lightbox in mobile view.
The pictures that are shown on mobile are smaller than the 'normal' responsive view that I get when not using lightbox2.
So my question is in the title: How can I disable the lightbox on mobile?
Regards Arno
Unfortunately this is not possible at this time. The Lightbox script on load will attach event handlers to the target images.
To get around this, you can use different markup on mobile and show hide the content with CSS media queries.
I am creating a responsive web app using Angular and ui-router. I need different states to be loaded depending on what size a user's browser window is via CSS media queries.
e.g. For the main page state, the nav bar will contain different elements depending on what media query is active:
Mobile browser (320px - 480px) the nav bar contains 2 buttons (search & icon logo)
Tablet browser (480px - 770px) the nav bar contains 4 buttons (search, full logo, user profile, settings/options link)
Desktop browser (770px and 1500px) the nav bar contains 6 buttons (full logo, search, upload, user profile, settings/options, log out/in)
So I know I can just load all 6 buttons and just hide certain ones for the mobile and tablet browsers via CSS styles but I am seeking a more elegant approach. I want to load in only what is needed for each window width (media query). Is there a way to do this with Angular and ui-router?
I was lucky enough that a friend showed me this article https://medium.com/opinionated-angularjs/adaptive-web-design-and-angularjs-78e0837fa92 which basically will allow me to do what I need but not by media queries but by feature detection via Modernizr.
Here is the Github project https://github.com/ghengeveld/angular-adaptive-templating
I started working on Mobile First Responsive Design. In mobile, there wont be any sidebar but sidebar is required on desktop so I worked on basic things and then in media query for mobile, hidden that sidebar. Then I needed to make sidebar appear on desktop version of media query.
My question is - How I would have worked on it ?
For the starter, i would like to prefer some basic ideas to build a responsive website:-
Use Layout Flexible
Donot Use tables
Use Media Queries
Use Mobile Viewport Meta Tag
A basic example for a responsive website is that suppose you have a website with content and sidebar which is floated with 70% and 30% width, in mobile or shrink screens, the content panel and sidebar will be width 100% and float none...
That's a simple example for a responsive website...
Rest you can use framework for responsive websites like Twitter Bootstrap or Kendo UI and etc...
I searched for this and couldn't find any references to this.
In my iOS universal app, I wanted to display the information icon (same as the utility application) at the bottom right of my main view controller and use the same both for iPhone and iPad to flip over to display information about my app and other things. On the iPadd Utility application template with XCode 4.6, the information icon is displayed as a button on the navigation bar and a UIPopOver control is used to display information.
In my case, I don't want to use a UIPopOver on the iPad but use the same flip over effect both for iPhone and iPad when clicking the information icon. Is this a valid as per Apple's guidelines or guaranteed for rejection?.
I do exactly what you're thinking of doing in my app. I used the flip transition to display my info page using the information icon as the button image. I had no problems with Apple regarding this when I submitted.
There are a lot of jQuery image gallery plugins and swipe gesture ones for mobile website.
I want to combine two of them on my website. there's no problem using one but if I try to use two at a page. It doesn't seem to work well. Probably conflict.
I use wookmark which is great for thumbnail list on mobile. I want to apply finger swipe paging to this image list.
I could creat a list page with thumbnails...
Now I just want to swipe for next page for more images.
The similar sample is here:
http://m.search.naver.com/search.naver?sm=mtb_hty.top&where=m_image&query=Amanda+Seyfried