1<!DOCTYPE html> 2 <html lang="en" dir="ltl"> 3<head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 7 <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 8 9 <title> 10 Photos 11 || 12 13 Khyber Computer & Vocational College 14 </title> 15 <meta name="csrf-token" content="WYp4AA0BhyQhH9JurkdWIQ67th6nlKpLP0qwNLeU"> 16 17 </style> 18 <!-- swiper --> 19<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" /> 20<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" /> 21 22<link rel="stylesheet" href="https://explainerkhan.com/assets/school/css/style.css"> 23<link rel="stylesheet" href="https://explainerkhan.com/assets/school/css/responsive.css"> 24 25<link rel="stylesheet" href="https://explainerkhan.com/assets/school/css/custom.css"> 26 27<link rel="stylesheet" href="https://explainerkhan.com/assets/jquery-toast-plugin/jquery.toast.min.css"> 28 29<!-- bootstrap --> 30<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" 31integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> 32 33<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" 34 crossorigin="anonymous" /> 35 36<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/select2-bootstrap-5-theme.min.css" /> 37 38 39 40 41 42<link rel="shortcut icon" class="school-favicon" href=""/> 43 44<style> 45 :root { 46 --primary-color: #22577a; 47 --primary-hover-color: #143449; 48 --secondary-color1: #22577a; 49 --secondary-color2: #57cc99; 50 51 --secondary-color3: #80ed99; 52 --text--primary-color: #38a3a51f; 53 54 --text--secondary-color: #2d2c2f; 55 --text-white-color: #fff; 56 --primary-background-color: #f2f5f7; 57} 58 59 /*color changer*/ 60 61.select2-selection__choice{ 62 background-color: var(--bs-gray-200); 63 border: none !important; 64 font-size: 12px; 65 font-size: 0.85rem !important; 66} 67 68.commonWaveSect::before { 69 content: ''; 70 position: absolute; 71 top: -76px; 72 left: 0px; 73 width: 100%; 74 height: 85px; 75 z-index: 1; 76 background: url(https://explainerkhan.com/assets/school/images/waveUp.svg); 77 background-repeat: no-repeat; 78 background-size: cover; 79} 80 81.commonWaveSect::after { 82 content: ''; 83 position: absolute; 84 bottom: -108px; 85 left: 0px; 86 width: 100%; 87 height: 120px; 88 z-index: 1; 89 background: url(https://explainerkhan.com/assets/school/images/waveDown.svg); 90 background-repeat: no-repeat; 91 background-size: cover; 92} 93 94.ctcaSection .cardBg { 95 background: url(https://explainerkhan.com/assets/school/images/ctcaImg.png); 96 background-repeat: no-repeat; 97 background-size: 100% 100%; 98 padding: 20px; 99 /* padding-top: 30px; */ 100 /* padding-bottom: 20px; */ 101 padding-top: 8px; 102} 103 104.ctcaSection .cardBg { 105 background: url(https://explainerkhan.com/assets/school/images/ctcaImg.png); 106 background-repeat: no-repeat; 107 background-size: 100% 100%; 108 padding: 20px; 109 /* padding-top: 30px; */ 110 /* padding-bottom: 20px; */ 111 padding-top: 8px; 112} 113 114.ctcaSection .diffColorBg { 115 background: url(https://explainerkhan.com/assets/school/images/ctcaImg.png); 116 background-repeat: no-repeat; 117 background-size: 100% 100%; 118 padding: 20px; 119 /* padding-top: 30px; */ 120 /* padding-bottom: 20px; */ 121 padding-top: 8px; 122} 123 124 125 126.ctcaSection .imgBg { 127 mask: url(https://explainerkhan.com/assets/school/images/ctcaImg.svg); 128 mask-repeat: no-repeat; 129 mask-size: 100% 100%; 130} 131.faqs .accordion-button::after { 132 background-image:url(https://explainerkhan.com/assets/school/images/bx-plus-circle.png) !important; 133} 134 135.faqs .accordion-button:not(.collapsed)::after { 136 background-image:url(https://explainerkhan.com/assets/school/images/bx-minus-circle.png) !important; 137} 138 139 /*color changer*/ 140 141 .colorChange { 142 -webkit-animation: colorchange .5s infinite alternate; 143 -moz-animation: colorchange .5s infinite alternate; 144 -o-animation: colorchange .5s infinite alternate; 145 -ms-animation: colorchange .5s infinite alternate; 146 animation: colorchange .5s infinite alternate 147 } 148 149 @-webkit-keyframes colorchange { 150 50% { 151 color: #fec24d 152 } 153 100% { 154 color: yellow 155 } 156 } 157 158 @-moz-keyframes colorchange { 159 50% { 160 color: #fec24d 161 } 162 100% { 163 color: red 164 } 165 } 166 167 @-o-keyframes colorchange { 168 50% { 169 color: #fec24d 170 } 171 100% { 172 color: red 173 } 174 } 175 176 @-ms-keyframes colorchange { 177 50% { 178 color: #fec24d 179 } 180 100% { 181 color: yellow 182 } 183 } 184 185 @keyframes colorchange { 186 50% { 187 color: #fec24d 188 } 189 100% { 190 color: black 191 } 192 } 193</style> </head> 194<body style="background-color: #F2F5F7"> 195 196 <header class="navbar"> 197 <div class="container"> 198 <div class="navbarWrapper"> 199 <div class="navLogoWrapper"> 200 <div class="navLogo"> 201 <a href="https://explainerkhan.com"> 202 203 <img src="" class="nav-logo companyLogo" alt="" /> 204 </a> 205 </div> 206 </div> 207 <div class="menuListWrapper"> 208 <ul class="listItems"> 209 <li> 210 <a href="https://explainerkhan.com">Home</a> 211 </li> 212 <li> 213 <a href="https://explainerkhan.com/about-us">About Us</a> 214 </li> 215 <li> 216 <div class="dropdown"> 217 <a class="btn btn-secondary dropdown-toggle" href="#" role="button" 218 id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false"> 219 Gallery 220 </a> 221 222 <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink"> 223 <li> 224 <a class="dropdown-item" href="https://explainerkhan.com/photos">Photos</a> 225 </li> 226 <hr /> 227 <li> 228 <a class="dropdown-item" href="https://explainerkhan.com/videos">Videos</a> 229 </li> 230 </ul> 231 </div> 232 </li> 233 234 <li> 235 <a href="https://explainerkhan.com/contact-us">Contact Us</a> 236 </li> 237 <li> 238 <a href="https://explainerkhan.com/result">Result</a> 239 </li> 240 <li> 241 <a href="https://explainerkhan.com/verification">Verification</a> 242 </li> 243 244 <li> 245 <div class="dropdown" > 246 <a class="btn btn-secondary dropdown-toggle" href="#" role="button" 247 id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
248 <span class=" colorChange "">Downloads</span> 249 </a> 250 251 <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink"> 252 <li class="dropdown-item"> 253 <a href="https://explainerkhan.com/show-page-class-first-year-entry-test/7"> <span class=" colorChange "">Examination</span></a> 254 </li> 255 <hr> 256 <li class="dropdown-item"> 257 <a href="https://explainerkhan.com/show-page-test-2024/11"> <span class=" colorChange "">Download All</span></a> 258 </li> 259 <hr> 260 </ul> 261 </div> 262 </li> 263 <li> 264 <div class="dropdown" > 265 <a class="btn btn-secondary dropdown-toggle" href="#" role="button" 266 id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false"> 267 <span class=""">Sports</span> 268 </a> 269 270 <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink"> 271 <li class="dropdown-item"> 272 <a href="https://explainerkhan.com/show-page-sports/12"> <span class=""">Sports</span></a> 273 </li> 274 <hr> 275 </ul> 276 </div> 277 </li> 278 279 </ul> 280 <div class="hamburg"> 281 <span data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight"><i 282 class="fa-solid fa-bars"></i></span> 283 </div> 284 </div> 285 <div class="loginWrapper"> 286 <button class="commonBtn admissionBtn"> 287 <div class="default-btn"> 288 <a href="https://explainerkhan.com/online-admission">Admission Open</a> 289 </div> 290 <div class="hover-btn"> 291 <a href="https://explainerkhan.com/online-admission">Apply Now</a> 292 </div> 293 </button> 294 <button class="commonBtn redirect-login"> 295 <a class="" href="https://explainerkhan.com/login">Login <i class="fa-regular fa-user"></i></a></button> 296 </div> 297 </div> 298 299 <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel"> 300 <div class="offcanvas-header"> 301 <div class="navLogoWrapper"> 302 <div class="navLogo"> 303 <img src="" alt="" class="nav-logo" /> 304 </div> 305 </div> 306 <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> 307 </div> 308 <div class="offcanvas-body"> 309 <ul class="listItems"> 310 <li> 311 <a href="https://explainerkhan.com">Home</a> 312 </li> 313 <li> 314 <a href="https://explainerkhan.com/about-us">About Us</a> 315 </li> 316 <li> 317 <div class="dropdown"> 318 <a class="btn btn-secondary dropdown-toggle" href="#" role="button" 319 id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false"> 320 Gallery 321 </a> 322 323 <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink"> 324 <li> 325 <a class="dropdown-item" href="https://explainerkhan.com/photos">Photos</a> 326 </li> 327 <hr /> 328 <li> 329 <a class="dropdown-item" href="https://explainerkhan.com/videos">Videos</a> 330 </li> 331 </ul> 332 </div> 333 </li> 334 335 <li> 336 <a href="https://explainerkhan.com/contact-us">Contact Us</a> 337 </li> 338 <li> 339 <a href="https://explainerkhan.com/result">Result</a> 340 </li> 341 342 <li> 343 <div class="dropdown" > 344 <a class="btn btn-secondary dropdown-toggle" href="#" role="button" 345 id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
346 <span class=" colorChange "">Downloads</span> 347 </a> 348 349 <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink"> 350 <li class="dropdown-item"> 351 <a href="https://explainerkhan.com/show-page-class-first-year-entry-test/7"> <span class=" colorChange "">Examination</span></a> 352 </li> 353 <hr> 354 <li class="dropdown-item"> 355 <a href="https://explainerkhan.com/show-page-test-2024/11"> <span class=" colorChange "">Download All</span></a> 356 </li> 357 <hr> 358 </ul> 359 </div> 360 </li> 361 <li> 362 <div class="dropdown" > 363 <a class="btn btn-secondary dropdown-toggle" href="#" role="button" 364 id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false"> 365 <span class=""">Sports</span> 366 </a> 367 368 <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink"> 369 <li class="dropdown-item"> 370 <a href="https://explainerkhan.com/show-page-sports/12"> <span class=""">Sports</span></a> 371 </li> 372 <hr> 373 </ul> 374 </div> 375 </li> 376 <div class="loginWrapper"> 377 <button class="commonBtn admissionBtn"> 378 <div class="default-btn"> 379 <a href="https://explainerkhan.com/online-admission">Admission Open</a> 380 </div> 381 <div class="hover-btn"> 382 <a href="https://explainerkhan.com/online-admission">Apply Now</a> 383 </div> 384 </button> 385 <button class="commonBtn redirect-login"> 386 <a class="" href="https://explainerkhan.com/login">Login <i class="fa-regular fa-user"></i></a></button> 387 </div> 388 </ul> 389 </div> 390 </div> 391 </div> 392</header> 393 <div class="main"> 394 <style> 395 ul { 396 padding-left: unset !important; 397 } 398 399 </style> 400 <div class="breadcrumb"> 401 <div class="container"> 402 <div class="contentWrapper"> 403 <span class="title"> Gallery </span> 404 <span> 405 <a href="https://explainerkhan.com" class="home">Home</a> 406 <span><i class="fa-solid fa-caret-right"></i></span> 407 <span class="home">Gallery</span> 408 <span><i class="fa-solid fa-caret-right"></i></span> 409 <span class="page">Photos</span> 410 </span> 411 </div> 412 </div> 413 </div> 414 415 416 417 418 <section class="photosGallery commonMT commonWaveSect"> 419 <div class="container"> 420 <div id="Center"> 421 <ul id="waterfall"></ul> 422 </div> 423 </div> 424 </section> 425 426 </div> 427 428 429 <footer class=""> 430 <div class="container"> 431 <div class="row"> 432 433 <div class="col-12 infoContainer"> 434 <div class="row"> 435 <div class="col-md-6 col-lg-4 infoDivWrapper"> 436 <div class="iconDiv"> 437 <span class="iconWrapper"><i class="fa-solid fa-location-dot"></i></span> 438 </div> 439 <div class="textDiv"> 440 <span>School Address</span> 441 <span>Swat PAkistanfrontend.</span> 442 </div> 443 </div> 444 445 <div class="col-md-6 col-lg-4 infoDivWrapper"> 446 <div class="iconDiv">
447 <span class="iconWrapper"><i class="fa-solid fa-envelope"></i></span> 448 </div> 449 <div class="textDiv"> 450 <span>Mail Us</span> 451 <span><a class="footer-contact" href="mailto:[email protected]">[email protected]</a></span> 452 </div> 453 </div> 454 455 <div class="col-md-6 col-lg-4 infoDivWrapper"> 456 <div class="iconDiv"> 457 <span class="iconWrapper"><i class="fa-solid fa-phone-volume"></i></i></span> 458 </div> 459 <div class="textDiv"> 460 <span>Call Us</span> 461 <span><a class="footer-contact" href="tel:+0946745693">0946745693</a></span> 462 </div> 463 </div> 464 </div> 465 </div> 466 467 <div class="col-sm-6 col-md-6 col-lg-3"> 468 <div class="companyInfoWrapper"> 469 <div> 470 <a href="https://explainerkhan.com"> 471 <img src="" class="footer-logo companyLogo" alt="" /> 472 </a> 473 </div> 474 <div> 475 <span class="commonDesc"> 476 Our Vision is to take the technical & Vocation training to the height of excellence and to a level, "Second to none". 477 </span> 478 </div> 479 480 <div class="socialIcons"> 481 <span> 482 <a href="https://www.facebook.com/Khyber Computer and Vocational College" target="_blank"> 483 <i class="fa-brands fa-facebook"></i> 484 </a> 485 </span> 486 487 488 489 <span> 490 <a href="https://www.facebook.com/kcvc IT Students" target="_blank"> 491 <i class="fa-brands fa-youtube"></i> 492 </a> 493 </span> 494 </div> 495 </div> 496 </div> 497 498 <div class="col-sm-6 col-md-6 col-lg-3"> 499 <div class="linksWrapper usefulLinksDiv"> 500 <span class="title">Useful Links</span> 501 <span><a href="https://explainerkhan.com">Home</a></span> 502 <span><a href="https://explainerkhan.com/about-us">About Us</a></span> 503 <span><a href="https://explainerkhan.com/photos">Photos</a></span> 504 <span><a href="https://explainerkhan.com/videos">Videos</a></span> 505 <span><a href="https://explainerkhan.com/contact-us">Contact Us</a></span> 506 </div> 507 </div> 508 509 <div class="col-sm-6 col-md-6 col-lg-2"> 510 <div class="linksWrapper"> 511 <span class="title">Quick Links</span> 512 <span> 513 <a href="https://explainerkhan.com/login"> Admin Login </a> 514 </span> 515 <span> 516 <a href="https://explainerkhan.com/terms-conditions"> Terms & Conditioins </a> 517 </span> 518 <span> 519 <a href="https://explainerkhan.com/privacy-policy"> Privacy Policy </a> 520 </span> 521 522 <span> 523 524 </span> 525 </div> 526 </div> 527 528 <div class="col-sm-6 col-md-6 col-lg-4"> 529 <div class="linksWrapper"> 530 <span class="title">Download eSchool Apps</span> 531 532 <div class="appContainer"> 533 <a class="appWrapper" href="https://play.google.com/store/apps/details?id=com.explainerkhan.eguru&hl=en"> 534 <img src="https://explainerkhan.com/assets/school/images/PlayStore.png" alt="">
535 <span class="appNameWrapper"> 536 <span>Student & Parent</span> 537 <span>Android App</span> 538 </span> 539 </a> 540 541 </div> 542 543 544 545 </div> 546 </div> 547 </div> 548 </div> 549 <div class="copyRightText"> 550 <span class="text-center"> 551 2024 552 553 554 </span> 555 </div> 556</footer>
557<script type="text/javascript"> 558 base_path = "https://explainerkhan.com"; 559 //used for push notification 560</script>
vendor: 1 bytes, line 560
560
561<script src="https://explainerkhan.com/assets/school/js/script.js"></script>
561 562
563<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
vendor: 1 bytes, line 563
563
564<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
564 565 566 567 568<!-- bootstrap -->
569<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" 570 integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"> 571</script>
571 572 573<!-- fontawesome icons -->
574<script src="https://kit.fontawesome.com/1d2a297b20.js" crossorigin="anonymous"></script>
574 575 576<!-- swiper -->
577<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-element-bundle.min.js"></script>
577 578 579<!-- swiper -->
580<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
580 581 582 583
584<script src="https://explainerkhan.com/assets/js/jquery.repeater.js"></script>
vendor: 1 bytes, line 584
584
585<script src="https://explainerkhan.com/assets/school/js/script-js.js"></script>
585 586
587<script src="https://explainerkhan.com/assets/jquery-toast-plugin/jquery.toast.min.js"></script>
vendor: 1 bytes, line 587
587
588<script src="https://explainerkhan.com/assets/js/jquery.validate.min.js"></script>
vendor: 1 bytes, line 588
588
589<script src="https://explainerkhan.com/assets/js/jquery-additional-methods.min.js"></script>
vendor: 1 bytes, line 589
589
590<script src="https://explainerkhan.com/assets/js/custom/validate.js"></script>
590 591 592
593<script src="https://explainerkhan.com/assets/js/custom/function.js"></script>
593 594
595<script> 596 597 // annaouncementSlider 598 $(document).ready(function() { 599 600 // hero-slider 601 $(document).ready(function() { 602 var itemCount = $(".hero-carousel .item").length; 603 if (itemCount > 0) { 604 $(".hero-carousel").owlCarousel({ 605 items: 1 606 , loop: itemCount > 1 607 , autoplay: true 608 , autoplayTimeout: 2000 609 , autoplayHoverPause: true 610 , nav: true 611 , navText: [ 612 "<i class='fa-solid fa-arrow-left'></i>" 613 , "<i class='fa-solid fa-arrow-right'></i>" 614 , ] 615 , }); 616 } else { 617 console.log("No items found in hero-carousel"); 618 } 619 620 }); 621 622 // commonSlider 623 $(document).ready(function() { 624 // Initialize each carousel separately 625 $(".slider-content.owl-carousel").each(function() { 626 var owl = $(this).owlCarousel({ 627 loop: false 628 , nav: false 629 , responsive: { 630 0: { 631 items: 1 632 } 633 , 470: { 634 items: 2 635 } 636 , 792: { 637 items: 3 638 } 639 , 1000: { 640 items: 4 641 } 642 , } 643 , }); 644 645 // Bind navigation buttons 646 $(this) 647 .closest(".commonSlider") 648 .find(".prev") 649 .click(function() { 650 owl.trigger("prev.owl.carousel"); 651 }); 652 653 $(this) 654 .closest(".commonSlider") 655 .find(".next") 656 .click(function() { 657 owl.trigger("next.owl.carousel"); 658 }); 659 }); 660 661 }); 662 663 664 // Initialize each carousel separately 665 $(".announcementSwiper").each(function() { 666 var owl = $(this).owlCarousel({ 667 loop: true, 668 margin: 10, 669 nav: false, 670 responsive: { 671 0: { 672 items: 1, 673 }, 674 600: { 675 items: 1.5, 676 }, 677 1000: { 678 items: 1.5, 679 }, 680 }, 681 }); 682 683 // Custom navigation buttons for this specific carousel 684 $(this) 685 .closest(".annaouncementSection") 686 .find(".prev") 687 .click(function() { 688 owl.trigger("prev.owl.carousel"); 689 }); 690 691 $(this) 692 .closest(".annaouncementSection") 693 .find(".next") 694 .click(function() { 695 owl.trigger("next.owl.carousel"); 696 }); 697 }); 698 }); 699 700</script>
700 701
702<script> 703 $(document).ready(function() { 704 $('#create-form').on('submit', function (e) { 705 e.preventDefault(); 706 let formElement = $(this); 707 let submitButtonElement = $(this).find(':submit'); 708 let url = $(this).attr('action'); 709 let data = new FormData(this); 710 711 function successCallback() { 712 setTimeout(function () { 713 window.location.reload(); 714 }, 1000) 715 } 716 717 formAjaxRequest('POST', url, data, formElement, submitButtonElement, successCallback); 718 }) 719 }); 720</script>
720 721
722<script> 723 // Logo 724 var nav_logo = "https://explainerkhan.com/storage/super-admin/school-settings/67784207ea2ba6.301346291735934471.jpeg"; 725 if (nav_logo == null || nav_logo == '') { 726 nav_logo = "https://explainerkhan.com/storage/super-admin/school-settings/67784207ea2ba6.301346291735934471.jpeg"; 727 } 728 729 730 var footer_logo = "https://explainerkhan.com/storage/super-admin/school-settings/677003e4cf0ee5.614732881735394276.png"; 731 footer_logo = footer_logo !== '' ? footer_logo : nav_logo; 732 733 $('.nav-logo').attr("src", nav_logo); 734 $('.footer-logo').attr("src", footer_logo ); 735 736 // Favicon 737 $('.school-favicon').attr('href', "https://explainerkhan.com/uploads/business_logos/1735393378_KCVC logo 001.png"); 738 739 $('.redirect-login').click(function(e) { 740 e.preventDefault(); 741 window.location.href = "https://explainerkhan.com/login" 742 }); 743 744 window.addEventListener('scroll', function () { 745 const header = document.querySelector('header.navbar'); 746 const navbar = document.querySelector('.navbarWrapper'); 747 if (window.scrollY > 0) { 748 header.classList.add('stickyNav'); 749 navbar.classList.add('stickyNavActive'); 750 } else { 751 header.classList.remove('stickyNav'); 752 navbar.classList.remove('stickyNavActive'); 753 } 754 }); 755 756 // upperFileUpload 757 758document.addEventListener('DOMContentLoaded', function () { 759 const button = document.querySelector('.upperFileUpload button'); 760 if (button) { 761 button.addEventListener('click', function () { 762 const fileInput = document.querySelector('.upperFileUpload input[type="file"]'); 763 if (fileInput) { 764 fileInput.click(); 765 } 766 }); 767 } 768}); 769 770 const fileInput = document.querySelector('.upperFileUpload input[type="file"]'); 771 const fileNameSpan = document.querySelector('.upperFileUpload span'); 772 const imgPreview = document.querySelector('.upperImgPreview'); 773 774 // Ensure all elements exist before adding event listeners 775 if (fileInput && fileNameSpan && imgPreview) { 776 fileInput.addEventListener('change', function () { 777 const file = this.files[0]; 778 const fileName = file ? file.name : 'No File Selected.'; 779 fileNameSpan.textContent = fileName; 780 781 if (file) { 782 const reader = new FileReader(); 783 reader.onload = function (e) { 784 imgPreview.src = e.target.result; 785 }; 786 reader.readAsDataURL(file); 787 } 788 }); 789 } 790 791 // ====================================================== // 792 793 // lowerFileUpload 794 const lowerbutton = document.querySelector('.lowerFileUpload button'); 795if(lowerbutton){ 796 lowerbutton.addEventListener('click', function () { 797 document.querySelector('.lowerFileUpload input[type="file"]').click(); 798 }); 799 800 document.querySelector('.lowerFileUpload input[type="file"]').addEventListener('change', function () { 801 var file = this.files[0]; 802 var fileName = file ? file.name : 'No File Selected.'; 803 document.querySelector('.lowerFileUpload span').textContent = fileName; 804 805 if (file) { 806 var reader = new FileReader(); 807 reader.onload = function (e) { 808 document.querySelector('.lowerImgPreview').src = e.target.result; 809 }; 810 reader.readAsDataURL(file); 811 } 812 }); 813} 814 // =================================================================== // 815 816 817 818</script>
818 819 820
821<script> 822 document.addEventListener("DOMContentLoaded", function() { 823 // Get the lightbox elements 824 setTimeout(() => { 825 var lightbox = document.getElementById("lightbox"); 826 var lightboxImg = document.getElementById("lightbox-img"); 827 var lightboxVideo = document.getElementById("lightbox-video"); 828 var captionText = document.getElementById("caption"); 829 830 if (lightbox) { 831 832 833 // Function to open the lightbox 834 function openLightbox(contentType, src, caption) { 835 lightbox.style.display = "block"; 836 disableScroll(); 837 hideNavbar(); 838 if (contentType === 'image') { 839 lightboxImg.style.display = "block"; 840 lightboxVideo.style.display = "none"; 841 lightboxImg.src = src; 842 } else if (contentType === 'video') { 843 lightboxImg.style.display = "none"; 844 lightboxVideo.style.display = "block"; 845 lightboxVideo.src = src; 846 } 847 captionText.innerHTML = caption; 848 } 849 850 // Function to close the lightbox 851 function closeLightbox() { 852 enableScroll(); 853 showNavbar(); 854 lightbox.style.display = "none"; 855 lightboxImg.src = ""; 856 lightboxVideo.src = ""; 857 } 858 859 // Get all thumbnails and add click events 860 var thumbnails = document.getElementsByClassName('detailArr'); 861 for (var i = 0; i < thumbnails.length; i++) { 862 thumbnails[i].onclick = function() { 863 var img = this.parentNode.querySelector('.thumbnail'); 864 865 if (img.classList.contains('video-thumbnail')) { 866 // Handle video thumbnail click 867 var videoUrl = img.dataset.video; 868 openLightbox('video', videoUrl, ''); 869 } else { 870 // Handle image thumbnail click 871 openLightbox('image', img.src, img.alt); 872 } 873 } 874 } 875 876 // Get the close button and add click event 877 var closeBtn = document.getElementsByClassName("close")[0]; 878 if (closeBtn) { 879 closeBtn.onclick = function() { 880 closeLightbox(); 881 } 882 } 883 884 885 // Close lightbox when clicking outside of it or pressing Esc key 886 window.addEventListener('click', function(event) { 887 if (event.target === lightbox) { 888 closeLightbox(); 889 } 890 }); 891 892 window.addEventListener('keydown', function(event) { 893 if (event.key === "Escape") { 894 closeLightbox(); 895 } 896 }); 897 } 898 }, 500); 899 900 // Function to disable scroll 901 function disableScroll() { 902 document.body.style.overflow = 'hidden'; 903 } 904 905 // Function to enable scroll 906 function enableScroll() { 907 document.body.style.overflow = ''; 908 } 909 910 function hideNavbar() { 911 document.querySelector('.navbar').style.display = 'none'; 912 } 913 914 // Function to show the navbar 915 function showNavbar() { 916 document.querySelector('.navbar').style.display = 'block'; 917 } 918 }); 919</script>
919 920
921<script type="text/javascript"> 922 923 $(document).ready(function () 924 { 925 $('#waterfall').NewWaterfall({ 926 width: 360, 927 delay: 100, 928 }); 929 }); 930 931 function random(min, max) 932 { 933 return min + Math.floor(Math.random() * (max - min + 1)) 934 } 935 var loading = false; 936 var dist = 600; 937 var num = 1; 938 var count = 0; // Current count of loaded items 939 var maxCount = 1; 940 setInterval(function () 941 { 942 if ($(window).scrollTop() >= ($(document).height() - $(window).height() - 500) - dist && !loading && count < maxCount) 943 { 944 loading = true; 945 var height = random(200, 400); 946 $("#waterfall").append("<li><a href='https://explainerkhan.com/photos/3'><div class='m-2 upperBigImg1' style='height:" + height + "px'><img style='height:" + height + "px;width: 100%;' src='https://explainerkhan.com/storage/super-admin/gallery/677432488f71e0.899756891735668296.jpg'><div class='detailArr'> <img src='https://explainerkhan.com/assets/school/images/bx-plus-circle.png' alt=''> <span>KCVC Students</span></div></div></a></li>"); 947 948 count++; 949 loading = false; 950 } 951 }, 60); 952</script>
952 953 954</body> 955</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.