Skip to main content
Known Participant
July 23, 2023
Question

adjust photo size in script

  • July 23, 2023
  • 1 reply
  • 715 views


Hi, may i know how can i adjust the photo size in the script

<script>
$(document).ready(function() {
		    var slider = $("#slider");
		    var thumb = $("#thumb");
		    var slidesPerPage = 5; //globaly define number of elements per page
		    var syncedSecondary = true;
		    slider.owlCarousel({
		        items: 1,
		        slideSpeed: 2000,
		        nav: false,
		        autoplay: false, 
		        dots: false,
		        loop: true,
		        responsiveRefreshRate: 200
		    }).on('changed.owl.carousel', syncPosition);
		    thumb
		        .on('initialized.owl.carousel', function() {
		            thumb.find(".owl-item").eq(0).addClass("current");
		        })
		        .owlCarousel({
		            items: slidesPerPage,
		            dots: false,
		            nav: true,
		            item: 5,
		            smartSpeed: 200,
		            slideSpeed: 500,
		            slideBy: slidesPerPage, 
		        	navText: ['<svg width="18px" height="18px" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>', '<svg width="25px" height="25px" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'],
		            responsiveRefreshRate: 100
		        }).on('changed.owl.carousel', syncPosition2);
		    function syncPosition(el) {
		        var count = el.item.count - 1;
		        var current = Math.round(el.item.index - (el.item.count / 2) - .5);
		        if (current < 0) {
		            current = count;
		        }
		        if (current > count) {
		            current = 0;
		        }
		        thumb
		            .find(".owl-item")
		            .removeClass("current")
		            .eq(current)
		            .addClass("current");
		        var onscreen = thumb.find('.owl-item.active').length - 1;
		        var start = thumb.find('.owl-item.active').first().index();
		        var end = thumb.find('.owl-item.active').last().index();
		        if (current > end) {
		            thumb.data('owl.carousel').to(current, 100, true);
		        }
		        if (current < start) {
		            thumb.data('owl.carousel').to(current - onscreen, 100, true);
		        }
		    }
		    function syncPosition2(el) {
		        if (syncedSecondary) {
		            var number = el.item.index;
		            slider.data('owl.carousel').to(number, 100, true);
		        }
		    }
		    thumb.on("click", ".owl-item", function(e) {
		        e.preventDefault();
		        var number = $(this).index();
		        slider.data('owl.carousel').to(number, 300, true);
		    });


            $(".qtyminus").on("click",function(){
                var now = $(".qty").val();
                if ($.isNumeric(now)){
                    if (parseInt(now) -1> 0)
                    { now--;}
                    $(".qty").val(now);
                }
            })            
            $(".qtyplus").on("click",function(){
                var now = $(".qty").val();
                if ($.isNumeric(now)){
                    $(".qty").val(parseInt(now)+1);
                }
            });
		});
</script>

 

    This topic has been closed for replies.

    1 reply

    Legend
    July 23, 2023

    The size of your thumbnail images are restricted by the amount of columns you have currently set:

     

    <div class="col-md-6">

     

    If you want the thumbnails to be larger then set the column width to something larger. However this will also have the effect of making the large image bigger as well, so you might have to seperate the thumbnails into their own row if you want to retain the current size of the large image.

     

    The other possibility is to place the thumbnail images on 2 rows rather than 1 row - but I have no idea if owl carousel has an option for implementing that. I dont know anything about owl carousel and what options are available.

     

    Known Participant
    July 24, 2023

    But this isnt just the class name? because i copy the main code from codepen, so im not sure about it.

    I want to make the whole div smaller since the photo is too big that i need to scroll down the page 

     

    Legend
    July 24, 2023
    quote

    I want to make the whole div smaller since the photo is too big that i need to scroll down the page 

     


    By @Hiu Ching26169588pka2

     

    Set the width of the column to a smaller size then, like 5 or 4 or 3.   Your thumbnails will become smaller as well. If that is not what you want then isolate the large image and the thumbnails into their own rows/columns. At the moment both are in the same row/column so both will be affected by the column size you choose to use.

     

    I guess the thumbs are in the same row/column as the large image because they then sit nicely under the large image, although depending how many thumbs you use they could become too small.

     

    Maybe owl carousel has other options whereby you can have the thumbs bigger but they scroll horizontally if  you need more than a few of them.