Jump to content

"Fullscreen" Comparision Slider


Guest
 Share

Recommended Posts

Guest

Would it be possible to add a new function to the comp slider, so that it can open in a new page as a single thing?

Link to comment
Share on other sites

This is something I'd love to do. I was researching this and someone has actually created something that works quite well called JuxtaposeJS: https://juxtapose.knightlab.com/ It's on GitHub so theoretically we could fork and brand as PCGamingWiki too. These could be embedded as iframes and then used on the Blog and also possibly on the Wiki too if there's demand for it.

 

Here's how it in action: https://jsfiddle.net/7ubktc88/

 

I imagine it wouldn't be too much work to adapt this to fit out needs, but I simply don't have the time at the moment.

Link to comment
Share on other sites

Guest

Would something like this be possible too? However maybe I could do this manually myself, it gave me an idea about something I could do.

9kZuvG3.png

PKeVyna.png

Link to comment
Share on other sites

JuxtaposeJS wishlist:

 

- responsive iframe embedding

- fullscreen view of the uid

- lower right corner linking to PCGamingWiki

- rebrand to PCGamingWiki for anytone to create their own fullscreen/embeddable comparison slider, e.g. compare.pcgamingwiki.com

- additional line of text for more detail

Link to comment
Share on other sites

Guest

What are you trying to show?

A zoom-lens like feature, I did it myself anyway manually. Just scroll to the last images. I think it would probably get a bit too wonky anyway, I'll just manually edit this in. (kinda sleepy right now, sorry for repeating myself so often)

HAjbnhM.jpg

Link to comment
Share on other sites

- rebrand to PCGamingWiki for anytone to create their own fullscreen/embeddable comparison slider, e.g. compare.pcgamingwiki.com

Oh yes! I have been using screenshotcomparison up to this point because it's easy to use, but it's supposed to be used with movies. 

 

A zoom-lens like feature, I did it myself anyway manually. Just scroll to the last images. I think it would probably get a bit too wonky anyway, I'll just manually edit this in. (kinda sleepy right now, sorry for repeating myself so often)

That would be neat for harder to spot graphical differences. Some checkbox to enable magnifying glass for cursor would be most ideal.

Link to comment
Share on other sites

Guest
Guest

Oh god that would be so much better in fullscreen, jesus, the difference is absurd, it's so much clearer.

Link to comment
Share on other sites

It would be great to be able to adjust the scale of the image - e.g. introducing scrollbars at x1.5 x2 x3 x4 etc. I'm sure this is possible to do by modifying JuxtaposeJS.

 

Just need to find someone who can take this project on.. all the source code is on GitHub: https://github.com/NUKnightLab/juxtapose

scaling I think would be counter intuitive as it doesn't give you proper 1:1 detail comparison

Link to comment
Share on other sites

Putting this out to tender now with these additional features:

 

Description

PCGamingWiki would like to adapt and host a forked modified version of JuxtaposeJS - a system for making before/after image sliders. The source is hosted on github

We are looking for a talented Javascript developer to help add additional features to the slider system including:

 

- responsive iframe embeds

Embeds should resize gracefully down to appropriate size for responsive smartphone/tablet widths.

 

- view comparisons in fullscreen via uid link


If you view that source link fullscreen it doesn't work correctly as the browser window constraints are not correct - images overlap too much or too little. We would like to be able to share a uid link and get to show the user a fullscreen slider comparison experience that works.

 

- hosted/branded on PCGamingWiki servers

I'd like to host this on our account/server at an address such as http://compare.pcgamingwiki.com

In the bottom-left of the slider I'd like it to say 'PCGamingWiki' and link to our slider builder.

In the bottom-right of the slider I'd like there to be a link to the fullscreen uid view in another tab.

 

- (nice to have) scaling with scrollbars

Be able to increase the size of the sliders by x1.5, x2, x3, x4 so our users can be more detail.

 

Contact

Please get in contact with Andytizer if you are interested - there will be monetary compensation.

Edited by Andytizer
Modified brief
Link to comment
Share on other sites

Guest

Heh, the PCGW text thing should be optional, I don't want my images to be covered by that, I also believe that it might get a bit obnoxious.

Link to comment
Share on other sites

 Share

×
×
  • Create New...