Skip to content

Flickr WideScreen (Viewer) - DACKR - v.7 by decembre

Imported and mirrored from https://raw.githubusercontent.com/uso-archive/data/flomaster/data/usercss/62901.user.css

Screenshot of Flickr WideScreen (Viewer) - DACKR - v.7

Details

Authordecembre

LicenseNO-REDISTRIBUTION

Categorydarckr, widescreen, flickr

Created

Updated

Size7.6 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Notes

▶ WHAT IT do :
Thumbnail fit the screen (8x2 +4thumbs).

▶ NEW :
Add compatibility with this addon or simillar (now you can preview the thumb on hover) :
Thumbnail Zoom Plus
(Shows full image when you hover over a thumbnail.)

IMPORTANT : This style work for the "thumbnail" Dark's setting (at the to of it's page)

If you want be sure add this at the end of the address:

&colSmall=5&numSmall=25&sort=interestingness-desc&colSmall=4&numSmall=16

And click the "REMEMBER" button" to keep it all the time.
(These 2 buttons - thumbnail and remember - are styled in gold and bigger with my style.)

Change for V.7:

  • Add :visited shots indicator (visited = green)
  • Chrome compatibilitty
  • ROW counter

Darckr's Description :
"Darckr, your Flickr Viewer and Tool
Darckr is a free tool for displaying and acting upon Flickr images. Darckr uses the flickr api to retrieve data and hence cannot let other people view unauthorized content. By default darckr displays photos at a size that cannot exceed "Small" (240 pixels). Unlike other viewers, Darckr uses "opt-in" to grant access to larger sizes. If you think this is not enough, or on the opposite wish to opt-out go to "http://darckr.com/optin" to set up your preferred visible size. In both cases, you will have to grant darckr access to your stream to authenticate, so that he knows who you are. Right after if you do not wish to take advantage of the stream management features of darckr you may revoke the permission from your accounts page.

Oh, and Darckr will automatically display your photos beautifully by adding drop shadows (and borders of course if you like)."

You can open it , directly your Flickr Page, with my tweak of "FlickPM":
Greasemonkey (FlickrPM)Tweak

▶ Read here :
my TWEAK Script : Icons/new links for "flickr PM"
► "Flickr PM" - my TWEAK : Icons/new links for "Flickr PM":
Adds easily accessible icon links to a users FlickrPM popup mail (envelope icon), Profile (profile icon), Change relationship (RE), Flickr DNA (DN), Most Interesting Photos (IN), Flickr Scout (SC), Photo Archive (Coloured Grid), next to their user names in forums and photo comments. It also allows you to send a flickr mail to a user without actually leaving the page you are on.)
(Discuss)

FOR Dark Gray color, Test this Style :
Flickr WideScreen - DARK/Grey (Tweak Perso)

===============
It's a part of my "Flickr WideScreen Collection".

▶ Part 1:
Flickr Widescreen - ALLinONE (Part 1)
AND...
▶ Part 2:
Flickr Widescreen - ALLinONE (Part 2)

You Want a Dark/Grey Style?:
Flickr WideScreen - Dark & Grey

NEW (2020.04):
To install all parts of "Flickr Widescreen - ALLinONE" at once,
you can use my userscript [Greasyfork]:
Flickr WideScreen - BigONE v.151

Other Userstyles in my "Flickr WideScreen Collection" :
► [NEW] For Favorites pages ( v.1 02.06.2020):
Flickr WideScreen - ALLinONE - Favorites Small

These Styles are better with this Useful Addon to preview thumbnail on hover (or a similar Addon):
Thumbnail Zoom Plus

For More information on Scripts and Addons that i use a lot with FLICKR:
My BIG LIST - may 2012.
(in Flickr Hacks discuss)
Userscripts Group : "Flickr ★ Surf" (USO :8080)

Source code

/* ==UserStyle==
@name         Flickr WideScreen (Viewer) - DACKR - v.7
@namespace    USO Archive
@author       decembre
@description  WIDE style For Dackr (It's for a WIDESCREEN(1920x1080)!  Less Scrolling:  Thumbnail fit your large screen...    <b>NEW : now WORK for FIREFOX and CHROME</b>    To use with:  <a href="https://addons.mozilla.org/fr/firefox/addon/thumbnail-zoom-plus/"><b>Thumbnail Zoom Plus</b></a>  And Flickr PM :  <a href="http://forum.userstyles.org/discussion/30090/x#Item_1"><b>my TWEAK Script : Icons/new links for &quot;flickr PM&quot;</b></a>  Description of this useful Flickr Viewer :  "<a href="http://darckr.com/"><b>Darckr, your Flickr Viewer and Tool</b></a>  Screenshot from Brett stream:  <a href="http://darckr.com/username?sort=interestingness-desc&amp;format=Small&amp;username=21172551@N00">Brett's stream (via DarckR)</a>
@version      20200911.13.41
@license      NONE
@preprocessor uso
==/UserStyle== */
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("darckr.com") {

/* ==== (new2) FLICKR - DACKR Viewer - WideScreen - V.7 (new7) - CHROME/FIREFOX - COUNTER ROW - (THUMBNAIL ZOOM PLUS COMPATIBILITY) ==== */

/* IMPORTANT : for a working settings with this Style  (THUMBNAIL), add this at the end of the adress:

&colSmall=5&numSmall=25&sort=interestingness-desc&colSmall=4&numSmall=16 

And click the "REMEMBER " button" to keep it all the time.
these 2 buttons are styled in gold and bigger with my style.
=== */

/* NOTE - EASY To USE with : GREASEMONKEY Script : "FLICKR PM" 
READ : how to tweak it to add a DARKR Button ? :
http://forum.userstyles.org/discussion/30090/my-tweak-script-iconsnew-links-for-flickr-pm#Item_2
=== */


/* (new7) - WELCOME - LINKS more visible - === */
#welcome>p>a {
    color: white!important;
    font-style: italic;
    text-decoration: none;
}
#welcome>p>a:hover {
    color: peru !important;
    font-style: italic;
    text-decoration: none;
}
/* (new2) CHROME TEST */

/* (new2) THUMBNAIL ROWS - ALL - === */
#images div>table>tbody>tr  {
	position: relative !important;
	display: inline-block !important;
	width: 950px !important;
	left: -10px !important;
/*	outline: 1px solid red !important;*/
}

/* (new2) THUMBNAIL  ROWS - === */
#images div>table>tbody tr:nth-child(even):not(:last-child) {
	position: relative !important;
	display: inline-block !important;
	float: right !important;
	clear: both!important;
/*	width: 950px !important;*/
	margin-right: -10px !important;
	margin-top: -248px !important;
outline: 1px solid #222 !important;
}
#images div table tbody tr:nth-child(odd):not(:last-child) {
	position: relative !important;
	display: inline-block !important;
	float: left !important;
/*	clear: both!important;*/
	width: 950px !important;
outline: 1px solid #222 !important;
}

/* (new7) THUMBS - === */
#images div table tbody tr td {
	position: relative !important;
	display: inline-block !important;
	max-width: 210px !important;
	margin-right: 2% !important;
/*	right: 3% !important;*/
	padding: 0px !important;
	-moz-transform: scale(0.9) !important;
	-webkit-transform: scale(0.9) !important;
}

#images>div>div>table>tbody>tr>td>a>div>img {
	position: relative !important;
	display: inline-block !important;
	border: 1px solid #222222 !important;
/* border: 1px solid green !important; */
}
#images>div>div>table>tbody>tr>td>a>div:after {
content: "●" ;
	position: relative !important;
	display: inline-block !important;
/* 	border: 1px solid #222222 !important; */
/* transform: scale(0.5) ; */
color: #222 !important;
}
#images>div>div>table>tbody>tr>td>a:visited>div:after {
content: "●" ;
	position: relative !important;
	display: inline-block !important;
/* 	border: 1px solid red !important; */
/* transform: scale(0.5) ; */
color: green !important;
}
/* THUMBNAIL - === */
#collapsiblemenu #options >a:nth-child(9){
	border: 1px solid gold !important;
	border-radius: 5px !important;
	color: gold !important;
	font-size: 20px !important;
	padding: 0 10px !important;
}

/* THUMBNAIL ZOOM PLUS COMPATIBILITY - === */
#images>div>table>tbody>tr>td>a>div>img ,
#images>div>div>table>tbody>tr>td>a>div>img {
	background-image: none !important;
	display: block;
	margin-bottom: -248px;
	pointer-events: none !important;
	position: relative;
	top: -248px;
}
/* REMEMBER - === */
#collapsiblemenu div[name="menu"] >a:nth-child(18){
	border: 1px solid gold !important;
	border-radius: 5px !important;
	color: gold !important;
	font-size: 20px !important;
	padding: 0 10px !important;
}



/* (new2) COUNTER - 
#images>div>div:empty

=== */
#images {
	counter-reset: my !important;
}
#images>div>div {
	counter-increment: my !important;
} 
#images>div>div:not(:last-child):before {
	position: relative !important;
	display: inline-block !important;
	min-width: 30px !important;
	padding: 2px !important;
	margin-left: -12px !important;
/*	top: 5px !important;*/
	content: "" counter(my) "" !important;
        color: red !important;
	background: rgba(62, 59, 59, 0.6) !important;
	border-radius: 10px 10px 10px 10px !important;
	box-shadow: 0 0 2px rgba(162, 160, 160, 0.6) inset !important;
	font-size: 10px !important;
	text-align: center !important;
	z-index: 500 !important;
} 
#images>div>div:first-of-type:before {
	position: absolute !important;
	display: inline-block !important;
	top: 202px !important;
/*        color: violet !important;*/
/*	background: yellow !important;*/
} 

/* (new3)TEST GROUPS - 
=== */
#images div div[id*="@N"]:nth-child(odd) {
    text-align: left !important;
    width: 48% !important;
    margin-left: -50% !important;
    background: #222222 !important;
}
#images div div[id*="@N"]:nth-child(odd) strong {
    display: inline-block !important;
    min-width: 623px !important;
}

#images div div[id*="@N"]:nth-child(even) {
    position: relative !important;
    display: inline-block !important;
    text-align: left !important;
    width: 49% !important;
/*height: 15px !important;
    line-height: 15px !important;*/
    margin-left: 48% !important;
    top: -14px !important;
    background: black !important;
}
#images div div[id*="@N"]:nth-child(even) strong {
    display: inline-block !important;
    min-width: 623px !important;
}


#images {
	counter-reset: image !important;
}

#images div div[id*="@N"]:before {
	content: "▶ " counter(image) ": " !important;
	counter-increment: image !important;
        color: red !important;
}
/*#images div div[id*="@N"]:before {
content: "X" !important;
color: red !important;
}*/

#images div div[id*="@N"] strong + a {
    position: relative !important;
    display: inline-block !important;
    float: right !important;
/*min-width: 20px !important;
max-width: 20px !important;*/
    font-size: 0 !important;
}
#images div div[id*="@N"] strong + a:after {
    font-size: 12px !important;
/*min-width: 20px !important;*/
    content: "X" !important;
}

#images div div[id*="@N"]:hover{
color: gold!important;
background: green !important;
}
#images div div[id*="@N"] a:hover{
color: gold!important;
background: black !important;
padding: 1px 2px !important;
border-radius: 5px !important;
border: 1px solid yellow !important;
}
#images div div[id*="@N"] strong + a:hover:after {
color: red !important;
}
#images div div[id*="@N"] strong  a:visited {
color: red !important;
}
/* ===== END ===== */

}

Reviews

No reviews yet.