Add few lines of code to display images- .js Javascript
$10-30 AUD
Closed
Posted 9 months ago
$10-30 AUD
Paid on delivery
I am looking for a skilled JavaScript developer to add a few lines of code to display images in a carousel on my website.
Its display images and works perfectly fine however,
for case 0, I want to show image [login to view URL], [login to view URL], [login to view URL]
For case 1, I want to show image [login to view URL], [login to view URL], [login to view URL],
For case 2, I want to show image [login to view URL], [login to view URL], [login to view URL]
and so on.
I only need few lines of code to show me how to do this.
Attached is the full javascript file. Please check here for all the code.
This will take 5-10min max if you know java.
// show different property function
function clickDropdownItem(n) {
var dropdownBtn = $('#floorplan-dropdown .dropdown-item');
var modalImg = $('#floorplanModal .modal-body img');
var modalPlateImg = $('#floorplateModal .modal-body img');
var modalTitle = $('#floorplanModal .modal-body .floorplan-modal-title');
var carouselPopup = $('#property-carousel .swiper-slide .expand-icon');
var carouselImg = $('#property-carousel .swiper-wrapper');
var paragraph = $('.property-desc p');
[login to view URL](n).click(function () {
[login to view URL]();
[login to view URL](false);
$('.residencies-dropdown').addClass('dropdown-movetop');
$('.back-btn').removeClass('unshown');
$('.nav-top-row').css('visibility', 'hidden');
$('.nav-wrapper').css('visibility', 'hidden');
});
switch (n) {
case 0:
[login to view URL](n).click(function () {
$('.ground-floor').remove();
[login to view URL]();
$('#original-content').css('display', 'none');
$('#replaced-content').css('display', 'flex');
$('#replaced-content .sunday-title p').html('<span>GROUND</span> 01');
$('.property-info').html(`<ul class="info-list">
<li>BEDROOM <span>3</span></li>
<li>BATHROOM<span> 2.5</span></li>
<li>CAR SPACE<span> 2</span></li>
</ul>
<ul class="info-area">
<li>INTERIOR<span> 153 m2</span></li>
<li>EXTERIOR<span> 120 m2</span></li>
<li>TOTAL AREA<span> 273 m2</span></li>
</ul>`);
[login to view URL]('src', './assets/img/floorplan/[login to view URL]');
[login to view URL]('src', './assets/img/floorplate/WHITEFOX_Marketing_CN_Digital Floorplates_G01 Ground Floor [login to view URL]');
[login to view URL]('<span>GROUND</span> 01');
[login to view URL]('A layout designed with a purposeful flow of movement in mind; enjoy the spaciousness of a living area that’s waiting to entertain. ');
[login to view URL](`<div class="swiper-slide ground-floor">
<a class="expand-icon" href="./assets/img/[login to view URL]"
data-toggle="lightbox" data-gallery="property-gallery">
<img src="./assets/img/icons/[login to view URL]" alt="expand"></a>
<img class="property-show-img" src="./assets/img/[login to view URL]"
alt="Popup slide">
</div> `)
[login to view URL]('ground-level');
});
break;
case 1:
[login to view URL](n).click(function () {
$('.ground-floor').remove();
[login to view URL]();
$('#original-content').css('display', 'none');
$('#replaced-content').css('display', 'flex');
$('#replaced-content .sunday-title p').html(
`<span>GROUND</span> 02`
);
$('.property-info').html(`<ul class="info-list">
<li>BEDROOM<span>3 </span></li>
<li>BATHROOM<span> 2.5</span></li>
<li>CAR SPACE<span>2 </span></li>
</ul>
<ul class="info-area">
<li>INTERIOR<span>156 m2 </span></li>
<li>EXTERIOR<span>146 m2 </span></li>
<li>TOTAL AREA<span> 302 m2 </span></li>
</ul>`);
[login to view URL]('src', './assets/img/floorplan/[login to view URL]');
[login to view URL]('src', './assets/img/floorplate/WHITEFOX_Marketing_CN_Digital Floorplates_G02 Ground Floor [login to view URL]');
[login to view URL]('<span>GROUND</span> 02');
[login to view URL]('Where an expansive terrace area framed by luscious greenery gives you the touch of nature needed to unwind and feel at home. ');
[login to view URL](`<div class="swiper-slide ground-floor">
<a class="expand-icon" href="./assets/img/[login to view URL]"
data-toggle="lightbox" data-gallery="property-gallery">
<img src="./assets/img/icons/[login to view URL]" alt="expand"></a>
<img class="property-show-img" src="./assets/img/[login to view URL]"
alt="Popup slide">
</div> `)
[login to view URL]('ground-level');
});
break;
case 2:
[login to view URL](n).click(function () {
$('.ground-floor').remove();
[login to view URL]();
$('#original-content').css('display', 'none');
$('#replaced-content').css('display', 'flex');
$('#replaced-content .sunday-title p').html('<span>GROUND</span> 03');
$('.property-info').html(`<ul class="info-list">
<li>BEDROOM<span> 2</span></li>
<li>BATHROOM<span> 2.5</span></li>
<li>CAR SPACE<span> 2</span></li>
</ul>
<ul class="info-area">
<li>INTERIOR<span> 121 m2</span></li>
<li>EXTERIOR<span> 34 m2</span></li>
<li>TOTAL AREA<span> 155 m2</span></li>
</ul>`);
[login to view URL]('src', './assets/img/floorplan/[login to view URL]');
[login to view URL]('src', './assets/img/floorplate/WHITEFOX_Marketing_CN_Digital Floorplates_G03 Ground Floor [login to view URL]');
[login to view URL]('<span>GROUND</span> 03');
[login to view URL]('It’s all about meaningful direction; from the moment of walking in, you’re instinctively drawn through the home’s indoor and outdoor entertaining areas. ');
$('.ground-floor').remove();
[login to view URL](`<div class="swiper-slide ground-floor">
<a class="expand-icon" href="./assets/img/[login to view URL]"
data-toggle="lightbox" data-gallery="property-gallery">
<img src="./assets/img/icons/[login to view URL]" alt="expand"></a>
<img class="property-show-img" src="./assets/img/[login to view URL]"
alt="Popup slide">
</div> `)
[login to view URL]('ground-level');
});
break;
...... more code in. js attached
var imgSrc = [
'./assets/img/[login to view URL]',
'./assets/img/[login to view URL]',
'./assets/img/[login to view URL]',
'./assets/img/[login to view URL]',
'./assets/img/[login to view URL]',
'./assets/img/[login to view URL]'
];
Attached is the js. file
Budget: 10 AUD
Timeframe - 15min
Hi,
I have checked your job description and understood what you are looking for.
I can do your job within your time frame and budget.
Please contact me and let's go ahead.
Regards,
Hi,
I have read your description carefully.
I have full experience with Javascript/Ajax/PHP.
And I can carry out your task on time high quality.
please, contact me.
from @Nguyen Le B
Based on your description, we need to modify the code in each case of the switch statement to append the right images to the modal carousel depending on the selected item of the dropdown.
let me help you to get this done ASAP.