CodingLightbox2

  

Press Ctrl+Enter to quickly submit your post
Quick Reply  
 
 
  
 From:  af (CAER)   30 May 2011 23:50 
 To:  Drew (X3N0PH0N)      33 of 91 
38538.33 In reply to 38538.32 
Lightbox uses rel="lightbox[galleryname]" to mark individual galleries. Doesn't seem all that difficult to me, but then I've not actually tried using it.

Maybe a better way would be to allow the user to specify arbitrary CSS selectors to mark the containers for each gallery or something, like this:
JavaScript code:
QuickSlideConfig = {
    galleries: ["#main-gallery", ".other-gallery", "ul.gallery-list>li>div"]
}
Could be an issue if any of those selectors returns more than one container element, but document.querySelector() could be used to only get the first of them.

As for jQuery, yeah, it's not huge, but it's still 30K or so after gzip (compared to 1.3K or so for quickslide-min.js gzipped, 2.9K otherwise), and I don't want to force any dependencies - I've been trying to make the code as unobtrusive as possible. On the other hand, I could quite easily add an option to enable the use of jQuery for stuff like animation, so it'd be there if the user wants it. It depends how difficult it'd be to do the animation, really, and what kind of animations should be included.
0/0
 Reply   Quote More 

 From:  Drew (X3N0PH0N)   30 May 2011 23:53 
 To:  af (CAER)      34 of 91 
38538.34 In reply to 38538.33 
Oh ok that's fine then. I think it used to work differently. Or I'm thinking of something else. I think either way would be fine then but your way would be preferable to me.

I'd just use jquery. I mean, it's pretty proven and it seems pointless replicating the work they've done. This is going to be used displaying images, each of which is probably 10x as big as including jquery.
0/0
 Reply   Quote More 

 From:  af (CAER)   31 May 2011 00:01 
 To:  Drew (X3N0PH0N)      35 of 91 
38538.35 In reply to 38538.34 
Part of the reason I did this without using jQuery was just to get some practice at doing DOM stuff the native way - it's been bothering me slightly for a while that I didn't really know how to do it.

I think converting quickslide to depend on jQuery would save me about 50 lines of code at the moment. I'll investigate animation tomorrow.
0/0
 Reply   Quote More 

 From:  Drew (X3N0PH0N)   31 May 2011 00:02 
 To:  af (CAER)      36 of 91 
38538.36 In reply to 38538.35 
Fair enough then.
0/0
 Reply   Quote More 

 From:  af (CAER)   31 May 2011 00:06 
 To:  Drew (X3N0PH0N)      37 of 91 
38538.37 In reply to 38538.36 
Also if you do use it, please let me know if it does unexpected things :$

I am going to bed now, wherein I shall ponder whether to make jQuery a requirement for this project :C
0/0
 Reply   Quote More 

 From:  ANT_THOMAS    31 May 2011 09:20 
 To:  af (CAER)      38 of 91 
38538.38 In reply to 38538.20 

So it doesn't autoscale a photo to the size of the popup?

 

Got it set at 800x600 as per the demo and all I get is the 100% zoomed image.
0/0
 Reply   Quote More 

 From:  af (CAER)   31 May 2011 09:56 
 To:  ANT_THOMAS       39 of 91 
38538.39 In reply to 38538.38 
Ah, no, it won't make images bigger, although I can make it do that if you want. Why do you want to do that? They'll look all blurry/pixelly :S

Actually I'd best check if the max size thing actually works :$

edit: works here, although I did notice that I missed a ; off the end of the example config, which might cause some browsers to reject it. It should look something like this:
JavaScript code:
QuickSlideConfig = {
  loading_spinner_url = "loading-spinner.gif",
  max_width: 800,
  max_height: 600,
  auto_fit: true };
And to clarify, the size of the popup is determined by the the size of the image first, then any max_width/size settings are applied, then if the auto_fit option is set the image is scaled to fit the window, if necessary.
0/0
 Reply   Quote More 

 From:  ANT_THOMAS    31 May 2011 10:14 
 To:  af (CAER)      40 of 91 
38538.40 In reply to 38538.39 
I want to make a large image smaller.

So if I have this at the top of my page...
JavaScript code:
QuickSlideConfig = {
  loading_spinner_url = "loading-spinner.gif",
  max_width: 320,
  max_height: 240,
  auto_fit: true };


and this at the bottom
HTML code:
<script src="quickslide.js"></script>


With this in the middle
HTML code:
<a rel="quickslide" href="/folder/image.jpg"><img src="/folder/image.jpg" alt="" width="300" /></a>


Where the "image.jpg" is the same file/image for both and is 5MP.

Should the 5MP image show as ~320x240 in the popup?
0/0
 Reply   Quote More 

 From:  af (CAER)   31 May 2011 10:15 
 To:  ANT_THOMAS       41 of 91 
38538.41 In reply to 38538.40 
It should, yes.
0/0
 Reply   Quote More 

 From:  ANT_THOMAS    31 May 2011 10:18 
 To:  af (CAER)      42 of 91 
38538.42 In reply to 38538.41 

It doesn't :(

 

Chrome 11.0.696.71 and FF 4.0.1

 

The popup seems to be working but the image is 100% size and not scaled at all.
I'll see if I can get you any more details.
0/0
 Reply   Quote More 

 From:  af (CAER)   31 May 2011 10:21 
 To:  ANT_THOMAS       43 of 91 
38538.43 In reply to 38538.42 
By 100% size, you mean it's displaying at around 2592 × 1944, i.e.a gigantic popup covering the entire browser window?

I wonder if it's related to the use of full-size images as thumbnails. I shall investigate.

edit: you are putting the config stuff inside <script> tags, aren't you?
0/0
 Reply   Quote More 

 From:  ANT_THOMAS    31 May 2011 10:30 
 To:  af (CAER)      44 of 91 
38538.44 In reply to 38538.43 

Yes, showing as gigantic popup covering entire window, and yes it's inside <script> tags. I should've added the tags on here.

 

The content was being pulled from an MySQL db by PHP but I've just tried it with one of the same image files in a plain HTML file and it still happens.
0/0
 Reply   Quote More 

 From:  ANT_THOMAS    31 May 2011 10:32 
 To:  af (CAER)      45 of 91 
38538.45 In reply to 38538.43 
Here's an example.
0/0
 Reply   Quote More 

 From:  af (CAER)   31 May 2011 10:39 
 To:  ANT_THOMAS       46 of 91 
38538.46 In reply to 38538.45 
Oh, I see the problem. My fault :$

The browser is tripping over the config, because in my example I have

loading_spinner_url = "loading-spinner.gif",

when it should be:

loading_spinner_url: "loading-spinner.gif",

(a : not an = sign)

I've also uploaded a newer version of the code which makes the scaling a bit simpler.
0/0
 Reply   Quote More 

 From:  ANT_THOMAS    31 May 2011 10:40 
 To:  af (CAER)      47 of 91 
38538.47 In reply to 38538.46 
Yay, that works. I shall also download the new version.
0/0
 Reply   Quote More 

 From:  ANT_THOMAS    31 May 2011 10:53 
 To:  af (CAER)      48 of 91 
38538.48 In reply to 38538.46 
You might want to tell people to add the stylesheet link to the top of the page too. I was wondering why my images didn't have pretty borders :$
0/0
 Reply   Quote More 

 From:  af (CAER)   31 May 2011 11:06 
 To:  ANT_THOMAS       49 of 91 
38538.49 In reply to 38538.48 
Heh, that's included in the .zip download :D

Also I just updated it again to remove the calls to console.log (which would make IE8 fall over), and fixed some positioning issues when using auto-scaling.
0/0
 Reply   Quote More 

 From:  ANT_THOMAS    31 May 2011 11:14 
 To:  af (CAER)      50 of 91 
38538.50 In reply to 38538.49 
Now I need to get "quickslide" into the Relationship Page to Target list in TinyMCE.
0/0
 Reply   Quote More 

 From:  ANT_THOMAS    31 May 2011 11:43 
 To:  af (CAER)      51 of 91 
38538.51 In reply to 38538.49 

Found a problem. I have a long page with 3 images/thumbs on it at different points down the page. First image/thumb is near the top, have to scroll to get to the other 2.

 

When I click the top one the popup appears half way down the page and I need to scroll down to see it.

 

Are you having the popup appear at the middle of the page height/vertical wise, rather than at the middle of the window?
0/0
 Reply   Quote More 

 From:  af (CAER)   31 May 2011 11:45 
 To:  ANT_THOMAS       52 of 91 
38538.52 In reply to 38538.51 
It should appear in the middle of the page, plus scrolling.

I wonder if the issue is related to the size of the images. I suspect it might not be using the defined max sizes when positioning the images. Lemme take a look.
0/0
 Reply   Quote More 

Reply to All  
 

1–20  21–40  41–60  …  81–91

Rate my interest:

Adjust text size : Smaller 10 Larger

Beehive Forum 1.5.2 |  FAQ |  Docs |  Support |  Donate! ©2002 - 2024 Project Beehive Forum

Forum Stats