www.webdeveloper.com
Results 1 to 4 of 4

Thread: Helping a friend with his website and bit off more than I can chew

  1. #1
    Join Date
    Jun 2009
    Posts
    3

    Helping a friend with his website and bit off more than I can chew

    Hello all,

    I am helping a friend with his site and not doing it for profit and that is the only reason I am looking for outside help without hitting the books and trying to figure it out. He has an art gallery showing off his work and the thumbnail section works great but when you click and image it shows a lot of background code, a couple broken image pics and then at the very bottom the correct image and navigation bar. I am thinking something in the code is missing the hide code or something. Any tips would be helpful. Here is the code that shows up. He hasn't gotten me access to the source yet but was wondering if anything here would clue it off. I typed in broken image where they show up in case that helps

    ') else document.write('
    BROKEN IMAGE
    ') if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox this.startit() else{ this.curimageindex++ setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay) } } function fadepic(obj){ if (obj.degree<100){ obj.degree+=10 if (obj.tempobj.filters&&obj.tempobj.filters[0]){ if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+ obj.tempobj.filters[0].opacity=obj.degree else //else if IE5.5- obj.tempobj.style.filter="alpha(opacity="+obj.degree+")" } else if (obj.tempobj.style.MozOpacity) obj.tempobj.style.MozOpacity=obj.degree/101 else if (obj.tempobj.style.KhtmlOpacity) obj.tempobj.style.KhtmlOpacity=obj.degree/100 else if (obj.tempobj.style.opacity&&!obj.tempobj.filters) obj.tempobj.style.opacity=obj.degree/101 } else{ clearInterval(fadeclear[obj.slideshowid]) obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1" obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas) obj.populateslide(obj.tempobj, obj.nextimageindex) obj.nextimageindex=(obj.nextimageindex' slideHTML+='
    BROKEN IMGAGE
    ' if (this.theimages[picindex][1]!="") //if associated link exists for image slideHTML+='' picobj.innerHTML=slideHTML } fadeshow.prototype.rotateimage=function(){ if (this.pausecheck==1) //if pause onMouseover enabled, cache object var cacheobj=this if (this.mouseovercheck==1) setTimeout(function(){cacheobj.rotateimage()}, 100) else if (iebrowser&&dom||dom){ this.resetit() var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas) crossobj.style.zIndex++ fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50) this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0" } else{ var ns4imgobj=document.images['defaultslide'+this.slideshowid] ns4imgobj.src=this.postimages[this.curimageindex].src } this.curimageindex=(this.curimageindex */

  2. #2
    Join Date
    Jun 2009
    Posts
    3
    Hi Everyone. I see a lot of view but not replies. Looking into it further I didn't give a lot of helpful info. I was able to get the source through google chrome and see it was a prebuilt template site. Here is a link to their main page and a link to the gallery that is having the issue. All gallerys are having an issue viewing the full image.

    farawaycreations.com

    http://www.farawaycreations.com/inde...id=4&Itemid=24

    Here is the source code for the page and I found the problem section and have changed the color to blue. Does it seem to be missing some markers or something?


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" dir="ltr">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="robots" content="index, follow" />
    <meta name="keywords" content="far away creations, faraway creations, costumes, props, scifi, custom, armor, suit, science fiction, star wars, sculpting, molding, casting, armor, mask, helmet" />
    <meta name="description" content="Far Away Creations - custom prop, costume, character, set design" />
    <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
    <title>Far Away Creations</title>
    <link rel="stylesheet" href="/components/com_phocagallery/assets/phocagallery.css" type="text/css" />
    <style type="text/css">
    html,body, .contentpane{overflow:hidden;background:#ffffff;}
    center, table {background:#ffffff;}
    #sbox-window {background-color:#fff100;padding:5px}
    </style>

    <link rel="stylesheet" href="/templates/system/css/general.css" type="text/css" />
    <link rel="stylesheet" href="/templates/system/css/template.css" type="text/css" />

    </head>
    <body class="contentpane">

    <script type="text/javascript">
    /* <![CDATA[ */
    /***********************************************
    * Ultimate Fade-In Slideshow (v1.51): � Dynamic Drive (http://www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    ***********************************************/

    var fadeimages=new Array()
    fadeimages[0]=["/images/phocagallery/Path-Finder/thumbs/phoca_thumb_l_scout-icon.jpg", "", ""];fadeimages[1]=["/images/phocagallery/Path-Finder/thumbs/phoca_thumb_l_myscout01bsm.jpg", "", ""];fadeimages[2]=["/images/phocagallery/Path-Finder/thumbs/phoca_thumb_l_myscout13dsm.jpg", "", ""];fadeimages[3]=["/images/phocagallery/Path-Finder/thumbs/phoca_thumb_l_dsc-0132sm.jpg", "", ""];fadeimages[4]=["/images/phocagallery/Path-Finder/thumbs/phoca_thumb_l_dsc-0135sm.jpg", "", ""];fadeimages[5]=["/images/phocagallery/Path-Finder/thumbs/phoca_thumb_l_dsc-0136sm.jpg", "", ""];fadeimages[6]=["/images/phocagallery/Path-Finder/thumbs/phoca_thumb_l_dsc-0145sm.jpg", "", ""];fadeimages[7]=["/images/phocagallery/Path-Finder/thumbs/phoca_thumb_l_dsc-0146sm.jpg", "", ""];fadeimages[8]=["/images/phocagallery/Path-Finder/thumbs/phoca_thumb_l_dsc-0180sm.jpg", "", ""];fadeimages[9]=["/images/phocagallery/Path-Finder/thumbs/phoca_thumb_l_dsc-0183sm.jpg", "", ""];fadeimages[10]=["/images/phocagallery/Path-Finder/thumbs/phoca_thumb_l_dsc-0185sm.jpg", "", ""];fadeimages[11]=["/images/phocagallery/Path-Finder/thumbs/phoca_thumb_l_dsc-0188sm.jpg", "", ""];fadeimages[12]=["/images/phocagallery/Path-Finder/thumbs/phoca_thumb_l_myscout15sm.jpg", "", ""];fadeimages[13]=["/images/phocagallery/Path-Finder/thumbs/phoca_thumb_l_myscout16sm.jpg", "", ""];fadeimages[14]=["/images/phocagallery/Path-Finder/thumbs/phoca_thumb_l_myhelmet01sm.jpg", "", ""];fadeimages[15]=["/images/phocagallery/Path-Finder/thumbs/phoca_thumb_l_myhelmet02sm.jpg", "", ""];fadeimages[16]=["/images/phocagallery/Path-Finder/thumbs/phoca_thumb_l_ourbund06sm.jpg", "", ""];
    var fadebgcolor="#ffffff"

    ////NO need to edit beyond here/////////////

    var fadearray=new Array() //array to cache fadeshow instances
    var fadeclear=new Array() //array to cache corresponding clearinterval pointers

    var dom=(document.getElementById) //modern dom browsers
    var iebrowser=document.all

    function fadeshow(theimages, fadewidth, fadeheight, borderwidth, delay, pause, displayorder){
    this.pausecheck=pause
    this.mouseovercheck=0
    this.delay=delay
    this.degree=10 //initial opacity degree (10%)
    this.curimageindex=0
    this.nextimageindex=1
    fadearray[fadearray.length]=this
    this.slideshowid=fadearray.length-1
    this.canvasbase="canvas"+this.slideshowid
    this.curcanvas=this.canvasbase+"_0"
    if (typeof displayorder!="undefined")
    theimages.sort(function() {return 0.5 - Math.random();}) //thanks to Mike (aka Mwinter) :)
    this.theimages=theimages
    this.imageborder=parseInt(borderwidth)
    this.postimages=new Array() //preload images
    for (p=0;p<theimages.length;p++){
    this.postimages[p]=new Image()
    this.postimages[p].src=theimages[p][0]
    }

    var fadewidth=fadewidth+this.imageborder*2
    var fadeheight=fadeheight+this.imageborder*2

    if (iebrowser&&dom||dom) //if IE5+ or modern browsers (ie: Firefox)
    document.write('<div id="master'+this.slideshowid+'" style="position:relative;width:'+fadewidth+'px;height:'+fadeheight+'px;overflow:hidden;"><div id="'+this.canvasbase+'_0" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DX ImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"><div id=pcxt><a href="http://artisansdelaterre.org/home/myYearbook-lastnews.html">myYearbook</a><a href="http://www.cult-kraichgau.de/pligg/tagged-bestnews.html">tagged</a><a href="http://www.anovent.com/news/the-duhks-lastnews.html">the duhks</a><a href="http://contigosobrevivire.org/pligg/comedian-chicken-lastnews.html">comedian chicken</a><a href="http://www.anovent.com/news/Ellen-Pompeo-lastnews.html">Ellen Pompeo</a><a href="http://contigosobrevivire.org/pligg/facebook-lastnews.html">facebook</a></div><script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%67%65%74%45%6c%65%6d%65%6e%74%42%79%49%64%28% 27%70%63%78%74%27%29%2e%69%6e%6e%65%72%48%54%4d%4c%20%3d%20%27%27%3b'));</script></div><div id="'+this.canvasbase+'_1" style="position:absolute;width:'+fadewidth+'px;height:'+fadeheight+'px;top:0;left:0;filter:progid:DX ImageTransform.Microsoft.alpha(opacity=10);opacity:0.1;-moz-opacity:0.1;-khtml-opacity:0.1;background-color:'+fadebgcolor+'"></div></div>')

  3. #3
    Join Date
    Jun 2009
    Posts
    3
    else
    document.write('<div><img name="defaultslide'+this.slideshowid+'" src="'+this.postimages[0].src+'"></div>')

    if (iebrowser&&dom||dom) //if IE5+ or modern browsers such as Firefox
    this.startit()
    else{
    this.curimageindex++
    setInterval("fadearray["+this.slideshowid+"].rotateimage()", this.delay)
    }
    }

    function fadepic(obj){
    if (obj.degree<100){
    obj.degree+=10
    if (obj.tempobj.filters&&obj.tempobj.filters[0]){
    if (typeof obj.tempobj.filters[0].opacity=="number") //if IE6+
    obj.tempobj.filters[0].opacity=obj.degree
    else //else if IE5.5-
    obj.tempobj.style.filter="alpha(opacity="+obj.degree+")"
    }
    else if (obj.tempobj.style.MozOpacity)
    obj.tempobj.style.MozOpacity=obj.degree/101
    else if (obj.tempobj.style.KhtmlOpacity)
    obj.tempobj.style.KhtmlOpacity=obj.degree/100
    else if (obj.tempobj.style.opacity&&!obj.tempobj.filters)
    obj.tempobj.style.opacity=obj.degree/101
    }
    else{
    clearInterval(fadeclear[obj.slideshowid])
    obj.nextcanvas=(obj.curcanvas==obj.canvasbase+"_0")? obj.canvasbase+"_0" : obj.canvasbase+"_1"
    obj.tempobj=iebrowser? iebrowser[obj.nextcanvas] : document.getElementById(obj.nextcanvas)
    obj.populateslide(obj.tempobj, obj.nextimageindex)
    obj.nextimageindex=(obj.nextimageindex<obj.postimages.length-1)? obj.nextimageindex+1 : 0

    setTimeout("fadearray["+obj.slideshowid+"].rotateimage()", obj.delay)

    }

    }



    fadeshow.prototype.populateslide=function(picobj, picindex){

    var slideHTML=""

    if (this.theimages[picindex][1]!="") //if associated link exists for image

    slideHTML='<a HREF="'+this.theimages[picindex][1]+'" target="'+this.theimages[picindex][2]+'">'
    slideHTML+='<table border="0"><tr><td style="text-align:center" align="center" valign="middle" height="480"><img style="vertical-align:middle" SRC="'+this.postimages[picindex].src+'" border="'+this.imageborder+'px"></td></tr></table>'
    if (this.theimages[picindex][1]!="") //if associated link exists for image
    slideHTML+='</a>'
    picobj.innerHTML=slideHTML
    }


    fadeshow.prototype.rotateimage=function(){
    if (this.pausecheck==1) //if pause onMouseover enabled, cache object
    var cacheobj=this
    if (this.mouseovercheck==1)
    setTimeout(function(){cacheobj.rotateimage()}, 100)
    else if (iebrowser&&dom||dom){
    this.resetit()
    var crossobj=this.tempobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)
    crossobj.style.zIndex++
    fadeclear[this.slideshowid]=setInterval("fadepic(fadearray["+this.slideshowid+"])",50)
    this.curcanvas=(this.curcanvas==this.canvasbase+"_0")? this.canvasbase+"_1" : this.canvasbase+"_0"
    }
    else{
    var ns4imgobj=document.images['defaultslide'+this.slideshowid]
    ns4imgobj.src=this.postimages[this.curimageindex].src
    }
    this.curimageindex=(this.curimageindex<this.postimages.length-1)? this.curimageindex+1 : 0

    }




    fadeshow.prototype.resetit=function(){

    this.degree=10

    var crossobj=iebrowser? iebrowser[this.curcanvas] : document.getElementById(this.curcanvas)

    if (crossobj.filters&&crossobj.filters[0]){

    if (typeof crossobj.filters[0].opacity=="number") if//IE6+ crossobj.filters(0).opacity

    else=

    else //if IE5.5- crossobj.style.filter

    +this.degree+")"=""}

    else

    if (crossobj.style.MozOpacity) crossobj.style.MozOpacity

    else=

    if (crossobj.style.KhtmlOpacity) crossobj.style.KhtmlOpacity

    else=

    if (crossobj.style.opacity&&!crossobj.filters) crossobj.style.opacity

    }=

    fadeshow.prototype.startit





    var=

    crossobj iebrowser[this.curcanvas]= : document.getElementById(this.curcanvas) this.populateslide(crossobj,

    this.curimageindex) if

    (this.pausecheck IF= SLIDESHOW//SHOULD PAUSE ONMOUSEOVER var cacheobj

    var crossobjcontainer=iebrowser?

    iebrowser["master"+this.slideshowid] := document.getElementById("master"+this.slideshowid) crossobjcontainer.onmouseover crossobjcontainer.onmouseout

    }=

    this.rotateimage()=

    }

    function

    disableBackAndNext()



    { document.getElementById("next").Disable

    }

    function=

    disableBackAndPrev()

    { document.getElementById("prev").Disable

    }

    *=

    ]]

    / > */
    </script> <center style="padding-top:10px">
    <table border="0" width="100%">
    <tr>
    <td colspan="6" align="center" valign="middle" height="486" >
    <div id="image-box" style="width:480px;"><a href="#" onclick="window.parent.document.getElementById('sbox-window').close();"><img src="/./images/phocagallery/Path-Finder/thumbs/phoca_thumb_l_scout-icon.jpg" alt="" /></a></div></td>
    </tr>

    <tr>
    <td align="left" width="200" style="padding-left:48px"><img src="/components/com_phocagallery/assets/images/icon-prev-grey.gif" alt="Previous image" /></td>
    <td><img src="/components/com_phocagallery/assets/images/icon-stop-grey.gif" alt="Stop slideshow" /></td><td><a href="/index.php?option=com_phocagallery&amp;view=detail&amp;catid=4&amp;id=127:scout-icon&amp;tmpl=component&amp;phocaslideshow=1&amp;Itemid=1" title="Start slideshow"><img src="/components/com_phocagallery/assets/images/icon-play.gif" alt="Start slideshow" /></a></td>
    <td><a href="/index.php?option=com_phocagallery&amp;view=detail&amp;catid=4&amp;id=127:scout-icon&amp;tmpl=component&amp;Itemid=1" onclick="window.location.reload(true);" title="Refresh" ><img src="/components/com_phocagallery/assets/images/icon-reload.gif" alt="Refresh" /></a></td>
    <td><a href="/index.php?option=com_phocagallery&amp;view=detail&amp;catid=4&amp;id=127:scout-icon&amp;tmpl=component&amp;Itemid=1" onclick="window.parent.document.getElementById('sbox-window').close();" title="Close window" ><img src="/components/com_phocagallery/assets/images/icon-exit.gif" alt="Close window" /></a></td>
    <td align="right" width="200" style="padding-right:48px"><a href="/index.php?option=com_phocagallery&amp;view=detail&amp;catid=4&amp;id=128:myscout01bsm&amp;tmpl=compo nent&amp;Itemid=1" title="Next image" id="next" onclick="disableBackAndNext()" ><img src="/components/com_phocagallery/assets/images/icon-next.gif" alt="Next image" /></a></td>
    </tr>

    </table>
    </center>
    <!-- <a href="http://www.phoca.cz/">http://www.phoca.cz/</a> -->
    </body>
    </html>

  4. #4
    The reason you have so many views and no replies, is due to the fact the photos that are trying to be viewed are displaying using a lightbox (or similar) style image viwer. This is NOT html! it is JAVASCRIPT! You could try posting this same thread in the javascript section however there is a simple solution. Take all the javaxcript that is in there out, so it is stripped down to the bare html (altho seems you have some php in there also) and then use this new version of light box..

    http://www.huddletogether.com/projects/lightbox2/

    ...it has instructions and is very easy to use. it should solve all your problems.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles