images draggable

jbsantamaria
Tourist
4 0 1

right now only the first image is draggable somehow, the rest in the section don't work despite having the ID tag on them.

{%- liquid
  assign slider_is_enabled = false
  if section.settings.mobile_layout == 'slider' and section.blocks.size > 1
    assign slider_is_enabled = true
  endif
-%}


<!--  JO CODE -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#draggable" ).draggable();
//      $( ":image" ).draggable();
  } );
  </script>
<!--  JO CODE -->

<section
  class="custom-content{% if slider_is_enabled %} custom-content--slider{% endif %}"
  data-section-id="{{ section.id }}"
  data-section-type="custom-content"
  {%- if settings.show_product_modal -%} data-product-modal="true"{%- endif -%}
  {%- if slider_is_enabled -%} data-slider="true"{%- endif -%}>
  {%- if section.settings.title != blank -%}
    <h2 class="custom-content__heading h4 center">{{ section.settings.title | escape | upcase }}</h2>
 
  
<!--   <img id="draggable" src="https://cdn.shopify.com/s/files/1/0516/9617/3219/t/3/assets/STICKERS_0013_HAPPY-FLOWER-BLUE.png?v=1625865511" width="200" height="auto"> -->
  
  {%- endif -%}

  <div{% if slider_is_enabled %} data-slide role="region" data-label="{{ 'products.slider.media_gallery' | t }}"{% endif %}>
   
    
    
    
    <div class="custom-content__wrapper">
      
      

      
      <div{% if slider_is_enabled %} class="custom-content__slider" id="Gallery-{{ section.id }}" id="draggable" data-media-strip-wrapper{% endif %}>
        <div  class="custom-content__blocks custom-content__blocks--{{ section.settings.mobile_layout }}{% if slider_is_enabled %} gallery__strip{% endif %}" {% if slider_is_enabled %} data-media-strip{% endif %}>

          {%- for block in section.blocks -%}
            {%- assign starting_index = forloop.index -%}
            <div id="draggable" class="custom-content__item custom-content__item--align-{{ block.settings.alignment }} custom-content__item--{{ block.settings.width }}
              {% if slider_is_enabled %} custom-content__slide{% endif %}
              {% if forloop.first and slider_is_enabled %} is-active{% endif %}"
              {%- if slider_is_enabled -%}
                data-media-wrapper
                data-media-id="{{ block.id }}"
                data-media-id="draggable"
                data-media-image
                data-media-index="{{ forloop.index }}"
                data-media-label="{{ 'products.slider.media_index_of_total' | t: index: forloop.index, indexTotal: forloop.length }}"
              {%- endif -%}
              {{ block.shopify_attributes }}
              >
              {%- case block.type -%}
                {%- when 'image' -%}
                  {%- if block.settings.image != blank -%}
                      <img srcset="{%- if block.settings.image.width >= 311 -%}{{ block.settings.image | img_url: '311x' }} 311w,{%- endif -%}
                          {%- if block.settings.image.width >= 622 -%}{{ block.settings.image | img_url: '622x' }} 622w,{%- endif -%}
                          {%- if block.settings.image.width >= 503 -%}{{ block.settings.image | img_url: '503x' }} 503w,{%- endif -%}
                          {%- if block.settings.image.width >= 1006 -%}{{ block.settings.image | img_url: '1006x' }} 1006w,{%- endif -%}
                          {%- if block.settings.image.width >= 685 -%}{{ block.settings.image | img_url: '685x' }} 685w,{%- endif -%}
                          {%- if block.settings.image.width >= 1370 -%}{{ block.settings.image | img_url: '1370x' }} 1370w{%- endif -%}"
                        sizes="(min-width: 1200px) calc((1200px - 19.5rem) / 2), (min-width: 750px) calc((100vw - 19.5rem) / 2), calc(100vw - 6.4rem)"
                        src="{{ block.settings.image | img_url: '503x503' }}"
                        width="{{ block.settings.image.width }}"
                        height="{{ block.settings.image.height }}"
                        loading="lazy"
                           
                        id="draggable"   
                           
                        class="custom-content__image"
             
                        alt="{{ block.settings.image.alt | escape }}">
                  {%- else -%}
                    {{ 'image' | placeholder_svg_tag: 'placeholder-svg' }}
                  {%- endif -%}
                {%- when 'text' -%}
                  <div class="custom-content__text{% unless block.settings.align_text == 'left' %} custom-content__text--{{ block.settings.align_text }}{% endunless %}">
                    {%- if block.settings.title != blank -%}
                      <h3 class="h2 custom-content__text-title{% if block.settings.text_size == 'large' %} custom-content__text-title--{{ block.settings.text_size }}{% endif %}">{{ block.settings.title | escape }}</h3>
                    {%- endif -%}
                    {%- if block.settings.text != blank -%}
                      <div class="custom-content__rte{% if block.settings.text_size == 'large' %} custom-content__rte--{{ block.settings.text_size }}{% endif %} rte">
                        {{ block.settings.text }}
                      </div>
                    {%- endif -%}
                    {%- if block.settings.button_label != blank and block.settings.button_url != blank -%}
                      <a href="{{ block.settings.button_url }}" class="custom-content__button button">
                        {{ block.settings.button_label | escape }}
                      </a>
                    {%- endif -%}
                  </div>
                {%- when 'product' -%}
                  {%- liquid
                    assign product = all_products[block.settings.product]

                    if product == empty
                      assign onboarding_title = 'homepage.onboarding.product_title' | t
                    endif
                  -%}
                  <div class="custom-content__product-wrapper" data-product-card tabindex="-1">
                    {%- if settings.show_product_modal and product != empty -%}
                      <noscript>
                        <a href="{{ product.url | default: '#' }}" class="custom-content__product custom-content__product--no-js full-width-link">
                         <span class="visually-hidden">{{ product.title }}</span>
                        </a>
                      </noscript>
                    {%- endif -%}
                    {%- if settings.show_product_modal and product != empty -%}
                      <button
                        class="custom-content__product full-width-link"
                        data-product-card-link-url="{{ product.url | default: '#' }}"
                        data-product-card-link
                        aria-haspopup="dialog">
                    {%- else -%}
                      <a href="{{ product.url | default: '#' }}" class="custom-content__product full-width-link">
                    {%- endif -%}
                      <span class="visually-hidden">{{ product.title }}</span>
                    {%- if settings.show_product_modal and product != empty -%}
                      </button>
                    {%- else -%}
                      </a>
                    {%- endif -%}
                      {%- unless product == empty -%}
                        {%- if product.featured_media == blank -%}
                          <div class="custom-content__product-no-image-card">
                            <h3 class="h2 custom-content__product-title">
                              {{ product.title | escape }}
                            </h3>
                          </div>
                        {%- else -%}
                          <img srcset="{%- if product.featured_media.preview_image.width >= 311 -%}{{ product.featured_media.preview_image | img_url: '311x' }} 311w,{%- endif -%}
                                {%- if product.featured_media.preview_image.width >= 622 -%}{{ product.featured_media.preview_image | img_url: '622x' }} 622w,{%- endif -%}
                                {%- if product.featured_media.preview_image.width >= 503 -%}{{ product.featured_media.preview_image | img_url: '503x' }} 503w,{%- endif -%}
                                {%- if product.featured_media.preview_image.width >= 1006 -%}{{ product.featured_media.preview_image | img_url: '1006x' }} 1006w,{%- endif -%}
                                {%- if product.featured_media.preview_image.width >= 685 -%}{{ product.featured_media.preview_image | img_url: '685x' }} 685w,{%- endif -%}
                                {%- if product.featured_media.preview_image.width >= 1370 -%}{{ product.featured_media.preview_image | img_url: '1370x' }} 1370w{%- endif -%}"
                              sizes="(min-width: 1200px) calc((1200px - 19.5rem) / 2), (min-width: 750px) calc((100vw - 19.5rem) / 2), calc(100vw - 6.4rem)"
                              src="{{ product.featured_media.preview_image | img_url: '503x503' }}"
                              width="{{ product.featured_media.preview_image.width }}"
                              height="{{ product.featured_media.preview_image.height }}"
                              loading="lazy"
                              class="custom-content__product-image"
                               id="draggable"
                              alt="{{ product.featured_media.preview_image.alt | default: product.title | escape }}">
                        {%- endif -%}
                      {%- else -%}
                        {{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
                      {%- endunless -%}
                      {%- unless product.featured_media == blank and product != empty -%}
                        <h3 class="h2 custom-content__product-title">
                          {{ product.title | default: onboarding_title | escape }}
                        </h3>
                      {%- endunless -%}
                      {%- render 'product-price-listing', product: product -%}
                  </div>
                {%- when 'collection' -%}
                  {%- assign collection = collections[block.settings.collection] -%}
                  {% render 'collection-card', collection: collection, keep_image_ratio: block.settings.keep_image_ratio %}
                {%- when 'menu' -%}
                  {%- assign custom_menu = block.settings.menu -%}
                    <div class="custom-content__menu{% unless block.settings.horizontal_align == 'left' %} custom-content__menu--{{ block.settings.horizontal_align }}{% endunless %}">
                      {%- if block.settings.title -%}
                        <h3 class="h2 custom-content__menu-title">{{ block.settings.title | escape }}</h3>
                      {%- endif -%}
                      <ul class="custom-content__menu-list" role="list">
                        {%- for link in linklists[custom_menu].links -%}
                          <li class="custom-content__menu-item">
                            <a href="{{ link.url }}" class="custom-content__menu-link{% if link.current %} custom-content__menu-link--active{% endif %}">
                              {{ link.title | escape }}
                            </a>
                          </li>
                        {%- endfor -%}
                      </ul>
                    </div>
                {%- endcase -%}
            </div>
          {%- endfor -%}
        </div>

    {%- if slider_is_enabled -%}
      <div class="custom-content__gallery-indicator gallery-indicator gallery-indicator--stacked">
        <button class="gallery-indicator__arrow gallery-indicator__arrow--previous"
          data-media-arrow-previous aria-label="{{ 'products.slider.media_previous' | t }}"
          aria-controls="Gallery-{{ section.id }}">
            {%- render 'icon-chevron-right' -%}
        </button>

        <div class="gallery-indicator__count"
          data-media-indicator-label>
          <span data-media-current> 1 </span>
          <span aria-hidden="true">/</span>
          {{ section.blocks.size }}
        </div>

        <button class="gallery-indicator__arrow"
          data-media-arrow-next aria-label="{{ 'products.slider.media_next' | t }}"
          aria-controls="Gallery-{{ section.id }}">
            {%- render 'icon-chevron-right' -%}
        </button>
      </div>

      <div class="visually-hidden"
        role="status"
        aria-hidden="true"
        data-media-liveregion-message="{{ 'products.slider.media_indicator' | t: index: '[index]', indexTotal: '[indexTotal]' }}"
        data-media-liveregion>
      </div>
    {%- endif -%}

    {%- if section.blocks.size == 0 -%}
      {% render 'no-blocks' %}
    {%- endif -%}

  </div>
</section>

 

0 Likes