Unique-Image-Slider GitHub Details, Stars and Alternatives

fazeelkhalid /

graph-real-time-problems

★ 10

Points: 100 Topics: Graphs, topological sort, freedom to decide how to represent data and organize code (while still reading in a graph and performing topological sort) PLAGIARISM/COLLUSION: You should not read any code (solution) that directly solves this problem (e.g. implements DFS, topological sorting or other component needed for the homework). The graph representation provided on the Code page (which you are allowed to use in your solution) and the pseudocode and algorithm discussed in class provide all the information needed. If anything is unclear in the provided materials check with us. You can read materials on how to read from a file, or read a Unix file or how to tokenize a line of code, BUT not in a sample code that deals with graphs or this specific problem. E.g. you can read tutorials about these topics, but not a solution to this problem (or a problem very similar to it). You should not share your code with any classmate or read another classmate's code. Part 1: Main program requirements (100 pts) Given a list of courses and their prerequisites, compute the order in which courses must be taken so that when taking a courses, all its prerequisites have already been taken. All the files that the program would read from are in Unix format (they have the Unix EOL). Provided files: ● Grading Criteria ● cycle0.txt ● data0.txt ● data0_rev.txt ● data1.txt - like data0.txt but the order of the prerequisite courses is modified on line 2. ● slides.txt (graph image) - courses given in such a way that they produce the same graph as in the image. (The last digit in the course number is the same as the vertex corresponding to it in the drawn graph. You can also see this in the vertex-to-course name correspondence in the sample run for this file.) ● run.html● data0_easy.txt - If you cannot handle the above file format, this is an easier file format that you can use, but there will be 15 points lost in this case. More details about this situation are given in Part 3. ● Unix.zip - zipped folder with all data files. ● For your reference: EOL_Mac_Unix_Windows.png - EOL symbols for Unix/Mac/Windows Specifications: 1. You can use structs, macros, typedef. 2. All the code must be in C (not C++, or any other language) 3. Global or static variables are NOT allowed. The exception is using macros to define constants for the size limits (e.g. instead of using 30 for the max course name size). E.g. #define MAX_ARRAY_LENGTH 20 4. You can use static memory (on the frame stack) or dynamic memory. (Do not confuse static memory with static variables.) 5. The program must read from the user a filename. The filename (as given by the user) will include the extension, but NOT the path. E.g.: data0.txt 6. You can open and close the file however many times you want. 7. File format: 1. Unix file. It will have the Unix EOL (end-of-line). 2. Size limits: 1. The file name will be at most 30 characters. 2. A course name will be at most 30 characters 3. A line in the file will be at most 1000 characters. 3. The file ends with an empty new line. 4. Each line (except for the last empty line) has one or more course names. 5. Each course name is a single word (without any spaces). E.g. CSE1310 (with no space between CSE and 1310). 6. There is no empty space at the end of the line. 7. There is exactly one empty space between any two consecutive courses on the same line. (You do not need to worry about having tabs or more than one empty space between 2 courses.) The first course name on each line is the course being described and the following courses are the prerequisites for it. E.g. CSE2315 CSE1310 MATH1426 ENGL13018. The first line describes course CSE2315 and it indicates that CSE2315 has 2 prerequisite courses, namely: CSE1310 and MATH1426. The second line describes course ENG1301 and it indicates that ENG1301 has no prerequisites. 9. You can assume that there is exactly one line for every course, even for those that do not have prerequisites (see ENGL1301 above). Therefore you can count the number of lines in the file to get the total number of courses. 10.The courses are not given in any specific order in the file. 8. You must create a directed graph corresponding to the data in the file. 1. The graph will have as many vertices as different courses listed in the file. 2. You can represent the vertices and edges however you want. 3. You do NOT have to use a graph struct. If you can do all the work with just the 2D table (the adjacency matrix) that is fine. You HAVE TO implement the topological sorting covered in class (as this assignment is on Graphs), but you can organize, represent and store the data however you want. 4. For the edges, you can use either the adjacency matrix representation or the adjacency list. If you use the adjacency list, keep the nodes in the list sorted in increasing order. 5. For each course that has prerequisites, there is an edge, from each prerequisite to that course. Thus the direction of the edge indicates the dependency. The actual edge will be between the vertices in the graph corresponding to these courses. E.g. file data0.txt has: c100 c300 c200 c100 c200 c100 Meaning: c100-----> c200 \ | \ | \ | \ | \ | \ | V V c300(The above drawing is provided here to give a picture of how the data in the file should be interpreted and the graph that represents this data. Your program should *NOT* print this drawing. See the sample run for expected program output.) From this data you should create the correspondence: vertex 0 - c100 vertex 1 - c300 vertex 2 - c200 and you can represent the graph using adjacency matrix (the row and column indexes are provided for convenience): | 0 1 2 ----------------- 0| 0 1 1 1| 0 0 0 2| 0 1 0 e.g. E[0][1] is 1 because vertex 0 corresponds to c100 and vertex 1 corresponds to c300 and c300 has c100 as a prerequisite. Notice that E[1][0] is not 1. If you use the adjacency list representation, then you can print the adjacency list. The list must be sorted in increasing order (e.g. see the list for 0). It should show the corresponding node numbers. E.g. for the above example the adjacency list will be: 0: 1, 2, 1: 2: 1, 6. 7. In order for the output to look the same for everyone, use the correspondence given here: vertex 0 for the course on the first line, vertex 1 for the course on the second line, etc. 1. Print the courses in topological sorted order. This should be done using the DFS (Depth First Search) algorithm that we covered in class and the topological sorting based on DFS discussed in class. There is no topological order if there is a cycle in the graph; in this case print an error message. If in DFV-visit when looking at the (u,v) edge, if the color of v is GRAY then there is a cycle in the graph (and therefore topological sorting is not possible). See the Lecture on topological sorting (You can find the date based on the table on the Scans page and then watch the video from that day. I have also updated the pseudocodein the slides to show that. Refresh the slides and check the date on the first page. If it is 11/26/2020, then you have the most recent version.) 8. (6 points) create and submit 1 test file. It must cover a special case. Indicate what special case you are covering (e.g. no course has any prerequisite). At the top of the file indicate what makes it a special case. Save this file as special.txt. It should be in Unix EOL format. Part 2: Suggestions for improvements (not for grade) 1. CSE Advisors also are mindful and point out to students the "longest path through the degree". That is longest chain of course prerequisites (e.g. CSE1310 ---> CSE1320 --> CSE3318 -->...) as this gives a lower bound on the number of semesters needed until graduation. Can you calculate for each course the LONGEST chain ending with it? E.g. in the above example, there are 2 chains ending with c300 (size 2: just c100-->c300, size 3: c100-->c200-->c300) and you want to show longest path 3 for c300. Can you calculate this number for each course? 2. Allow the user the enter a list of courses taken so far (from the user or from file) and print a list of the courses they can take (they have all the prerequisites for). 3. Ask the user to enter a desired number of courses per semester and suggest a schedule (by semester). Part 3: Implementation suggestions 1. Reading from file: (15 points) For each line in the file, the code can extract the first course and the prerequisites for it. If you cannot process each line in the file correctly, you can use a modified input file that shows on each line, the number of courses, but you would lose the 15 points dedicated to line processing. If your program works with the "easy files", in order to make it easy for the TAs to know which file to provide, please name your C program courses_graph_easy.c. Here is the modification shown for a new example. Instead of c100 c300 c200 c100 c200 the file would have: 1 c1003 c300 c200 c100 1 c200 1. that way the first data on each line is a number that tells how many courses (strings) follow after it on that line. Everything is separated by exactly one space. All the other specifications are the same as for the original file (empty line at the end, no space at the end of any line, length of words, etc). Here is data0_easy.txt Make a direct correspondence between vertex numbers and course names. E.g. the **first** course name on the first line corresponds to vertex 0, the **first** course name on the second line corresponds to vertex 1, etc... 2. 3. The vertex numbers are used to refer to vertices. 4. In order to add an edge in the graph you will need to find the vertex number corresponding to a given course name. E.g. find that c300 corresponds to vertex 1 and c200 corresponds to vertex 2. Now you can set E[2][1] to be 1. (With the adjacency list, add node 1 in the adjacency list for 2 keeping the list sorted.) To help with this, write a function that takes as arguments the list/array of [unique] course names and one course name and returns the index of that course in the list. You can use that index as the vertex number. (This is similar to the indexOf method in Java.) 5. To see all the non-printable characters that may be in a file, find an editor that shows them. E.g. in Notepad++ : open the file, go to View -> Show symbol -> Show all characters. YOU SHOULD TRY THIS! In general, not necessarily for this homework, if you make the text editor show the white spaces, you will know if what you see as 4 empty spaces comes from 4 spaces or from one tab or show other hidden characters. This can help when you tokenize. E.g. here I am using Notepad++ to see the EOL for files saved with Unix/Mac/Windows EOL (see the CR/LF/CRLF at the end of each line): EOL_Mac_Unix_Windows.png How to submit Submit courses_graph.c (or courses_graph_easy.c) and special.txt (the special test case you created) in Canvas . (For courses_graph_easy.c you can submit the "easy" files that you created.)Your program should be named courses_graph.c if it reads from the normal/original files. If instead it reads from the 'easy' files, name it courses_graph_easy.c As stated on the course syllabus, programs must be in C, and must run on omega.uta.edu or the VM. IMPORTANT: Pay close attention to all specifications on this page, including file names and submission format. Even in cases where your answers are correct, points will be taken off liberally for non-compliance with the instructions given on this page (such as wrong file names, wrong compression format for the submitted code, and so on). The reason is that non-compliance with the instructions makes the grading process significantly (and unnecessarily) more time consuming. Contact the instructor or TA if you have any questions

Ebikemeese /

Animated-Sliders

★ 1

This project contains three unique sliders, each built with HTML, CSS, and JavaScript, demonstrating different styles, transitions, and interaction patterns. Whether you're building a portfolio, product carousel, or image gallery, these sliders offer flexible starting points for your next web project.

Active repository

CSSMIT

⑂ 0 forks◯ 0 issuesUpdated Sep 21, 2025

View details View on GitHub ↗

alessandrafr /

How-to-pause-Galleriffic-slider-at-the-last-thumbs-image-

★ 1

I'd like to pause Galleriffic slider at the last thumbs image, but I don't know how // Primary Galleriffic initialization function that should be called on the thumbnail container. `$.fn.galleriffic = function(settings) { // Extend Gallery Object $.extend(this, { // Returns the version of the script version: $.galleriffic.version, // Current state of the slideshow isSlideshowRunning: false, slideshowTimeout: undefined, // This function is attached to the click event of generated hyperlinks within the gallery clickHandler: function(e, link) { this.play(); if (!this.enableHistory) { // The href attribute holds the unique hash for an image var hash = $.galleriffic.normalizeHash($(link).attr('href')); $.galleriffic.gotoImage(hash); e.preventDefault(); } }, // Appends an image to the end of the set of images. Argument listItem can be either a jQuery DOM element or arbitrary html. // @param listItem Either a jQuery object or a string of html of the list item that is to be added to the gallery. appendImage: function(listItem) { this.addImage(listItem, false, false); return this; }, // Inserts an image into the set of images. Argument listItem can be either a jQuery DOM element or arbitrary html. // @param listItem Either a jQuery object or a string of html of the list item that is to be added to the gallery. // @param {Integer} position The index within the gallery where the item shouold be added. insertImage: function(listItem, position) { this.addImage(listItem, false, true, position); return this; }, // Adds an image to the gallery and optionally inserts/appends it to the DOM (thumbExists) // @param listItem Either a jQuery object or a string of html of the list item that is to be added to the gallery. // @param {Boolean} thumbExists Specifies whether the thumbnail already exists in the DOM or if it needs to be added. // @param {Boolean} insert Specifies whether the the image is appended to the end or inserted into the gallery. // @param {Integer} position The index within the gallery where the item shouold be added. addImage: function(listItem, thumbExists, insert, position) { var $li = ( typeof listItem === "string" ) ? $(listItem) : listItem; var $aThumb = $li.find('a.thumb'); var slideUrl = $aThumb.attr('href'); var title = $aThumb.attr('title'); var $caption = $li.find('.caption').remove(); var hash = $aThumb.attr('name'); // Increment the image counter imageCounter++; // Autogenerate a hash value if none is present or if it is a duplicate if (!hash || allImages[''+hash]) { hash = imageCounter; } // Set position to end when not specified if (!insert) position = this.data.length; var imageData = { title:title, slideUrl:slideUrl, caption:$caption, hash:hash, gallery:this, index:position }; // Add the imageData to this gallery's array of images if (insert) { this.data.splice(position, 0, imageData); // Reset index value on all imageData objects this.updateIndices(position); } else { this.data.push(imageData); } var gallery = this; // Add the element to the DOM if (!thumbExists) { // Update thumbs passing in addition post transition out handler this.updateThumbs(function() { var $thumbsUl = gallery.find('ul.thumbs'); if (insert) $thumbsUl.children(':eq('+position+')').before($li); else $thumbsUl.append($li); if (gallery.onImageAdded) gallery.onImageAdded(imageData, $li); }); } // Register the image globally allImages[''+hash] = imageData; // Setup attributes and click handler $aThumb.attr('rel', 'history') .attr('href', '#'+hash) .removeAttr('name') .click(function(e) { gallery.clickHandler(e, this); }); return this; }, // Removes an image from the gallery based on its index. // Returns false when the index is out of range. removeImageByIndex: function(index) { if (index < 0 || index >= this.data.length) return false; var imageData = this.data[index]; if (!imageData) return false; this.removeImage(imageData); return true; }, // Convenience method that simply calls the global removeImageByHash method. removeImageByHash: function(hash) { return $.galleriffic.removeImageByHash(hash, this); }, // Removes an image from the gallery. removeImage: function(imageData) { var index = imageData.index; // Remove the image from the gallery data array this.data.splice(index, 1); // Remove the global registration delete allImages[''+imageData.hash]; // Remove the image's list item from the DOM this.updateThumbs(function() { var $li = gallery.find('ul.thumbs') .children(':eq('+index+')') .remove(); if (gallery.onImageRemoved) gallery.onImageRemoved(imageData, $li); }); // Update each image objects index value this.updateIndices(index); return this; }, // Updates the index values of the each of the images in the gallery after the specified index updateIndices: function(startIndex) { for (i = startIndex; i < this.data.length; i++) { this.data[i].index = i; } return this; }, // Scraped the thumbnail container for thumbs and adds each to the gallery initializeThumbs: function() { this.data = []; var gallery = this; this.find('ul.thumbs > li').each(function(i) { gallery.addImage($(this), true, false); }); return this; }, isPreloadComplete: false, // Initalizes the image preloader preloadInit: function() { if (this.preloadAhead == 0) return this; this.preloadStartIndex = this.currentImage.index; var nextIndex = this.getNextIndex(this.preloadStartIndex); return this.preloadRecursive(this.preloadStartIndex, nextIndex); }, // Changes the location in the gallery the preloader should work // @param {Integer} index The index of the image where the preloader should restart at. preloadRelocate: function(index) { // By changing this startIndex, the current preload script will restart this.preloadStartIndex = index; return this; }, // Recursive function that performs the image preloading // @param {Integer} startIndex The index of the first image the current preloader started on. // @param {Integer} currentIndex The index of the current image to preload. preloadRecursive: function(startIndex, currentIndex) { // Check if startIndex has been relocated if (startIndex != this.preloadStartIndex) { var nextIndex = this.getNextIndex(this.preloadStartIndex); return this.preloadRecursive(this.preloadStartIndex, nextIndex); } var gallery = this; // Now check for preloadAhead count var preloadCount = currentIndex - startIndex; if (preloadCount < 0) preloadCount = this.data.length-1-startIndex+currentIndex; if (this.preloadAhead >= 0 && preloadCount > this.preloadAhead) { // Do this in order to keep checking for relocated start index setTimeout(function() { gallery.preloadRecursive(startIndex, currentIndex); }, 500); return this; } var imageData = this.data[currentIndex]; if (!imageData) return this; // If already loaded, continue if (imageData.image) return this.preloadNext(startIndex, currentIndex); // Preload the image var image = new Image(); image.onload = function() { imageData.image = this; gallery.preloadNext(startIndex, currentIndex); }; image.alt = imageData.title; image.src = imageData.slideUrl; return this; }, // Called by preloadRecursive in order to preload the next image after the previous has loaded. // @param {Integer} startIndex The index of the first image the current preloader started on. // @param {Integer} currentIndex The index of the current image to preload. preloadNext: function(startIndex, currentIndex) { var nextIndex = this.getNextIndex(currentIndex); if (nextIndex == startIndex) { this.isPreloadComplete = true; } else { // Use setTimeout to free up thread var gallery = this; setTimeout(function() { gallery.preloadRecursive(startIndex, nextIndex); }, 100); } return this; }, // Safe way to get the next image index relative to the current image. // If the current image is the last, returns 0 getNextIndex: function(index) { var nextIndex = index+1; if (nextIndex >= this.data.length) nextIndex = 0; return nextIndex; }, // Safe way to get the previous image index relative to the current image. // If the current image is the first, return the index of the last image in the gallery. getPrevIndex: function(index) { var prevIndex = index-1; if (prevIndex < 0) prevIndex = this.data.length-1; return prevIndex; }, // Pauses the slideshow pause: function() { this.isSlideshowRunning = false; if (this.slideshowTimeout) { clearTimeout(this.slideshowTimeout); this.slideshowTimeout = undefined; } if (this.$controlsContainer) { this.$controlsContainer .find('div.ss-controls a').removeClass().addClass('play') .attr('title', this.playLinkText) .attr('href', '#play') .html(this.playLinkText); } return this; }, // Plays the slideshow play: function() { this.isSlideshowRunning = true; if (this.$controlsContainer) { this.$controlsContainer .find('.ss-controls a').removeClass().addClass('pause') .attr('title', this.pauseLinkText) .attr('href', '#pause') .html(this.pauseLinkText); } if (!this.slideshowTimeout) { var gallery = this; this.slideshowTimeout = setTimeout(function() { gallery.ssAdvance(); }, this.delay); } return this; }, // Toggles the state of the slideshow (playing/paused) toggleSlideshow: function() { if (this.isSlideshowRunning) this.pause(); else this.play(); return this; }, // Advances the slideshow to the next image and delegates navigation to the // history plugin when history is enabled // enableHistory is true ssAdvance: function() { if (this.isSlideshowRunning) this.next(true); return this; }, // Advances the gallery to the next image. // @param {Boolean} dontPause Specifies whether to pause the slideshow. // @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled. next: function(dontPause, bypassHistory) { this.gotoIndex(this.getNextIndex(this.currentImage.index), dontPause, bypassHistory); return this; }, // Navigates to the previous image in the gallery. // @param {Boolean} dontPause Specifies whether to pause the slideshow. // @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled. previous: function(dontPause, bypassHistory) { this.gotoIndex(this.getPrevIndex(this.currentImage.index), dontPause, bypassHistory); return this; }, // Navigates to the next page in the gallery. // @param {Boolean} dontPause Specifies whether to pause the slideshow. // @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled. nextPage: function(dontPause, bypassHistory) { var page = this.getCurrentPage(); var lastPage = this.getNumPages() - 1; if (page < lastPage) { var startIndex = page * this.numThumbs; var nextPage = startIndex + this.numThumbs; this.gotoIndex(nextPage, dontPause, bypassHistory); } return this; }, // Navigates to the previous page in the gallery. // @param {Boolean} dontPause Specifies whether to pause the slideshow. // @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled. previousPage: function(dontPause, bypassHistory) { var page = this.getCurrentPage(); if (page > 0) { var startIndex = page * this.numThumbs; var prevPage = startIndex - this.numThumbs; this.gotoIndex(prevPage, dontPause, bypassHistory); } return this; }, // Navigates to the image at the specified index in the gallery // @param {Integer} index The index of the image in the gallery to display. // @param {Boolean} dontPause Specifies whether to pause the slideshow. // @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled. gotoIndex: function(index, dontPause, bypassHistory) { if (!dontPause) this.pause(); if (index < 0) index = 0; else if (index >= this.data.length) index = this.data.length-1; var imageData = this.data[index]; if (!bypassHistory && this.enableHistory) $.historyLoad(String(imageData.hash)); // At the moment, historyLoad only accepts string arguments else this.gotoImage(imageData); return this; }, // This function is garaunteed to be called anytime a gallery slide changes. // @param {Object} imageData An object holding the image metadata of the image to navigate to. gotoImage: function(imageData) { var index = imageData.index; if (this.onSlideChange) this.onSlideChange(this.currentImage.index, index); this.currentImage = imageData; this.preloadRelocate(index); this.refresh(); return this; }, // Returns the default transition duration value. The value is halved when not // performing a synchronized transition. // @param {Boolean} isSync Specifies whether the transitions are synchronized. getDefaultTransitionDuration: function(isSync) { if (isSync) return this.defaultTransitionDuration; return this.defaultTransitionDuration / 2; }, // Rebuilds the slideshow image and controls and performs transitions refresh: function() { var imageData = this.currentImage; if (!imageData) return this; var index = imageData.index; // Update Controls if (this.$controlsContainer) { this.$controlsContainer .find('.nav-controls a.prev').attr('href', '#'+this.data[this.getPrevIndex(index)].hash).end() .find('.nav-controls a.next').attr('href', '#'+this.data[this.getNextIndex(index)].hash); } var previousSlide = this.$imageContainer.find('span.current').addClass('previous').removeClass('current'); var previousCaption = 0; if (this.$captionContainer) { previousCaption = this.$captionContainer.find('span.current').addClass('previous').removeClass('current'); } // Perform transitions simultaneously if syncTransitions is true and the next image is already preloaded var isSync = this.syncTransitions && imageData.image; // Flag we are transitioning var isTransitioning = true; var gallery = this; var transitionOutCallback = function() { // Flag that the transition has completed isTransitioning = false; // Remove the old slide previousSlide.remove(); // Remove old caption if (previousCaption) previousCaption.remove(); if (!isSync) { if (imageData.image && imageData.hash == gallery.data[gallery.currentImage.index].hash) { gallery.buildImage(imageData, isSync); } else { // Show loading container if (gallery.$loadingContainer) { gallery.$loadingContainer.show(); } } } }; if (previousSlide.length == 0) { // For the first slide, the previous slide will be empty, so we will call the callback immediately transitionOutCallback(); } else { if (this.onTransitionOut) { this.onTransitionOut(previousSlide, previousCaption, isSync, transitionOutCallback); } else { previousSlide.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0, transitionOutCallback); if (previousCaption) previousCaption.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0); } } // Go ahead and begin transitioning in of next image if (isSync) this.buildImage(imageData, isSync); if (!imageData.image) { var image = new Image(); // Wire up mainImage onload event image.onload = function() { imageData.image = this; // Only build image if the out transition has completed and we are still on the same image hash if (!isTransitioning && imageData.hash == gallery.data[gallery.currentImage.index].hash) { gallery.buildImage(imageData, isSync); } }; // set alt and src image.alt = imageData.title; image.src = imageData.slideUrl; } // This causes the preloader (if still running) to relocate out from the currentIndex this.relocatePreload = true; return this.syncThumbs(); }, // Called by the refresh method after the previous image has been transitioned out or at the same time // as the out transition when performing a synchronous transition. // @param {Object} imageData An object holding the image metadata of the image to build. // @param {Boolean} isSync Specifies whether the transitions are synchronized. buildImage: function(imageData, isSync) { var gallery = this; var nextIndex = this.getNextIndex(imageData.index); // Construct new hidden span for the image var newSlide = this.$imageContainer .append('<span class="image-wrapper current"><a class="advance-link" rel="history" href="#'+this.data[nextIndex].hash+'" title="'+imageData.title+'"> </a></span>') .find('span.current').css('opacity', '0'); newSlide.find('a') .append(imageData.image) .click(function(e) { gallery.clickHandler(e, this); }); var newCaption = 0; if (this.$captionContainer) { // Construct new hidden caption for the image newCaption = this.$captionContainer .append('<span class="image-caption current"></span>') .find('span.current').css('opacity', '0') .append(imageData.caption); } // Hide the loading conatiner if (this.$loadingContainer) { this.$loadingContainer.hide(); } // Transition in the new image if (this.onTransitionIn) { this.onTransitionIn(newSlide, newCaption, isSync); } else { newSlide.fadeTo(this.getDefaultTransitionDuration(isSync), 1.0); if (newCaption) newCaption.fadeTo(this.getDefaultTransitionDuration(isSync), 1.0); } if (this.isSlideshowRunning) { if (this.slideshowTimeout) clearTimeout(this.slideshowTimeout); this.slideshowTimeout = setTimeout(function() { gallery.ssAdvance(); }, this.delay); } return this; }, // Returns the current page index that should be shown for the currentImage getCurrentPage: function() { return Math.floor(this.currentImage.index / this.numThumbs); }, // Applies the selected class to the current image's corresponding thumbnail. // Also checks if the current page has changed and updates the displayed page of thumbnails if necessary. syncThumbs: function() { var page = this.getCurrentPage(); if (page != this.displayedPage) this.updateThumbs(); // Remove existing selected class and add selected class to new thumb var $thumbs = this.find('ul.thumbs').children(); $thumbs.filter('.selected').removeClass('selected'); $thumbs.eq(this.currentImage.index).addClass('selected'); return this; }, // Performs transitions on the thumbnails container and updates the set of // thumbnails that are to be displayed and the navigation controls. // @param {Delegate} postTransitionOutHandler An optional delegate that is called after // the thumbnails container has transitioned out and before the thumbnails are rebuilt. updateThumbs: function(postTransitionOutHandler) { var gallery = this; var transitionOutCallback = function() { // Call the Post-transition Out Handler if (postTransitionOutHandler) postTransitionOutHandler(); gallery.rebuildThumbs(); // Transition In the thumbsContainer if (gallery.onPageTransitionIn) gallery.onPageTransitionIn(); else gallery.show(); }; // Transition Out the thumbsContainer if (this.onPageTransitionOut) { this.onPageTransitionOut(transitionOutCallback); } else { this.hide(); transitionOutCallback(); } return this; }, // Updates the set of thumbnails that are to be displayed and the navigation controls. rebuildThumbs: function() { var needsPagination = this.data.length > this.numThumbs; // Rebuild top pager if (this.enableTopPager) { var $topPager = this.find('div.top'); if ($topPager.length == 0) $topPager = this.prepend('<div class="top pagination"></div>').find('div.top'); else $topPager.empty(); if (needsPagination) this.buildPager($topPager); } // Rebuild bottom pager if (this.enableBottomPager) { var $bottomPager = this.find('div.bottom'); if ($bottomPager.length == 0) $bottomPager = this.append('<div class="bottom pagination"></div>').find('div.bottom'); else $bottomPager.empty(); if (needsPagination) this.buildPager($bottomPager); } var page = this.getCurrentPage(); var startIndex = page*this.numThumbs; var stopIndex = startIndex+this.numThumbs-1; if (stopIndex >= this.data.length) stopIndex = this.data.length-1; // Show/Hide thumbs var $thumbsUl = this.find('ul.thumbs'); $thumbsUl.find('li').each(function(i) { var $li = $(this); if (i >= startIndex && i <= stopIndex) { $li.show(); } else { $li.hide(); } }); this.displayedPage = page; // Remove the noscript class from the thumbs container ul $thumbsUl.removeClass('noscript'); return this; }, // Returns the total number of pages required to display all the thumbnails. getNumPages: function() { return Math.ceil(this.data.length/this.numThumbs); }, // Rebuilds the pager control in the specified matched element. // @param {jQuery} pager A jQuery element set matching the particular pager to be rebuilt. buildPager: function(pager) { var gallery = this; var numPages = this.getNumPages(); var page = this.getCurrentPage(); var startIndex = page * this.numThumbs; var pagesRemaining = this.maxPagesToShow - 1; var pageNum = page - Math.floor((this.maxPagesToShow - 1) / 2) + 1; if (pageNum > 0) { var remainingPageCount = numPages - pageNum; if (remainingPageCount < pagesRemaining) { pageNum = pageNum - (pagesRemaining - remainingPageCount); } } if (pageNum < 0) { pageNum = 0; } // Prev Page Link if (page > 0) { var prevPage = startIndex - this.numThumbs; pager.append('<a rel="history" href="#'+this.data[prevPage].hash+'" title="'+this.prevPageLinkText+'">'+this.prevPageLinkText+'</a>'); } // Create First Page link if needed if (pageNum > 0) { this.buildPageLink(pager, 0, numPages); if (pageNum > 1) pager.append('<span class="ellipsis">…</span>'); pagesRemaining--; } // Page Index Links while (pagesRemaining > 0) { this.buildPageLink(pager, pageNum, numPages); pagesRemaining--; pageNum++; } // Create Last Page link if needed if (pageNum < numPages) { var lastPageNum = numPages - 1; if (pageNum < lastPageNum) pager.append('<span class="ellipsis">…</span>'); this.buildPageLink(pager, lastPageNum, numPages); } // Next Page Link var nextPage = startIndex + this.numThumbs; if (nextPage < this.data.length) { pager.append('<a rel="history" href="#'+this.data[nextPage].hash+'" title="'+this.nextPageLinkText+'">'+this.nextPageLinkText+'</a>'); } pager.find('a').click(function(e) { gallery.clickHandler(e, this); }); return this; }, // Builds a single page link within a pager. This function is called by buildPager // @param {jQuery} pager A jQuery element set matching the particular pager to be rebuilt. // @param {Integer} pageNum The page number of the page link to build. // @param {Integer} numPages The total number of pages required to display all thumbnails. buildPageLink: function(pager, pageNum, numPages) { var pageLabel = pageNum + 1; var currentPage = this.getCurrentPage(); if (pageNum == currentPage) pager.append('<span class="current">'+pageLabel+'</span>'); else if (pageNum < numPages) { var imageIndex = pageNum*this.numThumbs; pager.append('<a rel="history" href="#'+this.data[imageIndex].hash+'" title="'+pageLabel+'">'+pageLabel+'</a>'); } return this; } }); // Now initialize the gallery $.extend(this, defaults, settings); // Verify the history plugin is available if (this.enableHistory && !$.historyInit) this.enableHistory = false; // Select containers if (this.imageContainerSel) this.$imageContainer = $(this.imageContainerSel); if (this.captionContainerSel) this.$captionContainer = $(this.captionContainerSel); if (this.loadingContainerSel) this.$loadingContainer = $(this.loadingContainerSel); // Initialize the thumbails this.initializeThumbs(); if (this.maxPagesToShow < 3) this.maxPagesToShow = 3; this.displayedPage = -1; this.currentImage = this.data[0]; var gallery = this; // Hide the loadingContainer if (this.$loadingContainer) this.$loadingContainer.hide(); // Setup controls if (this.controlsContainerSel) { this.$controlsContainer = $(this.controlsContainerSel).empty(); if (this.renderSSControls) { if (this.autoStart) { this.$controlsContainer .append('<div class="ss-controls"><a href="#pause" class="pause" title="'+this.pauseLinkText+'">'+this.pauseLinkText+'</a></div>'); } else { this.$controlsContainer .append('<div class="ss-controls"><a href="#play" class="play" title="'+this.playLinkText+'">'+this.playLinkText+'</a></div>'); } this.$controlsContainer.find('div.ss-controls a') .click(function(e) { gallery.toggleSlideshow(); e.preventDefault(); return false; }); } if (this.renderNavControls) { this.$controlsContainer .append('<div class="nav-controls"><a class="prev" rel="history" title="'+this.prevLinkText+'">'+this.prevLinkText+'</a><a class="next" rel="history" title="'+this.nextLinkText+'">'+this.nextLinkText+'</a></div>') .find('div.nav-controls a') .click(function(e) { gallery.clickHandler(e, this); }); } } var initFirstImage = !this.enableHistory || !location.hash; if (this.enableHistory && location.hash) { var hash = $.galleriffic.normalizeHash(location.hash); var imageData = allImages[hash]; if (!imageData) initFirstImage = true; } // Setup gallery to show the first image if (initFirstImage) this.gotoIndex(0, false, true); // Setup Keyboard Navigation if (this.enableKeyboardNavigation) { $(document).keydown(function(e) { var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0; switch(key) { case 32: // space gallery.next(); e.preventDefault(); break; case 33: // Page Up gallery.previousPage(); e.preventDefault(); break; case 34: // Page Down gallery.nextPage(); e.preventDefault(); break; case 35: // End gallery.gotoIndex(gallery.data.length-1); e.preventDefault(); break; case 36: // Home gallery.gotoIndex(0); e.preventDefault(); break; case 37: // left arrow gallery.previous(); e.preventDefault(); break; case 39: // right arrow gallery.next(); e.preventDefault(); break; } }); } // Auto start the slideshow if (this.autoStart) this.play(); // Kickoff Image Preloader after 1 second setTimeout(function() { gallery.preloadInit(); }, 0); return this;

Active repository

No license

⑂ 0 forks◯ 0 issuesUpdated Jan 19, 2019

View details View on GitHub ↗

alessandrafr /

How-to-pause-Galleriffic-slider-at-the-last-thumb-

★ 1

Active repository

No license

⑂ 0 forks◯ 0 issuesUpdated Feb 8, 2019

View details View on GitHub ↗

nirupamakirana /

index.

★ 1

<!doctype html> <html lang="en"> <head>  <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> <title>Hello,DEAR WORLD</title> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-danger"> <div class="container-fluid"> <a class="navbar-brand" href="#">THE HAPPY TIES</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link active" aria-current="page" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Shop</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About Us</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact Us</a> </li> <li class="nav-item"> <a class="nav-link" href="./login.html">Login</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Register</a> </li> </ul> </div> </div> </nav> <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-indicators"> <button type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carouselExampleControls" data-bs-slide-to="1" aria-label="Slide 2"></button> </div> <div class="carousel-inner"> <div class="carousel-item active"> <img src="./images/SCRUNCHIE.jpg" class="d-block w-100" animate__animated animate__bounce" style="height: 400px; object-fit: cover;" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>SCRUNCHIE</h5> <p>HAND MADE WITH LOVE</p> </div> </div> <div class="carousel-item"> <img src="./images/SCRUN 1.jpg" class="d-block w-100" style="height: 400px; object-fit: cover;" alt="..."> <div class="carousel-caption d-none d-md-block"> <h5>Assassin's creed odyssey</h5> <p>World of Rome!</p> </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> <main class="container"> <h1 class="text-center my-3 fw-bold text-warning" style="text-decoration: underline;">Our Services</h1> <div class="row text-center my-5"> <div class="col-md-4"> <img src="./images/CHARMS.jpg" height="150"/> <h4 class="my-3 text-primary">CHARMS</h4> <p>Charms are small decorative elements that are used for bracelet and necklace</p> </div> <div class="col-md-4"> <img src="./images/CANDLE.jpg" height="150" /> <h4 class="my-3 text-primary">HANDMADE CANDLE</h4> <p>Light detection and ranging is a surveying method that measures the distance to a target by illuminating the target </p> </div> <div class="col-md-4"> <img src="./images/POLOROID.jpg" height="150" /> <h4 class="my-3 text-primary">POLOROID</h4> <p>Sceptra offers a unique solution that delivers high definition Aerial 3band, 4band, and Monochrome </p> </div> <div class="col-md-4"> <img src="./images/SILVER ACC.jpg" height="150" /> <h4 class="my-3 text-primary">SILVER ACCESSORIES</h4> <p>Sceptra offers a unique solution that delivers high definition Aerial 3band, 4band, and Monochrome </p> </div> <div class="col-md-4"> <img src="./images/HAIR BOW.jpeg" height="150" /> <h4 class="my-3 text-primary">HAIR BOW</h4> <p>Sceptra offers a unique solution that delivers high definition Aerial 3band, 4band, and Monochrome </p> </div> </div> </main>   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>   <script> var myCarousel = document.querySelector('#carouselExampleControls') var carousel = new bootstrap.Carousel(myCarousel, { interval: 2000, wrap: false }) </script> </body> </html>

Active repository

No license

⑂ 0 forks◯ 0 issuesUpdated Aug 22, 2025

View details View on GitHub ↗

CarrKaden /

Web_dev_bootcamp

★ 1

COMPLETELY REDONE WITH OVER 500 BRAND NEW VIDEOS! Hi! Welcome to the brand new version of The Web Developer Bootcamp, Udemy's most popular web development course. This course was just completely overhauled to prepare students for the 2022 job market, with over 60 hours of brand new content. This is the only course you need to learn web development. There are a lot of options for online developer training, but this course is without a doubt the most comprehensive and effective on the market. Here's why: This is the only Udemy course taught by a professional bootcamp instructor with a track record of success. 94% of my in-person bootcamp students go on to get full-time developer jobs. Most of them are complete beginners when I start working with them. The previous 2 bootcamp programs that I taught cost $14,000 and $21,000. This course is just as comprehensive but with brand new content for a fraction of the price. Everything I cover is up-to-date and relevant to 2022's developer job market. This course does not cut any corners. I just spent 8 months redoing this behemoth of a course! We build 13+ projects, including a gigantic production application called YelpCamp. No other course walks you through the creation of such a substantial application. The course is constantly updated with new content, projects, and modules. Think of it as a subscription to a never-ending supply of developer training. You get to meet my cats and chickens! When you're learning to program you often have to sacrifice learning the exciting and current technologies in favor of the "beginner friendly" classes. With this course, you get the best of both worlds. This is a course designed for the complete beginner, yet it covers some of the most exciting and relevant topics in the industry. Throughout the brand new version of the course we cover tons of tools and technologies including: HTML5 CSS3 Flexbox Responsive Design JavaScript (all 2022 modern syntax, ES6, ES2018, etc.) Asynchronous JavaScript - Promises, async/await, etc. AJAX and single page apps Bootstrap 4 and 5 (alpha) SemanticUI Bulma CSS Framework DOM Manipulation Unix(Command Line) Commands NodeJS NPM ExpressJS Templating REST SQL vs. NoSQL databases MongoDB Database Associations Schema Design Mongoose Authentication From Scratch Cookies & Sessions Authorization Common Security Issues - SQL Injection, XSS, etc. Developer Best Practices Deploying Apps Cloud Databases Image Upload and Storage Maps and Geocoding This course is also unique in the way that it is structured and presented. Many online courses are just a long series of "watch as I code" videos. This course is different. I've incorporated everything I learned in my years of teaching to make this course not only more effective but more engaging. The course includes: Lectures Code-Alongs Projects Exercises Research Assignments Slides Downloads Readings Too many pictures of my dog Rusty If you have any questions, please don't hesitate to contact me. I got into this industry because I love working with people and helping students learn. Sign up today and see how fun, exciting, and rewarding web development can be! Who this course is for: This course is for anyone who wants to learn about web development, regardless of previous experience It's perfect for complete beginners with zero experience It's also great for anyone who does have some experience in a few of the technologies(like HTML and CSS) but not all If you want to take ONE COURSE to learn everything you need to know about web development, take this course

Active repository

JavaScriptNo license

⑂ 0 forks◯ 0 issuesUpdated Jul 26, 2024

View details View on GitHub ↗

Unique-Image-Slider

Live repository statistics

README preview

Similar Open-Source Projects

graph-real-time-problems

Animated-Sliders

How-to-pause-Galleriffic-slider-at-the-last-thumbs-image-

How-to-pause-Galleriffic-slider-at-the-last-thumb-

index.

Web_dev_bootcamp