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