Guide on creating a JQM website with a stunning image carousel

Question

Guide on creating a JQM website with a stunning image carousel

I've experimented with several image carousels for my mobile sites, but none of them are delivering the results I seek.

What I'm looking for is something similar to this site:

If you view the above link on a mobile device, you'll notice the carousel. If the images are too large, they're cropped, centered, and zoomed to fit the screen. I'm trying to achieve a similar effect, but it's proving difficult.

As shown in the image above, there's a white gap between the image carousel and page number. I'd like to resize the images in order to fill these gaps without distorting the aspect ratio. Can anyone offer assistance or insights related to this website?

jquery css image twitter-bootstrap jquery-mobile

Answer 1

Answer №1

If you want to achieve this effect, you can utilize the OWL Carousel plugin available at:

To enable the image 'zoom' feature, simply specify the max-height and max-width css attributes in your styling, like so:

#owl-demo .item img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

A live demonstration can be accessed through this DEMO link

Answer 2

If you want to achieve this effect, you can utilize the OWL Carousel plugin available at:

To enable the image 'zoom' feature, simply specify the max-height and max-width css attributes in your styling, like so:

#owl-demo .item img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

A live demonstration can be accessed through this DEMO link

Answer 3

Answer №2

Why opt for a similar carousel when you can use the one already present on that page?

Check out this live example: http://jsfiddle.net/Gajotres/PFqVs/

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://www.photoswipe.com/latest/photoswipe.css" />        
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://thecodingwebsite.com/tutorials/photoswipe/klass.min.js"></script>            
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>            
        <script src="http://thecodingwebsite.com/tutorials/photoswipe/code.photoswipe.jquery-3.0.4.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="b" data-role="header">
                <h1>Index page</h1>
            </div>

            <div data-role="content">
                <ul class="gallery">           
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/001.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/001.jpg" alt="Image 001" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/002.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/002.jpg" alt="Image 002" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/003.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/003.jpg" alt="Image 003" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/004.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/004.jpg" alt="Image 004" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/005.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/005.jpg" alt="Image 005" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/006.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/006.jpg" alt="Image 006" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/007.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/007.jpg" alt="Image 007" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/008.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/008.jpg" alt="Image 008" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/009.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/009.jpg" alt="Image 009" /></a></li>
                </ul>
            </div>
        </div>    
    </body>
</html>

JavaScript:

$(document).on('pagebeforeshow', '#index', function(){   
    var myPhotoSwipe = $(".gallery li a").photoSwipe({
        jQueryMobile: true,
        loop: false,
        enableMouseWheel: false,
        enableKeyboard: false
    });

    myPhotoSwipe.show(0);      
});

Note:

If you're interested in using a newer version, visit their Github page at: https://github.com/dimsemenov/PhotoSwipe. The original developer is no longer maintaining the code, so avoid using the code from the official site: www.photoswipe.com

Answer 4

Why opt for a similar carousel when you can use the one already present on that page?

Check out this live example: http://jsfiddle.net/Gajotres/PFqVs/

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>jQM Complex Demo</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
        <link rel="stylesheet" href="http://www.photoswipe.com/latest/photoswipe.css" />        
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://thecodingwebsite.com/tutorials/photoswipe/klass.min.js"></script>            
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>            
        <script src="http://thecodingwebsite.com/tutorials/photoswipe/code.photoswipe.jquery-3.0.4.min.js"></script>    
    </head>
    <body>
        <div data-role="page" id="index">
            <div data-theme="b" data-role="header">
                <h1>Index page</h1>
            </div>

            <div data-role="content">
                <ul class="gallery">           
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/001.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/001.jpg" alt="Image 001" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/002.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/002.jpg" alt="Image 002" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/003.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/003.jpg" alt="Image 003" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/004.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/004.jpg" alt="Image 004" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/005.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/005.jpg" alt="Image 005" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/006.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/006.jpg" alt="Image 006" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/007.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/007.jpg" alt="Image 007" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/008.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/008.jpg" alt="Image 008" /></a></li>
                    <li><a href="http://www.photoswipe.com/latest/examples/images/full/009.jpg" rel="external"><img src="http://www.photoswipe.com/latest/examples/images/thumb/009.jpg" alt="Image 009" /></a></li>
                </ul>
            </div>
        </div>    
    </body>
</html>

JavaScript:

$(document).on('pagebeforeshow', '#index', function(){   
    var myPhotoSwipe = $(".gallery li a").photoSwipe({
        jQueryMobile: true,
        loop: false,
        enableMouseWheel: false,
        enableKeyboard: false
    });

    myPhotoSwipe.show(0);      
});

Note:

If you're interested in using a newer version, visit their Github page at: https://github.com/dimsemenov/PhotoSwipe. The original developer is no longer maintaining the code, so avoid using the code from the official site: www.photoswipe.com

Answer 5

Answer №3

Finally, I achieved the desired result I had been aiming for. Surprisingly, instead of using JavaScript, a CSS snippet was provided to help me enlarge smaller images to fit the size of the div without distorting them too much. Here is the compact CSS code:

.small{
transform:scale(1.42,1.42);
-webkit-transform:scale(1.42,1.42);
-moz-transform: scale(1.42,1.42);
-o-transform:  scale(1.42,1.42);
-ms-transform:  scale(1.42,1.42);

transition: all 0.65s;
-webkit-transition: all 0.65s;
-moz-transition: all 0.65s;
-o-transition:  all 0.65s;
-ms-transition:  all 0.65s;
}

Simply include this code in the image tag and it will work perfectly.

**Note:** In order for this CSS technique to be effective, ensure that the image is properly centered within the div.

As evident in the snapshot, the image has been magnified.

Answer 6

Finally, I achieved the desired result I had been aiming for. Surprisingly, instead of using JavaScript, a CSS snippet was provided to help me enlarge smaller images to fit the size of the div without distorting them too much. Here is the compact CSS code:

.small{
transform:scale(1.42,1.42);
-webkit-transform:scale(1.42,1.42);
-moz-transform: scale(1.42,1.42);
-o-transform:  scale(1.42,1.42);
-ms-transform:  scale(1.42,1.42);

transition: all 0.65s;
-webkit-transition: all 0.65s;
-moz-transition: all 0.65s;
-o-transition:  all 0.65s;
-ms-transition:  all 0.65s;
}

Simply include this code in the image tag and it will work perfectly.

**Note:** In order for this CSS technique to be effective, ensure that the image is properly centered within the div.

As evident in the snapshot, the image has been magnified.

Guide on creating a JQM website with a stunning image carousel

Answer №1

Answer №2

HTML:

JavaScript:

Note:

Answer №3

Similar questions

Error retrieving resource: server returned a 404 status code indicating file not found for javaScript and CSS files

What is the method to display all items in a Vuetify Data Table rather than limiting it to 10 rows?

unable to receive JSONP response through JQuery AJAX

Alter the content of a div depending on the values of three different elements

Achieve a left-aligned text section that remains centered using Bootstrap 4

Adjust the HTML layout based on the JSON data provided

The configuration of DataTables with the rowGrouping plugin and specifying aoColumns definitions encountered issues

What is causing this mysterious gap to appear between these two elements?

What is the best method to center a div on the screen?

Steps for adding a JSON object to an unordered list

Setting the default date in angular-bootstrap-datetimepicker: a step-by-step guide

implementing the CSS property based on the final value in the loop

Display content in the View in ASP.NET based on the parameters passed into the ActionResult function

Dynamic forms with live updates in Django

Confusing day and month arrangement seen in Bootstrap UI DateTimePicker calendar popup

Tips for matching the height of a child div to its parent's height:

When one div is hidden, the width of another div will automatically adjust to 100%

How do I utilize Protractor to target a specific div element with a distinctive class and verify its visibility on the page?

How about this: "Implement a slider in the header of a php

Is it possible to disable the save option on a PDF popup window?