Results 1 to 6 of 6

Thread: Photo Album script

  1. #1
    Join Date
    Nov 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Photo Album script

    http://www.dynamicdrive.com/dynamici...photoalbum.htm

    I am wanting to use your photo album script but add to it some On MouseOver Behaviours to create mouseover effects on each image file in the album, see below:

    I wish to use your:

    function buildimage(i){
    var tempcontainer=galleryarray[i][3]!=""? '<a href="'+galleryarray[i][3]+'" target="'+href_target+'">' : ""
    tempcontainer+='<img src="'+galleryarray[i][0]+'" border="1" title="'+galleryarray[i][1]+'">'
    tempcontainer=galleryarray[i][3]!=""? tempcontainer+'</a>' : tempcontainer
    tempcontainer=galleryarray[i][2]!=""? tempcontainer+'<br \/>'+galleryarray[i][2] : tempcontainer
    return tempcontainer
    }

    but some how add in something like this:

    <a href="#" onMouseOver="window.document.first_form.first_text.value=<%=rs_pics("product_name")%>;window.document.first_form.second_text.value=<%=rs_pics("product_id")%>;wi ndow.document.images['imageBig'].src = '<%=rs_pics("medium_media_file_name")%>'"><img name="<%=rs_pics("menufile")%>" border="0" src="<%=rs_pics("menufile")%>"></a>

    rs_pics is a declared recordset.

    Any help with this would be great, thanks

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    There are too many things about this line of code:

    Code:
    <a href="#" onMouseOver="window.document.first_form.first_text.value=<%=rs_pics("product_name")%>;window.document.first_form.second_text.value=<%=rs_pics("product_id")%>;window.document.images['imageBig'].src = '<%=rs_pics("medium_media_file_name")%>'"><img name="<%=rs_pics("menufile")%>" border="0" src="<%=rs_pics("menufile")%>"></a>
    That I do not understand. Could you write for example a normal link that would launch one of those record images in a new window. The normal HTML code for something like that would be:

    HTML Code:
    <a href="some.jpg" target="_blank">Click to see some.jpg</a>
    How would that be written using:

    Code:
    <%=rs_pics("medium_media_file_name")%>
    instead of "some.jpg"? Get something simple like that working and show me what the correct syntax for that would be and I should be able to figure most of it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Nov 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    If I use nasty dreamweaver code it looks like this:

    <a href="#" onMouseOver="MM_swapImage('image_big','','<%=rs_pics("medium_media_file_name")%>',1);MM_setTextOfTextfield('txt_itemdescription','','<%=rs_pics("product_name")% ><% Response.write rs_pics("product_short_description")%>Price:<%=(rs_pics("product_price"))%>Catalogue No : <%=rs_pics("catalog_id")%>No Delivery Charge with this item!');MM_setTextOfTextfield('txt_productid','','<%=rs_pics("product_id")%>')" onClick="MM_swapImage('image_big','','<%=rs_pics("menufile")%>',1);">
    <img name="<%=rs_pics("menufile")%>" border="0" src="<%=rs_pics("menufile")%>"></a>

  4. #4
    Join Date
    Nov 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    All I am after is including a MouseOver Behaviour within your function:

    function buildimage(i){
    var tempcontainer=galleryarray[i][3]!=""? '<a href="'+galleryarray[i][3]+'" target="'+href_target+'">' : ""
    tempcontainer+='<img src="'+galleryarray[i][0]+'" border="1" title="'+galleryarray[i][1]+'">'
    tempcontainer=galleryarray[i][3]!=""? tempcontainer+'</a>' : tempcontainer
    tempcontainer=galleryarray[i][2]!=""? tempcontainer+'<br \/>'+galleryarray[i][2] : tempcontainer
    return tempcontainer
    }

    If you could show me how you would include a simple mouseover behaviour to change the text of a textbox called txt_productdescription I would appreciate it. Thanks.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Well, adding a mouse over function in that code is relatively easy, I have taken your code as you supplied it (not what I asked for, BTW), turned it into a function and added a call to that function from the DD code you quoted (it is not 'my code', I am not working for DD):

    Code:
    function mOver1(){MM_swapImage('image_big','','<%=rs_pics("medium_media_file_name")%>',1);MM_setTextOfTextfield('txt_itemdescription','','<%=rs_pics("product_name")%><% Response.write rs_pics("product_short_description")%>Price:<%=(rs_pics("product_price"))%>Catalogue No : <%=rs_pics("catalog_id")%>No Delivery Charge with this item!');MM_setTextOfTextfield('txt_productid','','<%=rs_pics("product_id")%>')" onClick="MM_swapImage('image_big','','<%=rs_pics("menufile")%>',1);"> 
    <img name="<%=rs_pics("menufile")%>" border="0" src="<%=rs_pics("menufile")%>"}
    
    
    function buildimage(i){
    var tempcontainer=galleryarray[i][3]!=""? '<a href="'+galleryarray[i][3]+'" target="'+href_target+'">' : ""
    tempcontainer+='<img src="'+galleryarray[i][0]+'" onmouseover="mOver1();" border="1" title="'+galleryarray[i][1]+'">'
    tempcontainer=galleryarray[i][3]!=""? tempcontainer+'</a>' : tempcontainer
    tempcontainer=galleryarray[i][2]!=""? tempcontainer+'<br \/>'+galleryarray[i][2] : tempcontainer
    return tempcontainer
    }
    You will notice the red highlighted part. That is one way to add any function to the DD code onmouseover. A neat trick may be used:

    Code:
    function buildimage(i){
    var tempcontainer=galleryarray[i][3]!=""? '<a href="'+galleryarray[i][3]+'" target="'+href_target+'">' : ""
    tempcontainer+='<img src="'+galleryarray[i][0]+'" onmouseover="mOver2(this, \''+i+'\');" border="1" title="'+galleryarray[i][1]+'">'
    tempcontainer=galleryarray[i][3]!=""? tempcontainer+'</a>' : tempcontainer
    tempcontainer=galleryarray[i][2]!=""? tempcontainer+'<br \/>'+galleryarray[i][2] : tempcontainer
    return tempcontainer
    }
    Here the function mOver2(el, num) would receive two parameters from each unique image the above code writes. The first parameter would be the element (as an object) that contains the image. The second parameter would be the unique number that identifies the image's source and other features (if any) in the primary galleryarray. What you do with them in the new mOver2(el, num) function is to to you but, as a simple demo try:

    Code:
    function mOver2(el, num){
    alert ('Image source is '+el.src+'\nIt\'s number in the primary array is '+num+'\nOther values in the array, if any, are:\n '+galleryarray[num].toString().substr(galleryarray[num].toString().indexOf(galleryarray[num][0])+galleryarray[num][0].length+1))
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Nov 2005
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    If I write the gallery array like this using a recordset called rs_pics:

    "<%
    dim counter
    counter = 0
    Do while not rs_pics.EOF
    %>"
    galleryarray[<%=counter%>] = ["<%=rs_pics("menufile")%>", "<%=rs_pics("product_name")%>", "optional url","<%=rs_pics("product_id")%>","<%=rs_pics("large_media_file_name")%>"]

    "<% counter = counter + 1
    rs_pics.moveNext
    Loop
    %>"

    I can see how it is meant to work, The nearest I have got is the code below, the problem with the code below is that for some reason the product_id being passed remains the same for all images in the gallery and the textchange fucntion changes the text to the same product_name every mouseOver, so I am not understanding why the correct record for each image is being accessed. Could it be anything to do with the other part of this code that deals with specifying dimension of gallery (number of images shown), such as 4x2, 3x1 etc.
    Thanks for your help with this. Huge thanks.

    function buildimage(i){
    var tempcontainer=galleryarray[i][2]!=""? '<a href="javascript:void();" >' : ""
    tempcontainer+='<img src="'+galleryarray[i][0]+'" onclick="productwindow(galleryarray[i][3])" onMouseOver="changetext(galleryarray[i][1]);" border="1" title="'+galleryarray[i][1]+'">'
    tempcontainer=galleryarray[i][3]!=""? tempcontainer+'</a>' : tempcontainer
    tempcontainer=galleryarray[i][2]!=""? tempcontainer+'<br \/>'+galleryarray[i][2] : tempcontainer
    return tempcontainer
    }

    function changetext(productName) {
    document.form1.txt_itemdescription.value= productName;
    }

    function productwindow(product) {
    open("productpicB.asp?product=" + product ,null,
    "height=500,width=500,status=yes,toolbar=no,menubar=no,location=no");
    }

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •