http://buildinternet.com/project/supersized/
I'm having trouble figuring out the javascript that goes along with this jquery plugin. What I'm trying to do is merge this with more js plugins, namely, an accordion plugin I have. The end goal is to essentially have two instances of Supersized running on one screen with the same controls, different images. I know, hard to envision but here's an example.
The body is full screen background with Supersized, the image is image1.jpg and it's black and white. Then, I have a smaller div, 960px wide in the center of the body, with an accordion of all the images I want, but in color. So as you change the accordion, you change the background. So when you have image1.jpg in color in the accordion box, the background of body is image1.jpg black and white.
So I'm having trouble because the js for supersized seems to only define a prev and next thumbnail, not ALL the thumbnails. So in theory I would have to figure out how to disoplay all thumbnails and then figure out how to alter these thumbnails' images so that it is still controlling the slide transitions, but not actually the thumbnails for the background. In that way, I can then set the accordion slides to those thumbnails instead but have them control both the accordion and the background.
I'm sure I'm being very confusing right now, so if you have any questions, ask away. Thanks.
Lets see if i got your question right,
if you're looking for a way to change the background image (used by supersized) on clicking on a div or something, then there are many ways to do it.
The following code may help you out, it will replace the active slide image name with a '-bw' in the end of it.
for example : clicking on a div with a class name 'click-me' will change the background image from 'image.jpg' to 'image-bw.jpg'
function changeBg() {
var $supersizedImg = $("#supersized .activeslide img"),
imgSrc = $supersizedImg.attr('src');
imgSrcArray = imgSrc.split('/'); //split the image source by '/'
fullFileName = imgSrcArray[imgSrcArray.length - 1]; //get the file name
fileName = fullFileName.split('.'); //split that file name by '.'
fileName[0] = fileName[0] + '-bw'; //grab the first array element(which is filename without extension and add a '-bw' in the end)
fileName = fileName.join('.'); //join the new file name with its extension with a '.'
imgSrcArray[imgSrcArray.length - 1] = fileName; //add the new file name the the last element of imgSrcArray.
imgSrcArray = imgSrcArray.join('/'); //join the whole url by '/'
$supersizedImg.attr('src', imgSrcArray); //add the new url to the img src of supersized
}
$('.click-me').on('click', changeBg); //call changeBg function when a div is clicked
hope it helps.
Related
I am trying to add an image/blank rectangle on top of/overlaid on the top and bottom of every image on an html page. I plan to do this via a user-script, but I could not find any information on how to append an image on another at a specified PX x PX. I am slightly familiar with js. I have done two small hobby projects (an image parser and a poker game) this being the third, and assume I will have to achieve following:
Create a blank image to cover the top and bottom part of the image.
This can be done by creating a simple rectangle I think. I can play with the parameters of the size to make it fit.
get every image on the site
I can probably do this by parsing the DOM (I'm not sure if I need to do this if I am using a user-script) and doing a forEach(img), and within the forEach(img => I can add the rectangle to the top and bottom thereby adding it to every image on the page.
somehow append the blank image from above on top of the top and bottom of each image.
This is where I am lost. I have appended images to the DOM before, but I don't know how to do it through a user-script and I also don't know have to append an image on another image. I have thought of doing the following, but I am unsure how to continue:
I also have linked an example where I would use this user-script. What I am trying to do is remove a watermark. (I am only doing this locally on my computer as to not steal the translators work, which is why I am using JavaScript.) So to recap I am looking for how to solve number 3, and if possible/optionally an explanation of how to do this in grease-monkey or any other user-script manager. Let me know if anything was unclear and thanks to anybody who comments/answers this problem. edit:clarity
here is a link to an example use case
If you just need these two balnk space on each img on the page, just using this css:
img{
height: 945px;
object-fit:cover;
}
Or js:
var x = document.querySelectorAll("img");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.height = "954px";
x[i].style.objectFit = "cover";
}
I need to change the color of any image that contains a particular x coordinate. However, the code I am using now only gives me the #scrollwrapper container, and not the individual image that is at that location.
var xHome = window.innerWidth/2;
var yHome = window.innerHeight/2;
var pElement = document.elementFromPoint(xHome, yHome);
alert (pElement.className);
This gets wrapper container on the images, but not the particular image that is there. The site is coolaidhouse.com/projectcaptured
You can see the scroller there. I want to dim the images on the side of the "active," item, which is basically the image closest to the middle.
If I could get the image based on its coordinates I could do the rest. However, I can't figure out how to get the image in lieu of the container.
Here is what the end result should look like:
Your code grabs the image when run from the console. Therefore, you need to wait for the image to load before running the code.
IMG elements have an onload event you can use for this purpose.
The answer was in Rick Hitchcock's comment. Don't know how to mark a comment as an answer though. The images were in fact not loaded yet.
I have a responsive image gallery that currently displays thumbnails on a page, which when clicked, will enlarge the image and open it up as a modal.
The limitations of this code are that when I have opened up the image, I have to press the 'X' button, and go back to the thumbnails in order to open up another image.
What I would like, is that when the modal opens up, with the enlarged image, there is a '<' and '>' button that allows you to scroll through the enlarged images.
Any ideas how this can be done?
I hope this was clear, if not then it will make more sense when you view it as a working example here.
Thank you for your help!
Supposing the image which is being displayed at the moment is pic1 and that you have pic2, pic3, pic4 as well.
First you need to create an array in javascript containing the location of these files. Now assuming that the id of that image is "mainpic".
var a=['pic1','pic2'....'pic4'];
var l=a.length;
var currentpic=0;
function changeright(){
documnet.getElementById("mainpic").src=++window.currentpic%window.l;
}
function changeleft(){
document.getElementById("mainpic").src=abs(--window.currentpic%window.l);
}
Now for the html part you need too superimpose these signs-
<> which you can do by using position:absolute and z index:-1. You can find the examples on w3school.
It should be something like
<aaaaaaa
And in css
enter code here
#superimpose{
position:absolute/relative;
top:100px//or some other value to move the text over the pic or use "left" and "right"
}
You could use slick, I used it at work and it is really good.
I have several pages of a manga in .png format, around 300, and I would like to set up a section on my website so that users can read the manga, browsing through the pages using two arrows ("next page" and "previous page"). I don't care about animations between pages. The perfect example of what I want to achieve is MangaFox (not the whole website, just the window where you can read the manga).
The basic setting is: a 300px wide menu with the chapters list on the left, and manga pages appearing to the right. Either in the menu or below where the manga page img, two arrows let you go to the previous or next page.
I thought about using iframes: links to HTML pages containing each manga page would target the iframe and appear in it. However, this requires me to ceate an HTML page for each page, and set the links to the previous and next page manually. I would have 300 html pages, so this would be too heavy and time consuming.
I also tried linking the chapters list directly to the .png files, but the images are not styled as I would like (at least in Chrome, they don't appear in the center of the page, but rather in the upper left corner) and I would still have to set the previous and next arrows link manually.
Whai I dream of is:
- there's a list of the .png files, that sets a fixed order for the pages;
- a dropdown list in the left menu can point directly to a certain page in the list;
- the previous and next arrows recognize which image is being shown, and a click on the arrows skips to the next or previous item on the list. If there's no page before the current one, the "previous" arrow disappears; same for the "next" arrow in case the item is the last on the list.
Maybe there's a way simpler way to do it I didn't think of, but I can't find it.
Thank you in advance for your help!
(P.S.: I'm not using WordPress, just plain HTML, CSS and PHP)
Here's the simplest way I can think of doing this:
Left arrow
<a id="leftArrow" href="#{n-1}"></a>
Right arrow
<a id="rightArrow" href="#{n+1}"></a>
Set up onhashchange function that reads location.hash and sets the src attribute of the img element utilizing an array of pages you've defined somewhere:
window.onhashchange = function(){
var img = document.query('img');
var left = document.query('#leftArrow');
var right = document.query('#rightArrow');
var pageNumber = parseInt(location.hash);
//put some error handling here for edge cases, then...
img.src = imagesArray[pageNumber];
left.href = '#' + (pageNumber - 1);
right.href = '#' + (pageNumber + 1);
};
The page links in your side menu would have href="#{page number}" and would trigger the onhashchange function when clicked, updating the image and the arrows.
Hope this helps.
using the code from http://touchslider.com
1.) how can the "currentClass" (the image it starts with) be set to random?
so any one of the images will appear on load?
2.) how can you toggle the script by clicking on an image?
to be more specific, there are navigation links and the images that you can click/swipe
how can you set it up so that when you click on an image, it locks to that image, disabling the navigation links and swipe??
edit: 2nd option solved +
I was able to work around editing the touchslider.com script, and made the 2nd option requested possible by using a transparent div.
JS (in body)
<script>
$(document).ready(function(){
var $content = $("#disablediv1").hide();
$(".lock").on("click", function(e){
$content.toggle();
});
});
</script>
HTML (wrap image)
<a class="lock" href="#"><img src="IMAGELINK"></img></a>
HTML (transparent div positioned over links to be disabled)
<div id="disablediv1"></div>
CSS (for transparent div)
#disablediv1{
position:absolute;
left:200px;
top:20px;
width:600px;
height:544px;
z-index:999;
}
^hopefully someone will find that helpful.
*I'm still looking for a way to have the slider show it's first image at random...
I tidied up the original HTML and CSS in the touchslider example.
http://touchslider.com/
Working example.
http://jsfiddle.net/jvt7U/1/
This works like an image preloader, for efficiency. Image src is excluded from the HTML and there is an array present for images, named gallery.
There are two loops. The first loop sets the random order in the array structure. For example:
2,0,1
1,2,0
0,1,2
The second loop assigns the image location, based on the image path from the gallery array.
Random Generator.
You can search around for better random number generators, and just replace the code here.
// Randomize the Array
galleryPosition.sort(function() {return 0.5 - Math.random()});