Unique ul id in a BBcode WITHOUT touching the template?

Discussion forum for MOD Writers regarding MOD Development.
Locked
digitaltoast
Registered User
Posts: 103
Joined: Thu Oct 18, 2007 9:33 am

Unique ul id in a BBcode WITHOUT touching the template?

Post by digitaltoast » Mon Jun 13, 2011 4:17 pm

I made some BBcode for phpBB to allow users to post flickr pics with certain tags.
Each photo div in the thread needs to be unique, and the images load when the thread is loaded.

In any other case, I could use the {URL} to make the ul element EXCEPT for the fact that jquery doesn't like the colon (:) in the code.

Here's what I have for the code, which takes a very simple URL of http://www.flickr.com/photos/<USER>/tags/<TAG>/ which works just fine for ONE posting per thread:

Code: Select all

<script>
  var APIkey = "xxxxxxxxxxxxx";
  head.js("/forum/jflickrfeed/jflickrfeed.min.js", "http://jquery-lazy.googlecode.com/svn-history/r14/trunk/jquery.lazy.source.js", function() {
    $.getJSON("http://www.flickr.com/services/rest/?jsoncallback=?", {
      method: "flickr.urls.lookupUser",
      url: "{URL}",
      format: "json",
      api_key: APIkey
    }, function(data) {

      $('#cbox').jflickrfeed({
        limit: 30,
        qstrings: {
          id: data.user.id,
          tags: tag
        },
        itemTemplate: '<li>' + '<a rel="colorbox" href="{{image}}" title="{{title}}">' + '<img src="{{image_m}}" alt="{{title}}" />' + '</a>' + '</li>'
      }, function(data) {
        $('#cbox a').colorbox();
      });

    });

    $.lazy([{
      src: '/forum/jflickrfeed/colorbox/colorbox/jquery.colorbox-min.js',
      name: 'colorbox',
      dependencies: {
        css: ['/forum/jflickrfeed/jflickrfeed.css', '/forum/jflickrfeed/colorbox/example1/colorbox.css']
      }
    }]);
  });
</script>
<ul id="cbox" class="thumbs">
</ul>
When it comes to the unique DIV, I'm stuck for a way to insert the uniquely named element into the DOM at the point the BBcode is inserted, THEN load the pics. And it appears I can't use PHP in BBcode, nor the templating tags - if I could easily make a unique photo element from the post ID and the flickr tag I'd be laughing. Oh, and I can't touch the template. It's all got to be within BBcode.
So, here's how I make a unique ID:

Code: Select all

  var flickrUser = "{URL}".split("/")[4];   
     var tag = "{URL}".split("/")[6];
     var photoDIV = flickrUser + "-" + "tag";
Or...there's an element called with a unique post ID just above I could possibly use:

Code: Select all

   <div id="p61789" class="post bg2">
I tried

Code: Select all

 var postnumber=$(this).closest('div[class^="post"]').attr('id');
but it always seemed to return the FIRST matching div on the page, not the NEAREST to the point of the BBcode. This element is two "divs" below

Code: Select all

<div class = "content">
and below the user posting area there is:

Code: Select all

  <div id="sig61789" class="signature">
So where I'm completely stuck is navigating to prev() or closest() or parent() or indeed anywhere from the point where I am without having a $(this) link to reference.

So shouldn't something like:

Code: Select all

   $(this).prev('content').html('<ul class="thumbs" id=photoDIV></ul>');
or even

Code: Select all

   $(this).html('<ul class="thumbs" id=photoDIV></ul>');
work? Everytime I think I understand jquery it all goes hazy again...

User avatar
RMcGirr83
Recognised Extension Developer
Posts: 21034
Joined: Wed Jun 22, 2005 4:33 pm
Location: Your display
Name: Rich McGirr
Contact:

Re: Unique ul id in a BBcode WITHOUT touching the template?

Post by RMcGirr83 » Mon Jun 13, 2011 7:40 pm

Code: Select all

	$("div[id*='p']").each(function(){
		var id = $(this).attr('id').replace('p','');
	});
:?:
In times of change, learners inherit the earth, while the learned find themselves beautifully equipped to deal with a world that no longer exists - Eric Hoffer
Former Modifications/Extensions Team Member | My extensions
Appreciate the extensions/mods/support then buy me a beer
All requests for support via PM will be ignored

digitaltoast
Registered User
Posts: 103
Joined: Thu Oct 18, 2007 9:33 am

Re: Unique ul id in a BBcode WITHOUT touching the template?

Post by digitaltoast » Mon Jun 13, 2011 8:04 pm

RMcGirr83 wrote:

Code: Select all

	$("div[id*='p']").each(function(){
		var id = $(this).attr('id').replace('p','');
	});
:?:
Not sure I follow - did you mean $("div[id^='p']") in which case I get the div ID's with names like page-header turned into age-header, and of course the post numbers, but I'm not entirely sure what I'm meant to do with these.

User avatar
RMcGirr83
Recognised Extension Developer
Posts: 21034
Joined: Wed Jun 22, 2005 4:33 pm
Location: Your display
Name: Rich McGirr
Contact:

Re: Unique ul id in a BBcode WITHOUT touching the template?

Post by RMcGirr83 » Mon Jun 13, 2011 8:07 pm

It was a suggestion for you to be able to get a unique id from a post. I'm not completely sure what you are trying to do with flickr
In times of change, learners inherit the earth, while the learned find themselves beautifully equipped to deal with a world that no longer exists - Eric Hoffer
Former Modifications/Extensions Team Member | My extensions
Appreciate the extensions/mods/support then buy me a beer
All requests for support via PM will be ignored

digitaltoast
Registered User
Posts: 103
Joined: Thu Oct 18, 2007 9:33 am

Re: Unique ul id in a BBcode WITHOUT touching the template?

Post by digitaltoast » Mon Jun 13, 2011 8:19 pm

RMcGirr83 wrote:It was a suggestion for you to be able to get a unique id from a post. I'm not completely sure what you are trying to do with flickr
Post a tagged photostream. Like http://www.flickr.com/photos/lesdray/tags/icicles/

Ignore the flickr part - that's working fine; the one and only problem I am having is generating a uniquely titled div for each instance that bbcode is used - the post ID would do - within the BBcode, but without the php I tried being executed, I seem to be stuck.

The templating system - does that "expose" any variables I could use within BBcode? Of course, one way round the fact that I can't use the URL as the ID (due to the : in http:// ) would be to get the poster to put http://url.com/,randomnumber as the bbcode, but that just looks ... odd!
Last edited by digitaltoast on Mon Jun 13, 2011 8:21 pm, edited 1 time in total.

digitaltoast
Registered User
Posts: 103
Joined: Thu Oct 18, 2007 9:33 am

Re: Unique ul id in a BBcode WITHOUT touching the template?

Post by digitaltoast » Mon Jun 13, 2011 8:20 pm

delete this post - meant to edit not quote

User avatar
4_seven
I've Been Banned!
Posts: 5155
Joined: Wed Apr 30, 2008 1:41 am

Re: Unique ul id in a BBcode WITHOUT touching the template?

Post by 4_seven » Mon Jun 13, 2011 10:01 pm

Just use

Code: Select all

var Rand = Math.floor(Math.random() * 1000000 + 500000); 
to produce single id's. Simple and effective..

Also u can use

Code: Select all

var foo = new Date; // Generic JS date object 
var unixtime_ms = foo.getTime(); // Returns milliseconds since the epoch  
so unix-time is also very unique ;)
Current Mods | Mod Base | php(BB) programming | No help via PM

digitaltoast
Registered User
Posts: 103
Joined: Thu Oct 18, 2007 9:33 am

Re: Unique ul id in a BBcode WITHOUT touching the template?

Post by digitaltoast » Wed Jun 15, 2011 10:22 am

Big thanks to the help here and various other places, I now appear to have a functioning system for posting picasa and flickr albums. My main struggle was the realisation that jquery's $(this) didn't mean "this place where the code is". I'll copy this to the custom bbcodes post too, but if anyone's interested, you need this javascript http://pastebin.com/ZTyBreaR and the bits and pieces mentioned.

Then you need the following bbcodes:

For flickr tagged pictures:

BBCode usage

Code: Select all

[flickrtag]{URL}[/flickrtag]
HTML replacement

Code: Select all

<a href = "{URL}" target = "_new">{URL}</a> - click a thumbnail for larger image<br /><ul class = "thumbs" name={URL}></ul>
Help line:

Code: Select all

Just paste the URL containing the photos with the tags you want. eg http://www.flickr.com/photos/username/tags/tagname/

For Picasaweb albums:

BBCode usage

Code: Select all

[PicasaAlbum]{URL}[/PicasaAlbum]
HTML replacement

Code: Select all

<br /><a href = "{URL}" target = "_new">{URL}</a> - Click a thumbnail for larger image or an album name to open the album<br /><br /><div class="PicasaAlbum">{URL}</div>
Help line

Code: Select all

Just post a URL to a Picasa user to show all their albums - eg: http://picasaweb.google.com/tomaszek31 or an album to show photos from that album eg https://picasaweb.google.com/tomaszek31/RoznePomieszane
Demo: http://www.reading-forum.co.uk/forum/vi ... 321#p63321

Locked

Return to “[3.0.x] MOD Writers Discussion”