I'm trying to use a zip resourse in image tags. 

The name of the zip file is slideshow.zip. The unzipped folder is called slideshow and it contains a folder called images. Inside the images folder there is an image called 1.jpg.

The directory in my system looks like this :  slideshow/images/1.jpg

In the zip it is like this : slideshow.zip>>images>>1.jpg

Now I'm using an image tag like this : 

<apex:image  url="{!URLFOR($Resource.slideshow, 'images/1.jpg')}"  width="600" height="400"/>

This tag shows a broken image in the page. Please help me to fix this. Thanks

I want to make a slideshow of images by embedding javascript in visualforce.

I wrote the following code. It shows the same image even after clicking next button. Can anyone tell me how to fix it? thanks

<apex:page showChat="false" sidebar="false" standardController="account">
<apex:pageBlock >
<apex:form >
<center>
<apex:image id="img" value="{!$Resource.one}" width="600" height="400"/>
<br>
</br>

<apex:commandButton value="Next" styleClass="groovybutton" onclick="next();return false;"/>

</center>
</apex:form>
<script>
function next()
{

var img = document.getElementById('img');
img.value= "{!$Resource.two}";

}
</script>
</apex:pageBlock>
</apex:page>

I'm trying to use a zip resourse in image tags. 

The name of the zip file is slideshow.zip. The unzipped folder is called slideshow and it contains a folder called images. Inside the images folder there is an image called 1.jpg.

The directory in my system looks like this :  slideshow/images/1.jpg

In the zip it is like this : slideshow.zip>>images>>1.jpg

Now I'm using an image tag like this : 

<apex:image  url="{!URLFOR($Resource.slideshow, 'images/1.jpg')}"  width="600" height="400"/>

This tag shows a broken image in the page. Please help me to fix this. Thanks

I want to make a slideshow of images by embedding javascript in visualforce.

I wrote the following code. It shows the same image even after clicking next button. Can anyone tell me how to fix it? thanks

<apex:page showChat="false" sidebar="false" standardController="account">
<apex:pageBlock >
<apex:form >
<center>
<apex:image id="img" value="{!$Resource.one}" width="600" height="400"/>
<br>
</br>

<apex:commandButton value="Next" styleClass="groovybutton" onclick="next();return false;"/>

</center>
</apex:form>
<script>
function next()
{

var img = document.getElementById('img');
img.value= "{!$Resource.two}";

}
</script>
</apex:pageBlock>
</apex:page>