Skip to content

M
makura-2025
Commit 29219e65 by jhukal9@gmail.com
Options

updated the intersection observer active handler for master portfolio

parent 284fe9f4
Showing with 160 additions and 10 deletions
assets/js/script.js
......@@ -42,26 +42,35 @@
/** INTERSECTION OBSERVER AND SCROLL INTO VIEW FUNCTIONALITY FOR RESOURCE LISTING STARTS HERE */
$(function () {
const resourceListObserver = new IntersectionObserver(
const observeElements = (selector, threshold) => {
const observer = new IntersectionObserver(
function (entries) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
const targetId = entry.target.id;
const tocItem = $(`.toc li a[data-target="${targetId}"]`).parent();
if (entry.isIntersecting) {
console.log(targetId);
const tocItem = $(
`.toc li a[data-target="${targetId}"]`,
).parent();
const tabItem = $(
`.sticky-tab li a[data-target="${targetId}"]`,
).parent();
tocItem.addClass("active").siblings().removeClass("active");
}
tabItem.addClass("active").siblings().removeClass("active");
}
});
},
{
threshold: 0.5,
},
{ threshold },
);
$(".resource-block").each(function () {
resourceListObserver.observe(this);
$(selector).each(function () {
observer.observe(this);
});
};
// Call the function for different selectors with different thresholds
observeElements(".resource-block", 0.5);
observeElements(".portfolio-block", 0.1);
});
/** INTERSECTION OBSERVER AND SCROLL INTO VIEW FUNCTIONALITY FOR RESOURCE LISTING ENDS HERE */
......
blocks/portfolio-text-image-section.php
......@@ -23,6 +23,147 @@ if(have_rows('content')):
</div>
</section> -->
<section class="portfolio-block " id="graphics-design">
<?php $index=0;?>
<?php while(have_rows('content')):
the_row();
$image_position = get_sub_field('image_position');
$image = get_sub_field('image');
if($index===0):
?>
<div class="ONLY-TEXT-SECTION py-80
<?php echo (get_sub_field('background_colour')=='dark')?'background-dark':'bg-primary';?>">
<div class="container">
<div class="row justify-content-between">
<div class="col-lg-5 col-xl-4 order-lg-2">
<?php if($image): echo wp_get_attachment_image($image,'full');endif;?>
</div>
<div class="col-lg-7 order-lg-1">
<?php echo get_sub_field('description');?>
</div>
</div>
</div>
</div>
<?php elseif($index===1):?>
<div class="ONLY-TEXT-SECTION top-primary mb-60">
<div class="container">
<div class="bg-white content-box">
<div class="section-title">
<h3>Challenges of Graphics Design</h3>
<p>CAN faced challenges in capturing audience attention due to outdated and uninspired designs. Their social
media graphics lacked creativity, and their website failed to engage modern users, especially the younger
demographic.</p>
</div>
<div class="row justify-content-between">
<div class="col-lg-6 order-lg-2">
<?php if($image): echo wp_get_attachment_image($image,'full');endif;?>
</div>
<div class="col-lg-6 order-lg-1">
<?php echo get_sub_field('description');?>
</div>
</div>
</div>
</div>
</div>
<?php else:?>
<div class="ONLY-TEXT-SECTION mb-80">
<div class="container">
<div class="row justify-content-between">
<div class="col-lg-5 ">
<?php if($image): echo wp_get_attachment_image($image,'full');endif;?>
</div>
<div class="col-lg-7">
<?php echo get_sub_field('description');?>
</div>
</div>
</div>
</div>
<?php
endif;
$index+=1;
endwhile;
?>
<div class="block-gallery makura-new mb-120">
<div class="container">
<div class="section-title slide-up">
<div class="title">
<h3>UI/UX Design Galleries</h3>
<p>Explore a collection of stunning and inspiring graphic design showcases.</p>
</div>
<div class="slider-controller d-none d-md-flex justify-content-end">
<button type="button" class="prev">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M13.6693 7.83341L3.5276 7.83341L8.18594 12.4917L7.0026 13.6667L0.335937 7.00008L7.0026 0.333413L8.1776 1.50841L3.5276 6.16675L13.6693 6.16675L13.6693 7.83341Z"
fill="#58595A" />
</svg>
</button>
<button type="button" class="next">
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0.33073 7.83341L10.4724 7.83341L5.81406 12.4917L6.9974 13.6667L13.6641 7.00008L6.9974 0.333413L5.8224 1.50841L10.4724 6.16675L0.33073 6.16675L0.33073 7.83341Z"
fill="#58595A" />
</svg>
</button>
</div>
</div>
<div class="gallery-slider-wrapper slide-up">
<div class="gallery-slider owl-carousel " id="ui-ux-gallery">
<div class="gallery-item">
<a data-src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-10.png">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-10.png" alt=""
class="img-fluid">
</a>
</div>
<div class="gallery-item">
<a data-src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-11.png">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-11.png" alt=""
class="img-fluid">
</a>
</div>
<div class="gallery-item">
<a data-src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-12.png">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-12.png" alt=""
class="img-fluid">
</a>
</div>
<div class="gallery-item">
<a data-src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-13.png">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-13.png" alt=""
class="img-fluid">
</a>
</div>
<div class="gallery-item">
<a data-src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-14.png">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-14.png" alt=""
class="img-fluid">
</a>
</div>
<div class="gallery-item">
<a data-src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-15.png">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-15.png" alt=""
class="img-fluid">
</a>
</div>
<div class="gallery-item">
<a data-src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-11.png">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-11.png" alt=""
class="img-fluid">
</a>
</div>
<div class="gallery-item">
<a data-src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-10.png">
<img src="<?php echo get_parent_theme_file_uri()?>/assets/img/placeholder-10.png" alt=""
class="img-fluid">
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="portfolio-block " id="ui-ux-design">
<?php $index=0;?>
<?php while(have_rows('content')):
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment