NSS Activities Gallery Viewer

A web application to browse NSS (National Service Scheme) activity images from schoolwiki.in with customizable filters.

Features

View NSS activity images by school, district, and activity type
Responsive image gallery layout
Thumbnail previews for faster loading
Customizable filters:
- School code input
- District code dropdown
- Activity type selector
"All Activities" view option
Real-time loading status

Installation

No installation required - runs directly in the browser:

Simply open the index.html file in any modern web browser

For local development:

git clone https://github.com/yourusername/nss-gallery-viewer.git
cd nss-gallery-viewer
open index.html

Configuration

Core Settings

Edit these values in the JavaScript code:

const config = {
    activities: ["KOODE", "CAMP", "TREE", "BLOO", "CLEN", "SPRT", "SEMI", "WKSH"],
    maxImages: 20,
    apiUrl: "https://schoolwiki.in/api.php",
    imageBaseUrl: "https://schoolwiki.in/images/",
    thumbnailWidth: 300
};

Default Values

Setting	Default Value
School Code	14009
District Code	KGD
Activity	KOODE

Supported District Codes

Code	District
KGD	Kasaragod
KNR	Kannur
WYD	Wayanad
KZK	Kozhikode
MLP	Malappuram
PLK	Palakkad
TSR	Thrissur
EKM	Ernakulam
IDK	Idukki
KTM	Kottayam
ALP	Alappuzha
PTA	Pathanamthitta
KLM	Kollam
TVM	Thiruvananthapuram

Image Format

Images must follow this naming pattern:

NSS2025-{schoolcode}-{districtcode}-{activitycode}-{imagenumber}.jpg

Example:

NSS2025-14009-KGD-KOODE-01.jpg

Troubleshooting

Common Issues

CORS Errors
- Request CORS headers from schoolwiki.in admin
- Set up a local proxy server
- Use browser extension to disable CORS (dev only)

Images Not Loading
✅ Verify school code
✅ Check image naming convention
✅ Test internet connection

Slow Performance
- Reduce maxImages value
- Increase request delay in code

Development

Dependencies

jQuery 3.6.0
MediaWiki API

Customization

1. Add new activities:

activities: ["NEWCODE", ...]

2. Change defaults:

<input value="NEW_SCHOOL_CODE">
<select>
  <option value="NEW_DISTRICT" selected>...
</select>