• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

adjust photo size in script

Explorer ,
Jul 23, 2023 Jul 23, 2023

Copy link to clipboard

Copied


Hi, may i know how can i adjust the photo size in the script
Screen Shot 2023-07-23 at 15.58.00.pngScreen Shot 2023-07-23 at 15.58.03.pngScreen Shot 2023-07-23 at 16.02.23.pngScreen Shot 2023-07-23 at 16.02.29.png

<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>

 

Views

238

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 23, 2023 Jul 23, 2023

Copy link to clipboard

Copied

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.

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 24, 2023 Jul 24, 2023

Copy link to clipboard

Copied

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 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 24, 2023 Jul 24, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 24, 2023 Jul 24, 2023

Copy link to clipboard

Copied

For best results, use an image editor like Photoshop to crop all images to the same height & width.

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 24, 2023 Jul 24, 2023

Copy link to clipboard

Copied

quote

For best results, use an image editor like Photoshop to crop all images to the same height & width.

 

 


By @Nancy OShea

 

 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 25, 2023 Jul 25, 2023

Copy link to clipboard

Copied

quote

For best results, use an image editor like Photoshop to crop all images to the same height & width.

 

 


By @Nancy OShea

 

Thats not the issue. OP says the large image is to big on the screen........all they need to do is reduce the col width its contained within. At the moment Bootstrap col is set to 6 so its going to take up 50% width of the screen. Reduce the col width and it will consume less width and height. If that then makes the 5 thumbs too small then rethink the layout or see what other options owl carousel can provide if you have more than about 4 thumbs in the row.

 

Although l dont see why all the extra grey at the top of the large image should be there, so cropping that would also help, maybe other products consume more space so to avoid the jumping from product to product the image has been cropped to the size of the largest product.........who knows.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 25, 2023 Jul 25, 2023

Copy link to clipboard

Copied

Clearly, the T-shirt thumbnails are different heights. 

Default Bootstrap classes control column width, not height.  

Check the CSS. Height should be "auto" to avoid content clipping.

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 25, 2023 Jul 25, 2023

Copy link to clipboard

Copied

quote

Clearly, the T-shirt thumbnails are different heights. 

Default Bootstrap classes control column width, not height.  

Check the CSS. Height should be "auto" to avoid content clipping.

 

By @Nancy OShea

 

But the OP said if you care to read, the large image is too big. They dont mention the thumbnails, which yes I agree are unequal and need to be re-adjusted but their concern seems to be making the large image smaller so they dont have to scroll to see it all.  

 

Quote from OP:

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

 

The photo they mention I assume relates to the large image not the thumbnails, which is why I suggested reducing the width of the column from 6 to 5, 4 or 3 whatever, nothing to do with setting a height. The height of the image will reduce along with the reduced col width, whether it will result in a suitable solution remains unknown.

 

This is usually the issue with these kinds of sliders, they can be problematical when the browsers window depth is not high enough to show both the large image and the thumbnails together!!

 

If someone views this kind of layout horizontally on a smart phone or maybe even a tablet then its going to be next to useless as the depth of the window isnt going to be deep enough to accommodate both the large image and the thumbnails together. Lots to think about when laying out a page, not everyone appreciates the effort and consideration that needs to be applied, partly why I gave up because the clients I worked for were small minded and in the end I felt I  was wasting my time, skills and vast experience talking to ignorant zombies. Now its bliss!

 

6 f****** years ago I advised one of my clients to add an SSL cerificate to their website as it was the way forward, today 6 f****** years later they asked for it to be added. I dont work for them any longer. It was great to tell them to F.O. Pay back time!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 25, 2023 Jul 25, 2023

Copy link to clipboard

Copied

quote

 

6 f****** years ago I advised one of my clients to add an SSL cerificate to their website as it was the way forward, today 6 f****** years later they asked for it to be added. I dont work for them any longer. It was great to tell them to F.O. Pay back time!


By @osgood_

 

Arrogance has never been a substitute for salesmanship.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 25, 2023 Jul 25, 2023

Copy link to clipboard

Copied

What do SSL certs have to do with this topic???  😕

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

quote

What do SSL certs have to do with this topic???  😕

 


By @Nancy OShea

 

I felt like letting off steam since you obviously completely missed the question the OP asked and gave an answer to something which was not requested. Read more and answer less, would be my advice..........don't become one of those who l was referring to, who obviously knows everything and absolutely nothing, so doesn't take advice from someone who knows a little more than they do........until years later.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jul 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

quote
quote

What do SSL certs have to do with this topic???  😕

By @Nancy OShea

 

I felt like letting off steam since you obviously completely missed the question the OP asked and gave an answer to something which was not requested. Read more and answer less, would be my advice..........don't become one of those who l was referring to, who obviously knows everything and absolutely nothing, so doesn't take advice from someone who knows a little more than they do........until years later.

By @osgood_

==========

If that was an apology for going off-topic, congratulations on an epic fail.  😶

Next time, take a chill-pill and have a nap. 

 

 

 

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

LATEST
quote
quote
quote

What do SSL certs have to do with this topic???  😕

By @Nancy OShea

 

I felt like letting off steam since you obviously completely missed the question the OP asked and gave an answer to something which was not requested. Read more and answer less, would be my advice..........don't become one of those who l was referring to, who obviously knows everything and absolutely nothing, so doesn't take advice from someone who knows a little more than they do........until years later.

By @osgood_

==========

If that was an apology for going off-topic, congratulations on an epic fail.  😶

Next time, take a chill-pill and have a nap. 

 

 

 

 


By @Nancy OShea

 

Expecting an apolgy from me when its quite clear you're the one that was off-topic, is quite laughable but then again you do reside on the opposite side of the pond to me, so its nothing less than what I would expect, all mouth and no substance, to coin a phrase.

 

Read the title 'adjust photo size in script' next time before answering, nothing about thumbnails at all. 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jul 26, 2023 Jul 26, 2023

Copy link to clipboard

Copied

quote
quote

 

6 f****** years ago I advised one of my clients to add an SSL cerificate to their website as it was the way forward, today 6 f****** years later they asked for it to be added. I dont work for them any longer. It was great to tell them to F.O. Pay back time!


By @osgood_

 

Arrogance has never been a substitute for salesmanship.


By @BenPleysier

 

After 40 years plus of having to deal with mostly idiots and sucking it up, it feels good not to have to. Boot is on the other foot now, l call the tunes........liberation is sweet.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines