How do I add a link to a picture? -...

User 2699991 Photo


Registered User
5,558 posts

Chris Hembree wrote:
I did name a folder in my recourses called fancybox/images/large1.jpg

I am so new at this, I may be doing it all wrong.

This is what I do have working in my index.html file.
Just can't figure how to import it in RSD

<!DOCTYPE html>
<html>
<head>

<meta charset='utf-8'/>
<title>Fancybox</title>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>

</head>
<body>
<a class="fancybox" href="images/large1.jpg"><img src="images/small1.jpg" /></a>
</body>
</html>

I am still not sure what you are wanting to achieve,, I suspect this fancybox thingy is like a modal window that has an image .... ? (which sort of covers the whole page if someone clicks on the trigger (button or image),,, is that sort of what you are after
STUCK ON SOMETHING?
Learning by doing. Responsive Site Designer Tutorials

User 2699991 Photo


Registered User
5,558 posts

Chris Hembree wrote:
I did name a folder in my recourses called fancybox/images/large1.jpg

I am so new at this, I may be doing it all wrong.

This is what I do have working in my index.html file.
Just can't figure how to import it in RSD

<!DOCTYPE html>
<html>
<head>


<meta charset='utf-8'/>
<title>Fancybox</title>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>

</head>
<body>
<a class="fancybox" href="images/large1.jpg"><img src="images/small1.jpg" /></a>
</body>
</html>


Well there is one thing to try

insert the code
<a class="fancybox" href="fancybox/images/large1.jpg"><img src="fancybox/images/small1.jpg" /></a> into an html element which is in a column or container,,, leave out the tag "body" (also assuming the images are inside that folder)
STUCK ON SOMETHING?
Learning by doing. Responsive Site Designer Tutorials

User 2699991 Photo


Registered User
5,558 posts

Wayan Jaya wrote:
Chris Hembree wrote:
I did name a folder in my recourses called fancybox/images/large1.jpg

I am so new at this, I may be doing it all wrong.

This is what I do have working in my index.html file.
Just can't figure how to import it in RSD

<!DOCTYPE html>
<html>
<head>


<meta charset='utf-8'/>
<title>Fancybox</title>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="source/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>

</head>
<body>
<a class="fancybox" href="images/large1.jpg"><img src="images/small1.jpg" /></a>
</body>
</html>


Well there is one thing to try

insert the code
<a class="fancybox" href="fancybox/images/large1.jpg"><img src="fancybox/images/small1.jpg" /></a> into an html element which is in a column or container,,, leave out the tag "body" (also assuming the images are inside that folder)


If all else fails try attaching the project file (zipped) so I can take a look at the actual project and see if I can help you figure it out. (I never have used fancybox so not sure of the process but should be able to work something out)
STUCK ON SOMETHING?
Learning by doing. Responsive Site Designer Tutorials

User 2845797 Photo


Registered User
45 posts

Okay what I am trying to do is set up a photo gallery with a small pictures linking to a larger picture.
I uploaded the fancybox file to dropbox. You can play with it if you like to see how it
works.

https://www.dropbox.com/sh/e70j6gtsr7e6 … qlLza?dl=0

Fancybox is just like color box. just a plugin for Jquery,

Putting everything in the right place in RSD is the hard part for me.

Thank you for your time.
Have a great day.
Chris
User 2845797 Photo


Registered User
45 posts

Okay found a form that talks a great deal about this.

Thanks
Chris

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.