x 024 shop modal

01 - Get Started

Note: This documentation Page is only for x 024 shop modal layout. It has no link with other layouts if you want to read their documentation then click here

Required Files And Folders

Please follow the instructions:

Please upload the paradise folder to your server. In this folder you will find the following sub folders containing all of the slides content:
- js
- css
- fonts
- images
- font-awesome
If your Paradise Slider is placed in a different folder, don’t forget to change the file paths in the upcoming examples!
This step is very important, because product functionality depends on these files, so please first of all attach these files carefully. CSS in <head> section and JavaScript in <body> section:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet" type="text/css">
<link href="paradise/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="paradise/css/bootstrap.css" rel="stylesheet" media="all">
<link href="paradise/css/animate.css" rel="stylesheet" media="all">
<link href="paradise/css/min/paradise_slider_min.css" rel="stylesheet" media="all">
<script src="paradise/js/jquery.js"></script>
<script src="paradise/js/bootstrap.js"></script>
<script src="paradise/js/touchSwipe.js"></script>
<script src="paradise/js/paradise_slider_min.js"></script>

Note: All these files are only for x 024 shop modal layout only

Or by using CDN

You can load Bootstrap and jQuery files with a single line of code from their official online sources. You don't even have to download or install anything!

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

mega vs single

You can use Paradise Slider CSS in two ways:

You can use only one Compressed or UnCompressed CSS file for all Paradise Slider layouts. You can find these files in the sub folder min in main css folder.
As well as concern to other method, you can use a single CSS file for a single Paradise Slider layout. You can find all of these files in the main CSS folder. In this case you can use only x_024_shop_modal.css file.

HTML Markup

After attaching all of the above files, insert following HTML to the <body> section. This HTML defines your Modal and Slider content.

Trigger Part

The modal plug-in toggles your hidden content on demand. A modal always appears when we click on some content. In this example we have used an Image Gallery to Trigger the Modal. You can also use link, button etc to trigger the Modal.


<!--
  In this example we have used a 4 columns Image Gallery to Trigger the Modal.
  You can also use link, button etc to Trigger the Modal.
-->
		
		
<!-- Paradise Gallery For Modal -->
<div class="container-fluid x_024_shop_modal_gallery" role="dialog">
  <div class="row"> <!-- .row -->
   
    <div class="col-6 col-sm-3"> <!-- 1st columns -->
      <img src="paradise/images/x_024_shop_modal_01.png" alt="x_024_shop_modal_01" data-toggle="modal" data-target="#x_024_shop_modal">
    </div>

  </div> <!-- /.row -->
</div> <!-- /.x_024_shop_modal_gallery -->

how it works?

To trigger the modal window, you need to use a button, link, image, heading etc.

Then include the two data-* attributes:

data-toggle="modal" opens the modal window
data-target="#myModal" points to the id of the modal. In above example as you can see we have used data-target="#x_024_shop_modal". In this layout we have assigned #x_024_shop_modal Id to the Modal.

The below examples are showing that how can we trigger modal by using the different methods besides Image Gallery


<a href="#" data-toggle="modal" data-target="#x_024_shop_modal">Open Modal</a> <!-- By Using Link -->
		
<img src="image.jpg" alt="" data-toggle="modal" data-target="#x_024_shop_modal"> <!-- By Using Image -->
		
<button type="button" data-toggle="modal" data-target="#x_024_shop_modal">Open Modal</button> <!-- By Using Button -->

Modal And Slider Part

This part contains the Complete Markup for Modal and Slider as you can see below. You can read complete tutorial about Bootstrap Modal Here


<!-- Paradise Modal -->
<div id="x_024_shop_modal" class="modal fade x_024_shop_modal x_024_shop_modal_size" role="dialog">
  <div class="modal-dialog"> <!-- Modal Dialog -->
    <div class="modal-content"> <!-- Modal Content -->

      <a href="#" data-dismiss="modal" class="x_024_shop_modal_close">close</a> <!-- Close Button -->
	  
	  
      <div class="row">
	  
        <div class="col-12 col-sm-5 col-md-5">

          <!-- Paradise Slider -->
          <div id="x_024_shop_sldr" class="carousel slide x_024_shop_modal_indicators thumb_scroll_x swipe_x
          ps_easeOutInCubic" data-ride="carousel" data-pause="hover" data-interval="false" data-duration="2000">

            <!-- Wrapper For Slides -->
            <div class="carousel-inner" role="listbox">

              <!-- First Slide -->
              <div class="carousel-item active">
                <!-- Slide Background -->
                <img src="paradise/images/x_024_shop_modal_01.png" alt="x_024_shop_modal_01">
              </div> <!-- /carousel-item -->
              <!-- End of Slide -->
			  
              <!-- Second Slide -->
              <div class="carousel-item">
                <!-- Slide Background -->
                <img src="paradise/images/x_024_shop_modal_02.png" alt="x_024_shop_modal_02">
              </div> <!-- /carousel-item -->
              <!-- End of Slide -->
			  
              <!-- Third Slide -->
              <div class="carousel-item">
                <!-- Slide Background -->
                <img src="paradise/images/x_024_shop_modal_03.png" alt="x_024_shop_modal_03">
              </div> <!-- /carousel-item -->
              <!-- End of Slide -->
			  
              <!-- Fourth Slide -->
              <div class="carousel-item">
                <!-- Slide Background -->
                <img src="paradise/images/x_024_shop_modal_04.png" alt="x_024_shop_modal_04">
              </div> <!-- /carousel-item -->
              <!-- End of Slide -->

            </div><!-- End of Wrapper For Slides -->
			
            <!-- Indicators -->
            <ol class="carousel-indicators">
              <!-- 1st Indicator -->
              <li data-target="#x_024_shop_sldr" data-slide-to="0" class="active">
                <!-- 1st Indicator Image -->
                <img src="paradise/images/x_024_shop_modal_01.png" alt="x_024_shop_modal_01">
              </li>
              <!-- 2nd Indicator -->
              <li data-target="#x_024_shop_sldr" data-slide-to="1">
                <!-- 2nd Indicator Image -->
                <img src="paradise/images/x_024_shop_modal_02.png" alt="x_024_shop_modal_02">
              </li>
              <!-- 3rd Indicator -->
              <li data-target="#x_024_shop_sldr" data-slide-to="2">
                <!-- 3rd Indicator Image -->
                <img src="paradise/images/x_024_shop_modal_03.png" alt="x_024_shop_modal_03">
              </li>
              <!-- 4th Indicator -->
              <li data-target="#x_024_shop_sldr" data-slide-to="3">
                <!-- 4th Indicator Image -->
                <img src="paradise/images/x_024_shop_modal_04.png" alt="x_024_shop_modal_04">
              </li>
            </ol>

          </div> <!-- End Paradise Slider -->

        </div> <!-- End Grid -->
		
        <!-- Description Box -->
        <div class="col-12 col-sm-7 col-md-7">

                <!-- Content -->
                <div class="x_024_shop_modal_txt">

                  <h1>complete name of product, company and modal number</h1>
                  <ul>
                    <li><span class="fa fa-star"></span></li>
                    <li><span class="fa fa-star"></span></li>
                    <li><span class="fa fa-star"></span></li>
                    <li><span class="fa fa-star-half-o"></span></li>
                    <li><span class="fa fa-star-o"></span></li>
                  </ul>
                  <!-- Price -->
                  <h2>$250.00</h2>
                  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam nibh. Nunc varius facilisis eros. Sed erat.
                  In in velit quis arcu ornare laoreet. Curabitur adipiscing luctus massa. Integer ut purus ac augue commodo.
                  Nunc nec mi eu justo tempor consectetuer. Etiam vitae nisl. In dignissim lacus ut ante.
                  Cras elit lectus, bibendum a, adipiscing vitae, commodo et, dui.</p>
                  <form action="#">
                    <div class="x_024_shop_modal_form_num">
                      <label>quantity</label>
                      <input type="number" name="quantity" min="1" max="20">
                    </div>
                    <div class="x_024_shop_modal_form_color">
                      <label>colors</label>
                      <select name="colors">
                        <option value="red">red</option>
                        <option value="green">green</option>
                        <option value="blue">blue</option>
                        <option value="yellow">yellow</option>
                      </select>
                    </div>
                    <div class="x_024_shop_modal_form_size">
                      <label>size</label>
                      <select name="size">
                        <option value="10">10</option>
                        <option value="12">12</option>
                        <option value="14">14</option>
                      </select>
                    </div>
                    <div class="x_024_shop_modal_form_btn">
                      <button type="submit">add to cart</button>
                    </div>
                  </form> <!-- /Form -->

                </div> <!-- /.x_024_shop_modal_txt -->

        </div> <!--End Grid -->

      </div> <!--/.row -->

    </div> <!-- /Modal Content -->
  </div> <!-- /Modal Dialog -->
</div> <!-- End Paradise Modal -->

Note: The Above HTML Structure is only for x 024 shop modal layout

02 - Modal And Slider HTML Elements

Bootstrap Modal Contents

Bootstrap Modal is the foundation of this Layout. The main structure of Bootstrap Modal which is used in this layout is as following:


<!-- Paradise Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog"> <!-- Modal Dialog -->
    <div class="modal-content"> <!-- Modal Content -->

	  
	  
    </div> <!-- /Modal Content -->
  </div> <!-- /Modal Dialog -->
</div> <!-- End Paradise Modal -->

We have assigned our own id to the first <div> that is x_024_shop_modal (x_024_shop_modal). If you are using more than one modal on one page then this Id should be unique and different from each other Ids of the modals. You can also consult the following link about Bootstrap Modal:

Bootstrap Modal

Bootstrap Carousel Contents

Bootstrap Carousel is the foundation of this slider. The main structure of Bootstrap Carousel which is used in this layout is as following:


    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-pause="hover" data-interval="15000">

        <!-- Wrapper For Slides -->
        <div class="carousel-inner" role="listbox">

            <!-- Slide -->
            <div class="carousel-item">

                <img src="image.jpg" alt="image" />

            </div>

        </div

    </div>

We have assigned our own id to the first <div> that is x_024_shop_sldr (x_024_shop_slider). You can also consult the following link about Bootstrap Carousel:

Bootstrap Carousel

Note: The active class needs to be added to the first slide. Otherwise, the carousel will not be visible.

03 - Classes

Modal

We have used following our own classes and id in this layout, that control and change the whole Modal.

#x_024_shop_modal : Describe the Modal's Unique Id.

.modal: Describe the content as a modal and brings focus to it.

.fade : Enable Transition Effect which Fades the modal In and Out. Remove this class if you do not want this effect.

.modal-dialog : This sets the proper width and margin of the modal.

.modal-content : The div which has .modal-content as a class name contains the Slider

Slider

We have used following our own classes and id in this layout, that control and change the whole slider.

.swipe_x: This class enables Horizontal swipe function

#x_024_shop_sldr : Describe the Slider's Unique Id.

.x_024_shop_modal_indicators : Enable Styles for thumbnails

.thumb_scroll_x: This class enables Horizontal scroll function for indicators

.slide : Enable Sliding Effect.

.ps_easeOutInCubic : This class enables Transition Timing Function for Slide Effect

04 - Fonts

We have used the following Fonts in this layout. You can download these fonts from google fonts to get the same result of layout

Roboto

07 - Slider Settings

We have created a separate page for slider settings please Click Here

08 - Images

The size of the images that we have used are 800 x 800 in pixels.

1:1 Alway keeps its aspect ratio when you want to change the size of the image

09 - Support

Please do not hesitate if you have any queries about this product. We are always there for your help. You can contact us on this e-mail address szthemes1@gmail.com