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

User 2699991 Photo


Registered User
5,402 posts
Online Now

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
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/index.html
User 2699991 Photo


Registered User
5,402 posts
Online Now

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)
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/index.html
User 2699991 Photo


Registered User
5,402 posts
Online Now

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)
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/index.html
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.