Iframe and jquery

JavaScript
1

Hello all,

i found a great page for media-rss-feed-slideshow for which i have an iframe as follow:

<iframe allowtransparency="true" frameborder="0" scrolling="no" width="160" height="120" src="http://www.gmodules.com/gadgets/ifr?url=http://ciupercomania.googlecode.com/svn/trunk/flickr-slideshow-simple.xml&up_CCOL=%23FFFFFF&up_SCOL=%23FFFFFF&up_PWH=160&up_PHT=120&up_DTime=3000&up_TTime=3000&up_NAB=No&up_RND=Yes&up_CLP=No&up_FEED=https://www.flickr.com/photos/123749019@N08/sets/72157644161519777"></iframe>

all great an working till now, so, here it comes my question:
is any script out there which can recognize the current Month and according to that one to change the photoalbum link on my iframe?

https://www.flickr.com/photos/123749019@N08/sets/72157644161519777

so, every month, without any intervention, new photos will be shown.

i prefer this method instead of direct photo links in html code, because i can handle more easily my photocollection from flickr and any new photos added or removed don’t need html code updates … it’s all refreshed by itself …

I’m aware that this method probably will need to have defined 12 albums, but even than i think is more elegant than modifying my dispaly list every month.

thank you.

2

Hi,

Could you post a link to a page where we can see this in action?

3

Demo
animation, size, nav bar … not matter on this demo version. but you can see it in action (upper part of the right side bar).

4

Ah, ok, the iframe is on a different domain.
I’m afraid you can’t alter its contents.
The Same Origin Policy forbids this.

5

i don’t want to alter it’s content.
i can (and i want to) define 12 albums (1 iframe for each month) and looking for a script to recognize the current month and display only it’s corresponding iframe, ignoring the rest of 11. this is possible?

6

Ah, with you.

You can get the number of the current current month like so (according to the user’s clock):

var currentDate = new Date();
var currentMonth = currentDate.getMonth();

You can include the iframe in your page:

<iframe allowtransparency="true" frameborder="0" scrolling="no" width="160" height="120"></iframe>

and use JS to set its src attribute accordingly:

var baseSrc= 'http://www.gmodules.com/gadgets/ifr?url=http://ciupercomania.googlecode.com/svn/trunk/flickr-slideshow-simple.xml&up_CCOL=%23FFFFFF&up_SCOL=%23FFFFFF&up_PWH=160&up_PHT=120&up_DTime=3000&up_TTime=3000&up_NAB=No&up_RND=Yes&up_CLP=No&up_FEED=';

var albums = [
  "album1 url",
  "album2 url",
  "album3 url",
  "album4 url",
  etc ...
]

var currAlbumUrl = albums[currentMonth];
var iframeSrc = baseSrc + currAlbumUrl;
$("iframe").attr("src", iframeSrc);

Make sense?

7

my programming knowledge is very basic, but as i can understand it, is something like you mentioned above, yes.
i’ll made the 12 photo albums and try it as you proposed to see if it’s working. thank you.

8

No prob :slight_smile:
Let us know if you get stuck.

9

of course i’m stucked:

<iframe allowtransparency="true" frameborder="0" scrolling="no" width="160" height="120"></iframe>

<script>

var currentDate = new Date();
var currentMonth = currentDate.getMonth();
var baseSrc= 'http://www.gmodules.com/gadgets/ifr?url=http://ciupercomania.googlecode.com/svn/trunk/flickr-slideshow-simple.xml&up_CCOL=%23FFFFFF&up_SCOL=%23FFFFFF&up_PWH=160&up_PHT=120&up_DTime=3000&up_TTime=3000&up_NAB=No&up_RND=Yes&up_CLP=No&up_FEED=';

var albums = [
  "https://www.flickr.com/photos/123749019@N08/sets/72157644203145229",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644203023628",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644658452893",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644203029388",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644617542914",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644603864001",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644562981576",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644658463213",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644203160489",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644604321892",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644603872451",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644202997660",
]

var currAlbumUrl = albums[currentMonth];
var iframeSrc = baseSrc + currAlbumUrl;
$("iframe").attr("src", iframeSrc);

</script>

the “frame” is made but is not filled … demo

10

but wait a sec, we doing something wrong … (let it clear for me first) … photo albums declaration should be elsewhere …

meantime please try to figure our why the iframe is not filled.

11

Hi,

You need to include jQuery:

<iframe allowtransparency="true" frameborder="1" scrolling="no" width="160" height="120"></iframe>

[B]<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>[/B]
<script>
var currentDate = new Date();
var currentMonth = currentDate.getMonth();

var baseSrc= 'http://www.gmodules.com/gadgets/ifr?url=http://ciupercomania.googlecode.com/svn/trunk/flickr-slideshow-simple.xml&up_CCOL=%23FFFFFF&up_SCOL=%23FFFFFF&up_PWH=160&up_PHT=120&up_DTime=3000&up_TTime=3000&up_NAB=Yes&up_RND=Yes&up_CLP=No&up_FEED=';

var albums = [
  "https://www.flickr.com/photos/123749019@N08/sets/72157644203145229",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644203023628",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644658452893",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644203029388",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644617542914",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644603864001",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644562981576",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644658463213",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644203160489",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644604321892",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644603872451",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644202997660",
]

var currAlbumUrl = albums[currentMonth];
var iframeSrc = baseSrc + currAlbumUrl;
$("iframe").attr("src", iframeSrc);
</script>
12

i have from the previuos script:

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>

but changed if for

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />

and still no fill

13

Not on the demo page from post#9, you don’t.

If you look in your browser’s console (here’s how), you will see:

Uncaught ReferenceError: $ is not defined (index):1310
14

hmmm, maybe i didn’t understand it, on my demo page i have this code now (all in the widget now)


<iframe allowtransparency="true" frameborder="1" scrolling="no" width="160" height="120"></iframe>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />
<script>

var currentDate = new Date();
var currentMonth = currentDate.getMonth();

var baseSrc= 'http://www.gmodules.com/gadgets/ifr?url=http://ciupercomania.googlecode.com/svn/trunk/flickr-slideshow-simple.xml&up_CCOL=%23FFFFFF&up_SCOL=%23FFFFFF&up_PWH=160&up_PHT=120&up_DTime=3000&up_TTime=3000&up_NAB=Yes&up_RND=Yes&up_CLP=No&up_FEED=';

var albums = [
  "https://www.flickr.com/photos/123749019@N08/sets/72157644203145229",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644203023628",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644658452893",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644203029388",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644617542914",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644603864001",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644562981576",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644658463213",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644203160489",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644604321892",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644603872451",
  "https://www.flickr.com/photos/123749019@N08/sets/72157644202997660",
]

var currAlbumUrl = albums[currentMonth];
var iframeSrc = baseSrc + currAlbumUrl;
$("iframe").attr("src", iframeSrc);

</script>

but the results are the same

15

You have to close the script tag:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />[B]</script>[/B]

But do you know what, I’m being lazy - we don’t need jQuery at all.

This will do what you want:

<iframe id="myIframe" allowtransparency="true" frameborder="1" scrolling="no" width="160" height="120"></iframe>

<script>
  var currentDate = new Date();
  var currentMonth = currentDate.getMonth();

  var baseSrc= 'http://www.gmodules.com/gadgets/ifr?url=http://ciupercomania.googlecode.com/svn/trunk/flickr-slideshow-simple.xml&up_CCOL=%23FFFFFF&up_SCOL=%23FFFFFF&up_PWH=160&up_PHT=120&up_DTime=3000&up_TTime=3000&up_NAB=Yes&up_RND=Yes&up_CLP=No&up_FEED=';

  var albums = [
    "https://www.flickr.com/photos/123749019@N08/sets/72157644203145229",
    "https://www.flickr.com/photos/123749019@N08/sets/72157644203023628",
    "https://www.flickr.com/photos/123749019@N08/sets/72157644658452893",
    "https://www.flickr.com/photos/123749019@N08/sets/72157644203029388",
    "https://www.flickr.com/photos/123749019@N08/sets/72157644617542914",
    "https://www.flickr.com/photos/123749019@N08/sets/72157644603864001",
    "https://www.flickr.com/photos/123749019@N08/sets/72157644562981576",
    "https://www.flickr.com/photos/123749019@N08/sets/72157644658463213",
    "https://www.flickr.com/photos/123749019@N08/sets/72157644203160489",
    "https://www.flickr.com/photos/123749019@N08/sets/72157644604321892",
    "https://www.flickr.com/photos/123749019@N08/sets/72157644603872451",
    "https://www.flickr.com/photos/123749019@N08/sets/72157644202997660",
  ]

  var currAlbumUrl = albums[currentMonth];
  var iframeSrc = baseSrc + currAlbumUrl;
  document.getElementById("myIframe").src=iframeSrc;
</script>
16

it’s a bit late today, but tomorrow i’ll back for clarifying, we don’t need albums as above … need to change the code a little bit.

17

We have this initial iframe code:


<iframe allowtransparency="true" frameborder="0" scrolling="no" width="160" height="120" src="http://www.gmodules.com/gadgets/ifr?url=http://ciupercomania.googlecode.com/svn/trunk/flickr-slideshow-simple.xml&up_CCOL=%23FFFFFF&up_SCOL=%23FFFFFF&up_PWH=160&up_PHT=120&up_DTime=3000&up_TTime=3000&up_NAB=No&up_RND=Yes&up_CLP=No&up_FEED=https://www.flickr.com/photos/123749019@N08/sets/72157644161519777"></iframe>

which for me say something like this

 <iframe [COLOR="#FF0000"]some frame display settings[/COLOR] + the source composed by ([COLOR="#008000"]behavior driving script[/COLOR] + [COLOR="#800080"]custom content setting[/COLOR] + [COLOR="#0000FF"]FEED url[/COLOR])></iframe>

So, if all these are correct and this is how suppose to work than something is wrong. Why? becasue the a FEED url is only an appendix; something which is there but have no use anymore.

reading (again) the autors instructions, i found out that the code used by me for the iframe, wasn’t fully the original code, which should look like:


<iframe allowtransparency="true" frameborder="0" scrolling="no" width="160" height="120"  src="http://www.gmodules.com/gadgets/ifr?url=http://ciupercomania.googlecode.com/svn/trunk/flickr-slideshow-simple.xml&up_PWH=160&up_PHT=120&up_DTime=2000&up_TTime=3000&up_RND=Yes&up_CLP=No&up_NAB=Yes&up_SCOL=%23fff&up_BCOL=%23fff&up_CCOL=%23fff&up_SET=72157644203160489"></iframe>

and there i need to change only the ID of the photo album. so, the final code should look like:


<iframe id="myIframe" allowtransparency="true" frameborder="0" scrolling="no" width="160" height="120"></iframe>

<script>
  var currentDate = new Date();
  var currentMonth = currentDate.getMonth();

  var baseSrc= 'http://www.gmodules.com/gadgets/ifr?url=http://ciupercomania.googlecode.com/svn/trunk/flickr-slideshow-simple.xml&up_PWH=160&up_PHT=120&up_DTime=2000&up_TTime=3000&up_RND=Yes&up_CLP=No&up_NAB=Yes&up_SCOL=%23fff&up_BCOL=%23fff&up_CCOL=%23fff&up_SET=';

  var albums = [
    "72157644203145229",
    "72157644203023628",
    "72157644658452893",
    "72157644203029388",
    "72157644617542914",
    "72157644603864001",
    "72157644562981576",
    "72157644658463213",
    "72157644203160489",
    "72157644604321892",
    "72157644603872451",
    "72157644202997660",
  ]

  var currAlbumUrl = albums[currentMonth];
  var iframeSrc = baseSrc + currAlbumUrl;
  document.getElementById("myIframe").src=iframeSrc;
</script>

it’s functional, thank you.

BUT, i have another request now: since i found out that this “display” can be solved with script too (without iframe).

<script src="http://www.gmodules.com/gadgets/ifr?url=http://ciupercomania.googlecode.com/svn/trunk/flickr-slideshow-simple.xml&up_SET=[COLOR="#FF0000"]72157644617542914[/COLOR]&up_PWH=480&up_PHT=360&up_DTime=&up_TTime=&up_RND=&up_CLP=&up_NAB=&up_SCOL=%23c3d9ff&up_BCOL=%23f00&up_CCOL=%23d1dae3&up_PWidth=490&up_PHeight=420&synd=open&w=510&h=440&title=Diaporama+Flickr+(Photoset)&border=%23ffffff%7C3px%2C1px+solid+%23999999&output=js"></script>

which is the best way to go, with script or with iframe? how is faster for loading?..

and one more thing. i took a look inside this used xml and there is a lot “unused default settings… which are repeated in the script too” but since there is html and javascripts (or jquery) commands in that file. Can be imported/writen in “my” script, to void loading/calling an external file? is hard to import only the important details/commands? I asking too much? Thank you.

18

Excellent. I like the way you broke down the problem :slight_smile:

I don’t think this will make a noticeable difference in speed.
If the iframe works, I would stick with that.

I’m not sure.
I would suggest trying it out and seeing if it works. I can attempt to help you if you get stuck.
I don’t think you’re asking too much :slight_smile:

As an aside, I would recommend altering your paths. You have:

http://ciupercomania.googlecode.com/[B]svn/trunk[/B]/flickr-slideshow-simple.xml

SVN is a version control system and Trunk denotes the main body of development, originating from the start of the project until the present.
I believe you have this from the cookie plugin we were using.
Better might be:

http://ciupercomania.googlecode.com/[B]assets[/B]/flickr-slideshow-simple.xml
19

i need to repeat myself :slight_smile: my knowledge are very basic and limited, Since i use a google product (blogger) googlecode.com for me is just a place to host my scripts for faster loading, so SVN, trunk … are just “folders” for me without deeper understandings :smiley:
i even don’t know how to delete an unwanted file there … (but this is a different discussion).
My project was declared as SVN at the begining, i dont know how to change it … for me it’s working as it is … should i change it?

yes, i used it for the cookie script too, as well for one or 2 more …

20

In that case, no. I thought it was something you had set up yourself.
And anyway, it’s really only a minor point :slight_smile: