Renault Clio CLIO Evolution TCe 90 | 145007 (2024)

').addClass('item').html(` `); syncToOwlCarousel.append(thumbnailElement) } function renderModalImages() { let modalImages = $("#modal-images") let smallImagesHtmlForModal = '' images.forEach(function (image, index) { let addedClass = '' if(index === 0) { addedClass = 'bg-primary' } smallImagesHtmlForModal += `

` }) modalImages.html(smallImagesHtmlForModal) let showAllVehicleImagesContainer = $("#showAllVehicleImagesContainer") let smallImagesHtml = '' images.forEach(function (image, index) { let addedClass = '' if(index === 0) { addedClass = 'bg-primary' } smallImagesHtml += `

` }) showAllVehicleImagesContainer.html(smallImagesHtml) } //add event listener to modal button to open modal let openModalButton = $("#open-modal-button") let mainModal = $("#view-image-modal") let zoomIcon = $(".bg-vd-gallery-zoom-item") openModalButton.click(function(){ let activeImage = $('.owl-item.active .item img').attr('src'); if(activeImage){ let viewImageModalImage = $("#view-image-modal-image") viewImageModalImage.attr('src', activeImage) viewImageModal.addClass('d-block') } }) //add event listener to modal button to close modal let closeModalButton = $("#main-Imgmodal-close") closeModalButton.click(function (){ mainModal.removeClass('d-block') }) //add event listener to close modal when pressing 'ESC' $(document).on('keydown', function(event) { if(event.key === 'Escape') { mainModal.removeClass('d-block') } }) //add event listener to button to view image modal let viewImageModalButton = $("#view-image-modal-button") viewImageModalButton.click(function(){ viewImageModal.removeClass('d-block') }) //close view image modal when clicking outside of it let viewImageModalContent = $('#view-image-modal-content') let viewImageModalContentBody = $('#view-image-modal-content .modal-body') $(document).click(function(event) { let target = $(event.target) if(target.is(viewImageModalContent) ||target.is(viewImageModalContentBody)) { viewImageModal.removeClass('d-block') } }) //add event listener to spinner iframe open and close buttons let iframeOpenButton = $("#open-spinner-iframe") let iframeCloseButton = $("#close-spinner-iframe") let activeItem = $(".owl-item.active"); iframeOpenButton.click(function (){ $(this).addClass("active-method") iframeCloseButton.removeClass("active-method"); if($("#syncOwlCarousel").hasClass("d-none"))return; $('.vd-slider-navigation').hide(); $('#syncToOwlCarousel').hide(); $("#spinner-container").width($("#syncOwlCarousel").width()) $("#spinner-container").height($("#syncOwlCarousel").height()) $("#syncOwlCarousel").addClass('d-none') $("#spinner-container").removeClass('d-none') $('#spinner-iframe').removeClass("d-none"); openModalButton.addClass('d-none') $("#spinner-iframe").width($(".owl-item.active").width()) $("#spinner-iframe").height($("#spinner-iframe").width() / 1.52) $('#showAllVehicleImages').hide(); $('#showAllVehicleImagesContainer').hide(); }) iframeCloseButton.click(function (){ if($(this).hasClass("active-method"))return; iframeOpenButton.removeClass("active-method"); $(this).addClass("active-method") syncOwlCarousel.removeClass('d-none') if(!$('#showAllVehicleImages').hasClass("collapsed"))$('#syncToOwlCarousel').show(); $('.vd-slider-navigation').show(); $("#spinner-container").addClass('d-none') $('#spinner-iframe').addClass("d-none"); openModalButton.removeClass('d-none') $("#spinner-iframe").removeAttr("style") $("#spinner-container").removeAttr("style"); $('#showAllVehicleImages').removeAttr("style"); if($('#showAllVehicleImages').hasClass("collapsed"))$('#showAllVehicleImagesContainer').removeAttr("style"); }) //carousel functionality var slidesPerPage = 4; //globaly define number of elements per page var syncedSecondary = true; var owlCarouselImages = syncOwlCarousel.owlCarousel({ items: 1, slideSpeed: 2000, nav: true, autoplay: false, dots: false, loop: true, responsiveRefreshRate: 200, navText: ['

', '

'], }).on('changed.owl.carousel', syncPosition); owlCarouselImages.on('changed.owl.carousel', function (event) { let activeIndex = event.item.index; let activeElement = owlCarouselImages.find('.owl-item').eq(activeIndex).find('.item'); let imgSrc = activeElement.find('img').attr('src'); let imageFromTheGrid = $(`.modal-small-image[data-image-url="${imgSrc}"]`); imageFromTheGrid.siblings().removeClass('bg-primary'); imageFromTheGrid.addClass('bg-primary'); }) $('.vd-slider-nav-button').on("click",function(){ owlCarouselImages.trigger($(this).attr('data-type')+".owl.carousel"); }) function syncPositionForElements(el) { if (syncedSecondary) { var number = el.item.index; syncOwlCarousel.data('owl.carousel').to(number, 100, true); } } var syncToOwlCarouselInit = syncToOwlCarousel .on('initialized.owl.carousel', function() { syncToOwlCarousel.find(".owl-item").eq(0).addClass("current"); }) .owlCarousel({ items: slidesPerPage, dots: false, nav: false, smartSpeed: 200, slideSpeed: 500, slideBy: slidesPerPage, responsiveRefreshRate: 100 }).on('changed.owl.carousel', syncPositionForElements); var activeIndexUsed = 0; $('.modal-small-image').click(function(){ let clickedImageSrc = $(this).attr('data-image-url'); var found = false; var targetIndex = 0; owlCarouselImages.find('.item img').each(function(index, element) { var $parentOwlItem = $(element).closest('.owl-item'); if (!$parentOwlItem.hasClass('cloned')) { if ($(element).attr('src') === clickedImageSrc) { found = true; return false; // Break out of the loop } targetIndex++; } }); if (found) { owlCarouselImages.trigger('to.owl.carousel', targetIndex); var currentIndex =returnCurrentIndexOnOwlCarousel(); if(currentIndex != targetIndex)owlCarouselImages.trigger('to.owl.carousel', targetIndex); activeIndexUsed = currentIndex; $(this).siblings().removeClass('bg-primary'); $(this).addClass('bg-primary'); } }) function returnCurrentIndexOnOwlCarousel(){ let count = -1; let currentIndex = -1; owlCarouselImages.find('.owl-item').each(function() { if (!$(this).hasClass('cloned')) { count++; if ($(this).hasClass("active")) { currentIndex = count; } } }); return currentIndex; } $('#showAllVehicleImages').on("click",function(){ $(this).toggleClass("collapsed"); if($(this).hasClass("collapsed")){ $(this).find('.scroll').css("transform","rotate(180deg)") $(this).find('.scroll').css("animation","unset") $(this).find('.scroll').css("-webkit-animation","unset") syncToOwlCarousel.hide(); $('#showAllVehicleImagesContainer').slideToggle(); }else{ $(this).find('.scroll').css("transform","unset") $(this).find('.scroll').css("animation","down 1.5s infinite") $(this).find('.scroll').css("-webkit-animation","down 1.5s infinite") $('#showAllVehicleImagesContainer').slideToggle(); syncToOwlCarousel.show(); syncToOwlCarousel.trigger('to.owl.carousel', activeIndexUsed); } }) 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; } syncToOwlCarousel .find(".owl-item") .removeClass("current") .eq(current) .addClass("current"); var onscreen = syncToOwlCarousel.find('.owl-item.active').length - 1; var start = syncToOwlCarousel.find('.owl-item.active').first().index(); var end = syncToOwlCarousel.find('.owl-item.active').last().index(); const owlCarouselData = syncToOwlCarousel.data('owl.carousel'); if (current > end) { owlCarouselData && owlCarouselData.to(current, 100, true); } if (current < start) { owlCarouselData && owlCarouselData.to(current - onscreen, 100, true); } } syncToOwlCarousel.on("click", ".owl-item", function(e) { e.preventDefault(); var number = $(this).index(); syncOwlCarousel.data('owl.carousel').to(number, 300, true); }); // function getVehicle() { return {"name":"Renault Clio CLIO Evolution TCe 90","spinner_url":null,"images":[{"name":"145007_01.jpg","url":"https:\/\/bleker-gruppe.de\/\/media\/f5\/14\/f3\/1719302290\/0006b86ab86ab86a4d65646961202020.jpg"},{"name":"145007_02.jpg","url":"https:\/\/bleker-gruppe.de\/\/media\/76\/c2\/47\/1719302290\/0006b86bb86bb86b4d65646961202020.jpg"},{"name":"145007_03.jpg","url":"https:\/\/bleker-gruppe.de\/\/media\/e8\/18\/74\/1719302291\/0006b86cb86cb86c4d65646961202020.jpg"},{"name":"145007_04.jpg","url":"https:\/\/bleker-gruppe.de\/\/media\/15\/92\/3d\/1719302291\/0006b86db86db86d4d65646961202020.jpg"},{"name":"145007_05.jpg","url":"https:\/\/bleker-gruppe.de\/\/media\/2b\/1c\/f3\/1719302292\/0006b86fb86fb86f4d65646961202020.jpg"},{"name":"145007_06.jpg","url":"https:\/\/bleker-gruppe.de\/\/media\/9e\/85\/ef\/1719302292\/0006b870b870b8704d65646961202020.jpg"},{"name":"145007_07.jpg","url":"https:\/\/bleker-gruppe.de\/\/media\/81\/f5\/64\/1719302293\/0006b86eb86eb86e4d65646961202020.jpg"},{"name":"145007_08.jpg","url":"https:\/\/bleker-gruppe.de\/\/media\/40\/a0\/da\/1719302293\/0006b871b871b8714d65646961202020.jpg"},{"name":"145007_09.jpg","url":"https:\/\/bleker-gruppe.de\/\/media\/38\/2c\/03\/1719302294\/0006b872b872b8724d65646961202020.jpg"},{"name":"145007_10.jpg","url":"https:\/\/bleker-gruppe.de\/\/media\/98\/51\/43\/1719302294\/0006b873b873b8734d65646961202020.jpg"},{"name":"145007_11.jpg","url":"https:\/\/bleker-gruppe.de\/\/media\/74\/b1\/db\/1719302295\/0006b874b874b8744d65646961202020.jpg"},{"name":"145007_12.jpg","url":"https:\/\/bleker-gruppe.de\/\/media\/16\/2c\/0c\/1719302296\/0006b875b875b8754d65646961202020.jpg"}]} } function updateLeadType($sectionForm, titleText, oldValue, newValue) { $sectionForm.find(".v-detail-section-title").text(titleText); let leadInput = $sectionForm.find("input[name='f_leadType']"); let updatedValue = leadInput.val().replace(oldValue, newValue); leadInput.val(updatedValue); } $('.vd-testdrive-option').on('click', function () { let $sectionForm = $($(this).attr('href')); updateLeadType($sectionForm, "Probefahrt vereinbaren", "Fahrzeuganfrage", "Probefahrt"); $sectionForm.find('.bg-form-select-1[name="f_issue"]').val("Probefahrttermin vereinbaren"); }); $('.vd-issue-option').on('click', function () { let $sectionForm = $($(this).attr('href')); updateLeadType($sectionForm, "Fahrzeug anfragen", "Probefahrt", "Fahrzeuganfrage"); }); })