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>
14
Replies
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.
For best results, use an image editor like Photoshop to crop all images to the same height & width.
By @Nancy OShea
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.
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!
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.
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.
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.
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.
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.
AdChoices